/* Someone's peeking my code it seems >:3
Go ahead and read through it, I've added a ton of comments to hopefully help both myself and other people understand how things work. 
♡ Copying is an act of love */

/* There's three levels to a style sheet: external, internal, and inline. Internal sheets overrule external sheets, and inline styling overrules both internal and external sheets.*/
/*THIS IS AN EXTERNAL STYLESHEET. 
You can make a universal design for your website, by using a single external sheet that all your pages then link to in your <head> space.*/
:root {
    /* In the :root area, you're able to rename different values/variables used throughout the css file. Thus, you can refer to these values by the given name instead. 
    You rename your variables by adding -- in front of the given name. You refer to the variables in the code itself with: var(--name) */

    /* Coming from sadgrl's layout maker, this variables refer to an image by name instead of a url-link. These work well for background images that repeat throughout your site */
    --body-bg-image: url('images/spacebackground.png');

    /* These variables allow you to change the color of multiple elements in an instant */
    --main: #222639;
    --aside: #374153;
    --third: #3f445d;
    --text: #f0f1ea;
    --title: #b7ffe8;
    --divider: #A7D8F1;
}

* {
    /* The asterisk/star (*) refers to ALL html-elements in your documents */
    margin: 0; /* outer margin */
    padding: 0; /* inner margin */
    box-sizing: border-box;
}

figure, img {
    max-width: 80%;
}

body {
    background-color: var(--third);
    color: var(--text);
    font-family: Kodchasan, serif;
    width: 60%;
    margin: auto;
    background-image: var(--body-bg-image);
}

/* This section is for all your class attributes. The class attribute allows you to edit the appearance of all elements under that class. 
Like RPG classes: You can have a melee class, a ranged class, and a magic class. The elements inside these class are then the people of those classes. 
The class attribute is also good for categorizing different topics that your elements are about. Elements about a certain fandom can have their class be known as "fandom" or as the specific media, while elements about music can be categorized under the "music" class 
The class is especially useful for grids, an easy way to define the size of individual elements. By putting them in a grid and changing the size of each grid-cell, the elements inside will be forced to fit those sizes. */

/* this refers to all elements with the value: class="container" */
.container {  display: grid;
    grid-template-columns: max-content 1fr 1fr;
    grid-template-rows: 60px 60px 1fr 60px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "header header header"
      "nav nav nav"
      "aside main main"
      "footer footer footer";
  }

/* by the same logic, this refers to all elements with the values depicted" */
/* This will edit all elements listed before the open bracket. 
If you later (or earlier) on decide to then edit one of these elements on its own, it will then overwrite this styling bracket */
.header, .nav, .main, .aside, .footer, .top, .mid, .bot {
    padding: 1rem;
}

/* Similar as just above, but here we edit all headings at once. 
This is useful for universal things like having them all share the same font. */
h1, h2, h3, h4 {
    font-family: Kodchasan, serif;
    color: var(--title);
}
 
/* Now we can edit each heading. Here, it is done to vary the font size of each heading. */
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 2rem;
}
ul {
    list-style-type: none;
    padding-left: 1.5em;
    line-height: 1.5;
}

/* Here, we're editing each individual block/class, such that they have a unique appearance that'll make them easier to tell apart visually. */
.header { 
    grid-area: header;
    background-color: var(--third); 
    text-align: center;
}
    
.nav { 
    grid-area: nav;
    border-top: 2px var(--divider) solid;
    border-bottom: 2px var(--divider) solid;
    background-color: var(--third);
}

.main {
    display: grid;
    grid-template-columns: 1fr 0fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "main1 main2";

    grid-area: main;
    background-color: var(--main);
    padding: 1rem 1rem 2rem 1rem;
    overflow: auto;
}
.main1 {
    grid-area: main1;
}
.main2 {
    grid-area: main2;
}

.aside {
    grid-area: aside;
    background-color: var(--aside);
    display: block;
    min-width: 250px;
    max-width: 250px;
}

.footer { 
    grid-area: footer;
    background-color: var(--third); 
    text-align: center;
}
    
em {
    font-style: normal;
    font-weight: bold;
}

a {
    color: #ffffff;
}

/* .nav ul and .nav li work together to create a nice, horizontal navigation bar. 
.Nav li makes it horizontal, .nav ul makes it spaced aesthetically pleasingly.*/

.nav ul {
    display: flex;
    justify-content: space-evenly;
    /* display and justify-content work together to center and evenly space each link in the navigation bar. 
    Adding or removing any new links will realign all links so that they are still evenly spaced.*/
}
.nav li {
    display: inline;
    /* Display: inline is what allows the links in navigation to be horizontal. 
    They put the link 'in-line' with the rest of the text (and thus each other), instead of putting each of them on an individual line.*/
}

/* This formats links inside the .nav-element. 
Links outside the nav-element will NOT be affected by this */
.nav a {
    text-decoration: none; /* Removes the underline under the links*/
    color: #ffffff;
}

/* Affects links in the navigation bar specifically when a link is hovered over */
.nav a:hover {
    color: #A7D8F1; /* This color is visually different from normal. This is in place of the underline that would normally appear under a link when hovered.*/
    text-decoration: none;
}

.nav li.dropdown {
    display: inline;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--third);
    border-style: dotted solid double;
    border-width: 2px;
    border-color: var(--divider);
    padding: 5px 10px;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
}

.nav li.dropdown:hover .dropdown-content {
    display: block;
}

.marquee {
    position: relative;
    background-color: var(--main);
    border: 1px var(--divider) dotted;
    width: auto;
    height: 40px;
    overflow: hidden;
    padding: 4px;
    bottom: 8px;
    border-radius: 10px;
}

.marquee iframe {
    position: absolute;
    top: 4px;
    left: 0;
    width: 102%;
    border: none;
}

/* Similarly as class, id can be used to categorize elements once more, this time with the value id="value".
Continuing the RPG metaphor, ids are secondary characterics, let's say species/races here. 
We have a human magician, a human ranger, and an elf ranger. The humans share ids while the rangers share class.*/

/* the id will overwrite any styling done to the standard element, as long as you include id="value". In that way, you can have different font-colors, different font-sizes, or different background-colors for different webpages, all while refering to a single css sheet.*/
#updates {
    height: 300px;
    overflow: auto;
    border: 2px var(--divider) dotted;
    margin: 2%;
    padding: 5px;
    background: var(--aside);
}
#updates p{
    margin-bottom: 3%;
    background: var(--main);
    padding: 5px;
}

#PagedollImage {
    height:30vmin; 
    right: 2px;
    bottom: 2px;
    position: fixed;
    width: auto;
    filter: drop-shadow(0px 0px 3px #ffaa5e);
    transition: transform 1.7s ease;
    }
/* just like with the navigation links before, which was a class changing under certain conditions, so too can an id change under those same conditions. 
Once again, we here have something change when the mouse hovers over it. This time, I instead want the images with this id to spin on itself when hovered over. */
#PagedollImage:hover {
    transform: rotateY(360deg);
    }

#button {
    position: relative;
    background-color: var(--main);
    border: 1px var(--divider) dotted;
    padding: 5px;
    bottom: 8px;
    border-radius: 10px;
    }
#button img{
    max-height: 31px;
    width: auto;
    }

/* This section is for any custom fonts you may want 
You can find various fonts online. Google has it's own collection of fonts, and has the benefit that you can directly import fonts from that site. There's no need to host the font yourself, though it is still recommended for the sake of preserving online media. 
I have chosen to host my font on my own neocities site. Thus, I only need to refer to the folder they exist in, rather than the website they're hosted on. */
@font-face {
    font-family: 'Kodchasan';
    src: 
        url('/fonts/Kodchasan-Regular.ttf'),
        url('./fonts/Kodchasan-Regular.ttf');
}
@font-face {
    font-family: 'Kodchasan';
    src: 
        url('/fonts/Kodchasan-Bold.ttf'),
        url('./fonts/Kodchasan-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Kodchasan';
    src: 
        url('/fonts/Kodchasan-Italic.ttf'),
        url('./fonts/Kodchasan-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'Kodchasan';
    src: 
        url('/fonts/Kodchasan-BoldItalic.ttf'),
        url('./fonts/Kodchasan-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

/* This is for any viewscreens with a smaller width, usually phones. 
It also responds to when someone's browser window is similar small in width, such as in cases where one has two or more windows side-by-side. */
@media screen and (max-width: 800px){
    /* This hides elements with the class 'hideonphone' whenever someone is on a device with a small width. 
    Note that elements can have multiple classes, thus your main or footer can also have the hideonphone class.
    In my case, I use 'hideonphone' to hide the sidebar,  */
    .hideonphone {
        display: none;
    }

    body {
        width: auto;
    }

    .images {
        flex-wrap: wrap;
    }

    .images img {
        width: 100%;
    }

    h1, h2, h3, h4 {
        font-size: 2rem;
    }
}