:root{

/* Colors */    
--light-grey: #BFBFBF;
--grey: #808080;
--dark-grey: #3F3F3F;
--white: #FFFFFF;
--black: #000000;

--red: #F44B43;
--orange: #FF965F;
--yellow: #FCD02B;
--green: #92C52C;
--blue: #59AAEF;
--purple: #966FD7;
--pink: #F572C7;
    
/* Fonts */
--main-font: "Atkinson Hyperlegible", sans-serif;  
    
/* Misc */
    image-rendering: pixelated;
}

/* Functional Fonts */
@font-face {
font-family: Atkinson Hyperlegible;
src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v12/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G07JIoSwQ.woff2) format('woff2');
}

/* Decorative Fonts */
@font-face {
font-family: Cheeky Rabbit;
src: url(https://decomail.space/fonts/Cheeky%20Rabbit.ttf);
}
@font-face {
font-family: Blue Screen;
src: url(https://decomail.space/fonts/Blue%20Screen.ttf);
}
@font-face {
font-family: Amorlate;
src: url(https://decomail.space/fonts/Amorlate.ttf);
}
@font-face {
font-family: LEDLIGHT;
src: url(https://decomail.space/fonts/LEDLIGHT.otf);
}

/* Text Display Edits */
h1, h2, h3{
    font-family: "Blue Screen";
}

p{
        font-family: var(--main-font);
    }
sub, sup{
    font-size: 60%;
}



header{
    height: 80px;
    border: 5px dashed var(--red);
}

nav{
height: 80px;
    border: 5px dashed var(--yellow);
}

main{
   height: 800px;
    border: 5px dashed var(--green); 
}

footer{
    height: 80px;
    border: 5px dashed var(--blue);
}






/*Sort Later; testing some shit*/
.cd-shelf{
    display: grid;
    grid: auto / repeat(4, 1fr); 
    gap: 10px;
    
    padding: 5px;
    background-color: var(--black);
    
    > div.cd{
    display: flex;
    position: relative;

        > div.cd-info{
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
    
            margin: 0px;
            padding: 5px;
            opacity: 0;
            transition: opacity 0.2s;
            
            background-color: white;
            
            > p{
                margin: 0;
            }
            a {
                text-decoration: none;
                color: inherit;
            }
        }
        >div.cd-info:hover{
            opacity: .9;
        }
        > img.album-cover{
            width: 100%;
            object-fit: cover;
        }
    }
}