body {
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: auto;
    color: white;
}
/*This is the image in the back. it has been made to fit to the area that is visible on your screen. The background color just ensures it's not white if the background image file messes up. "color" makes the text white.*/

@font-face {
    font-family: "title"; 
    src: url("Hallofest.ttf") format("truetype");
    /* or: */
    src: url("Hallofest.ttf") format("opentype"); /
}
/*This is where I make the CSS file understand that I want a different font.*/

section {
    margin: 0 auto;
    /*Centers the content*/
    padding: 8vh 0 0;
    /*Makes the content appear a little bit down on the page so it doesn't interfere with the frame. "vh" makes it adhere to the height of the screen it is being viewed on*/
    display: flex;
    /*Ensures the content stays within the div :)*/
    width: 600px;
    /*The width of the content.*/
    min-height: 90vh;
    /*makes the page (mainly the background) fit the screen it is viewed on*/
    text-align: center;
    /*makes text appear at the center of the page*/
}

a {
    color: white
}
/*This makes the links white as opposed to blue*/

/*all the dropdown sections are related to the navigation menu. It is made so that every category can have sub-categories. I honestly wrote this code a long time ago and barely remember what each piece does lol*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    padding-bottom: 36px;
}

.dropdown-content a:hover {
    text-decoration: underline;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 1000px;
    background-position: center;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 2;
}

.dropdown-subcontent {
    display: none;
    position: absolute;
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 1000px;
    background-position: center;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 2;
}

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

.dropdown-submenu:hover .dropdown-subcontent {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
/* ===== end of dropdown section ===== */

.actual-page {
    height: 49vh;
    width: 440px;
    margin-top: 14vh;
    /*This time this is what makes the content appear lower down on the page!*/
    padding: 0 80px 0;
    /*This just makes it so it appears inside the frame. Other frame widths require other padding*/
    overflow: scroll;
    /*This makes it so that content that would end up outside of the area is possible to scroll to!*/
    overflow-x: hidden;
    /*while this makes it so that there isn't a scroll bar at the bottom of the area*/
}

.border-img {
    z-index: -1;
    /*This puts the frame below the other frame in a "3D"-sense*/
    position: fixed;
    /*This makes it so that the placement of the frame can be decided independent of the other content on here it also conveniently keeps it centered.*/
    width: 440px;
    height: 51vh;
    margin-top: -55vh;
    background-image: url(Border.png);
    /*makes the bg the image of my choice. No real reason to make it a background aside from not having to re-link it properly in all the html files. */
    background-size: 100% 100%;
    /*makes it the size specified above and not just part of that area*/
    background-repeat: no-repeat;
    /*makes it not repeat.*/
    padding: 5vh 79px;
    /*Without this it ends up the wrong size*/
}
/*note that the width is constant but the height adheres to the screen size!*/

.footer{
    margin: 1px 150px;
    height: 10vh;
    width: 300px;
     position: fixed;
    bottom: 9vh;
    text-align: center;
    /*makes the placement work*/
    font-family: title;
    /*calls for the correct font*/
   
}

.footer h1{
    font-size: 2.7em;
    /*makes the font slightly bigger than a standard header would be*/
    font-weight: lighter;
    /*makes the font slightly thinner and as such more legible imo*/
}

/* ===== Scrollbar CSS ===== */
/*Ngl, not my code... it's mostly self-explanatory though.*/
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #896f58 #decbb4;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #decbb4;
}

*::-webkit-scrollbar-thumb {
    background-color: #896f58;
    border-radius: 10px;
    border: 3px none #decbb4;
}