:root{
    --freeplay_red: rgb(225, 0, 0);
    --freeplay_black: rgb(30,30,50); 
    --freeplay_white: rgb(230,230,235);
    --freeplay_orange: rgb(250,182,0);
    --freeplay_gold: rgb(254,225,30);
    --freeplay_yellow: rgb(255,249,101);
    --freeplay_purple: rgb(190,11,231);
    --freeplay_navy: rgb(20,33,85);
}

@keyframes button-click {
    0%{
        box-shadow: 0px 0px 0w var(--freeplay_red), inset 0px 0px 2vw var(--freeplay_red)
    }
    100%{
        box-shadow: 0px 0px 1vw var(--freeplay_red), inset 0px 0px 2vw var(--freeplay_red)
    }
}

@keyframes button-hover {
    0%{
        box-shadow: inset 0px 0px 0vw var(--freeplay_red), 0px 0px 1vw var(--freeplay_red);
    }
    100%{
        box-shadow: inset 0px 0px 2vw var(--freeplay_red), 0px 0px 0vw var(--freeplay_red);
    }
}


@keyframes button-unhover {
    0%{
        box-shadow: inset 0px 0px 2vw var(--freeplay_red), 0px 0px 0vw var(--freeplay_red);
    }
    100%{
        box-shadow: inset 0px 0px 0vw var(--freeplay_red), 0px 0px 1vw var(--freeplay_red);
    }
}

@keyframes link-hover{
    0%{
        color: var(--freeplay_gold);
    }
    100%{
        color: var(--freeplay_yellow);
    }
}

@keyframes link-unhover {
    0%{
        color: var(--freeplay_yellow);
    }
    100%{
        color: var(--freeplay_gold);
    }
}

@keyframes nav-hover{
    0%{
        background-color: var(--freeplay_red);
    }
    100%{
        background-color: var(--freeplay_navy);
    }
}

body{
    cursor: url('handCursor.png'), auto;
    overflow-y: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 25px;
}
body:active{
    cursor: url('handCursorDown.png'), auto;
}

#DISPLAY{
    width: 100vw;
    height: 100vh;
    background-color: var(--freeplay_black);
}

nav{
    float: left;
    width: 100%;
    height: 5%;
    background-color: var(--freeplay_red);
    text-align: center;
    justify-content: center;
    /* box-shadow: inset 0px 0px 50px var(--freeplay_red); */
}

.nav-button{
    width: 33%;
    height: 90%;
    margin-top: 0.1%;
    font-size: 25px;
    box-shadow: none;
}
.nav-button:hover{
    background-color: var(--freeplay_navy);
    animation: nav-hover 0.5s ease-in-out; 
}

a{
    cursor: url('handCursor.png'), auto;
    color: var(--freeplay_gold);
    text-decoration: underline;
}
a:hover{
    cursor: url('handCursor.png'), auto;
    color: var(--freeplay_yellow);
    animation: link-hover 0.2s ease-in-out;
}
a:not(:hover){
    animation: link-unhover 0.2s ease-in-out;
}

button{
    background-color: rgba(var(--freeplay_black),0.8);
    color: var(--freeplay_white);
    font-size: 3vh;
    border: solid 2px var(--freeplay_red);
    cursor: url('handCursor.png'), auto;
    white-space: nowrap;
    box-shadow: 0px 0px 1vw var(--freeplay_red);
}
button:hover{
    box-shadow: inset 0px 0px 2vw var(--freeplay_red);
    animation: button-hover 0.1s ease-in-out;
}
button:not(:hover){
    animation: button-unhover 0.1s ease-in-out;
}
button:active{
    box-shadow: 0px 0px 1vw var(--freeplay_red), inset 0px 0px 2vw var(--freeplay_red);
    animation: button-click 0.05s ease-in-out;
}

header img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

h1{
    color: rgb(250,200,100);
}