:root {
    --orange:#ff9000;
    --blue:#7d83ff;
    --green:#2e933c;
    --purple:#883677;
    --red:#c33c54;
}

body {
    overflow:hidden;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:monospace;
}

#splash {
    background-color:var(--blue);
    z-index:2;
    width:100vw;
    height:100vh;
}

#splash h1 {
    color:var(--orange);
    text-align:center;
    padding-top:15vh;
    font-size:20vh;
    z-index:1;
}

#shape, #shape2 {
    width:40vw;
    height:40vw;
    position:absolute;
}

#shape {
    background-color:var(--green);
    left:70vw;
    top:40vh;
    rotate:35deg;
}

#shape2 {
    background-color:var(--purple);
    left:-20vw;
    top:30vh;
    rotate:20deg;
}

#splash button {
    border:5px solid var(--red);
    outline:none;
    border-radius:8px;
    width:10vw;
    margin-left:45vw;
    background-color:var(--blue);
    color:var(--red);
    padding:2vh;
    font-weight:bold;
    font-size:4vh;
    cursor:pointer;
    transition:all linear 0.5s;
    z-index:1;
}

#splash button:hover {
    background-color:var(--red);
    color:var(--blue);
}

#splash h2 {
    position:absolute;
    text-align:center;
    bottom:4px;
    width:100vw;
    color:var(--red);
}

#game > * {
    position:absolute;
    padding:7px;
}

#side {
    left:0;
    width:20vw;
    height:100vh;
    overflow:scroll;
    background-color:var(--blue);
}

#side h2 {
    color:var(--orange);
    font-size:5vh;
}

#side button {
    border:none;
    background:none;
    outline:none;
    border-bottom:1px solid var(--red);
    color:var(--red);
    font-size:2vh;
    cursor:pointer;
    min-width:40%;
    clear:both;
    display:block;
    text-align:center;
    margin-bottom:6px;
}

#side button:hover {
    background-color:var(--red);
    color:var(--blue);
}

#main {
    display:grid;
    grid-template-columns:auto auto;
    left:20vw;
    height:100vh;
    width:80vw;
    padding:0;
    grid-auto-rows:50vh;
    background-color:#777;
}

canvas {
    height:90%;
    aspect-ratio: 1;
    margin:5% auto;
    display:block;
}

#win {
    display:none;
}

@keyframes win {
    0% {
        scale: 1.0;
        rotate:-20deg;
    }
    25% {
        rotate:20deg;
    }
    50% {
        scale: 1.5;
        rotate:-20deg;
    }
    75% {
        rotate:20deg;
    }
    100% {
        scale: 1.0;
        rotate:-20deg;
    }
}

#win p {
    font-size:20vh;;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    margin-top:30vh;
    animation:win infinite 4s;
    color:var(--orange);
}
#win p span:nth-child(1), #win p span:nth-child(4) {
    color:var(--red);
}
#win p span:nth-child(2), #win p span:nth-child(5) {
    color:var(--green);
}
#win p span:nth-child(3), #win p span:nth-child(6) {
    color:var(--purple);
}
#win {
    background-color:var(--blue);
    position:absolute;
    height:100%;
    width:100%;
}