@font-face {
    font-family: "Sour Gummy";
    src: url(fonts/SourGummy-Regular.ttf);
}

@media (max-width: 768px) {
    #MusicPlayer {
        width: 100vw;
    }
}

body {
    font-family: "Sour Gummy", Verdana, Arial; font-size:20px; /* This is for the font, it has to be the same as the sourced referenced on the HTML file */
    background-color: pink;
    border: 3px solid #4d0049;
    color:#4d0049; /* I believe this is for the color of the text */
    height: auto; /* Apparently this makes the body at least the height of the browser window */
    padding: 20px 20px 20px 20px; /* This helps me get some space between the border of the page and the actual content (It looks nicer) */
    width: 60%; /* I believe this determines how much horizontal space on the screen the body can take */
    margin-top: 1%;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 1%;
    text-align: left;
    /* Anything not explained with a comment I consider sort of self-explanatory */
}

img {
    max-width: 100%;
    display: flex;
    /* image-rendering: pixelated; <-- This is good for Pixel Art, will use later */
}

header {
    /* text-shadow: 3px 3px 5px #4d0049; <-- This thing gives your text a shadow but it's ugly as hell, it can have more than one shadow too
    There's also the option of giving shadows to a box of text, by shoving it into a Div and giving it and Id, then calling the Id as #Id on CSS */ 
    color:red;
}

footer {
    font-style:italic;
}

hr {
    color:#4d0049; background-color:#4d0049; height: 1px;
}

* {
  cursor: url('https://cdn.cursors-4u.net/previews/illyasviel-von-einzbern-fate-stay-night-2-b6ea0b68-32.webp') 32 32, auto !important;
}

mark {
    color:darkorchid;
    background-color:pink;
}

a:link {
    color:rgb(54, 0, 155);
    font-weight:normal;
}

a:visited {
    color:red;
    text-decoration:none;
    text-decoration-color:pink;
    font-weight:bold;
}

a:hover {
    color:rgb(54, 0, 155);
    font-weight:normal;
    text-decoration:underline;
}

a:active {
    color:rgb(54, 0, 155);
    font-weight:normal;
    text-decoration:underline;
}

::selection {
    background: #4d0049; /* This lets me change the color background of highlighted elements */
    color: #FFFFFF; /* This lets me change the font color of highlighted text */
}

::-webkit-scrollbar {
    width:1rem;
}

::-webkit-scrollbar-track {
    background: pink;
}

::-webkit-scrollbar-thumb {
    background: darkorchid;
}

::-webkit-scrollbar-thumb:hover {
    background: #4d0049;
}

/*
aside {
    width: 20%;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    font-style: italic;
    background-color:#ffc0cb;
    border: solid;
    border-color:#4d0049;
}
*/