/* importing Meyer's CSS Reset */

@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);


/* :root selector is the very base of your site, any elements that by default inherit anything, inherit from here, unless you make them inherit from elsewhere */

:root {

color: white;

font-family: Arial, Helvetica, sans-serif;

scrollbar-width: thin;

scrollbar-color: white black;

}


/* the outermost element of your website, it holds the head and body */

html {

background-color: black;

padding: 1rem;

}


/* unorganised list (ul) with class "siteList" */

ul.siteList {

padding: 1rem;

display: flex;

justify-content: center;

flex-wrap: wrap;

}


/* list item (li) with class "site" */

li.site {

width: max-content;

display: flex;

flex-direction: column;

align-items: center;

gap: 10px;

}


/* anchor (a); A.K.A. link, with class "siteButton" */

a.siteButton {

color: black;

background-color: white;

padding: 1rem;

}


/* ::before / ::after creates a "fake" element before or after an existing html element */

a.siteButton::before {

content: "Go to";

margin-right: 0.5rem;

display: inline-block;

}


/* iframe (iframe), which can contain anything that can be linked with a URL, so an image, gif, video, site, etc. */

iframe.siteWindow {

display: block;

padding: 5px;

width: 80vw;

max-width: 1000px;

aspect-ratio: 16/9;

box-sizing: border-box;

}


/* selectors don't need to specify elements of classes, but if you ever want to add properties to only certain elements with classes, you should write it like I did above */

.siteButton, .siteWindow {

border: 2px solid white;

border-radius: 10px;

}


Green text is CSS Comments, written inside /**/, /* like this */. in VScode, you can comment out a whole line, or highlighted text by pressing [CTRL + *]


Red text is @import, used to import code, fonts, and whatever else, through links


Orange text is CSS Selectors, they are for targetting specific elements, there is many different operators, for creating a relation between elements you target, which i will explain later


Pink text is CSS Properties, these are the actual changes you make, they are the available "commands" you have at hand, to interact with the elements you target with the selectors.


Blue text is CSS Variables, these are the "instructions" for your "commands", most properties have their own special variables you will find on the suggested autocomplete dropdown menu. width: for example, among the common variables, like px, %, em, rem, vw, cm, and mm, also has 3 other variables which don't use numbers. (min-content, max-content and fit-content).


Violet text is CSS Pseudoelements, these allow you to create an HTML element with just CSS, but only two, as you can make one that, as by default displayed inline, like text, will be created before or after your element. it's typically used to apply a bit of extra text before something, like "item number X:", as you can see here in the main site's code, i used it to write "Go to" before the link that leads you here.


and this text is me saying i love you <3