html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #091336;
}
#container {
    display: flex;
    width: 100%;
    height: 100%;
}
#canvas-left {
    display: block;
    width: calc(100vw - 80vh);
    height: 100%;
}
#canvas-right {
    display: block;
    width: 80vh;
    height: 100%;
    border-left: 3px solid #ebf1ff;
}
#title {
    font-family: "Roboto", sans-serif;
    font-size: 7vh;
    font-weight: 250;
    color: #ebf1ff;
    position: absolute;
    top: 1vh;
    left: calc(100vw - 79vh);
    margin: 0;
}
#subtitle {
    font-family: "Roboto", sans-serif;
    font-size: 3vh;
    font-weight: 200;
    color: #ebf1ff;
    position: absolute;
    top: 9.4vh;
    left: calc(100vw - 78.6vh);
    margin: 0;
}
.overlayButton {
    font-family: "Roboto", sans-serif;
    font-size: 6vh;
    font-weight: 250;
    color: #ebf1ff;
    text-align: center;
    width: 40vh;
    height: 8vh;
    margin-top: 3vh;
    margin-left: 12vh;
    background-color: transparent;
    border: 3px solid #ebf1ff;
    border-radius: 2vh;
    cursor: pointer;
}
.overlayButton:hover {
    color: #d4e0fa;
    border: 3px solid #d4e0fa;
}
#overlay {
    position: absolute;
    top: 18vh;
    right: 8vh;
    width: 64vh;
    height: 70vh;
    padding-top: 6vh;
    background-image: linear-gradient(to right, rgba(9, 19, 54, 0) 0%, rgba(9, 19, 54, 0.8) 20%, rgba(9, 19, 54, 0.8) 80%, rgba(9, 19, 54, 0) 100%)
}
#links {
    display: flex;
    justify-content: center;
    gap: 1vh;
    margin-top: 3vh;
}
#discordIcon, #youtubeIcon, #patreonIcon {
    width: 7vh;
    border: 3px solid #ebf1ff;
    border-radius: 4vh;
    z-index: 2;
}

/* Maximum width */
@media (max-width: 80vh) {
    #title {
        font-family: "Roboto", sans-serif;
        font-size: 8vw;
        font-weight: 250;
        color: #ebf1ff;
        position: absolute;
        top: 1vh;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
    }
    #subtitle {
        font-family: "Roboto", sans-serif;
        font-size: 4vw;
        font-weight: 200;
        color: #ebf1ff;
        position: absolute;
        top: 11.5vw;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
    }
    .overlayButton {
        font-family: "Roboto", sans-serif;
        font-size: 6vh;
        font-weight: 250;
        color: #ebf1ff;
        text-align: center;
        width: 76vw;
        height: 8vh;
        margin-top: 3vh;
        margin-left: 12vw;
        background-color: transparent;
        border: 3px solid #ebf1ff;
        border-radius: 2vh;
        cursor: pointer;
    }
    .overlayButton:hover {
        color: #d4e0fa;
        border: 3px solid #d4e0fa;
    }
    #overlay {
        position: absolute;
        top: 18vh;
        right: 0;
        width: 100%;
        height: 70vh;
        padding-top: 6vh;
        background-image: linear-gradient(to right, rgba(9, 19, 54, 0) 0%, rgba(9, 19, 54, 0.8) 20%, rgba(9, 19, 54, 0.8) 80%, rgba(9, 19, 54, 0) 100%)
    }
    #links {
        display: flex;
        justify-content: center;
        gap: 1vh;
        margin-top: 3vh;
    }
    #discordIcon, #youtubeIcon, #patreonIcon {
        width: 7vh;
        border: 3px solid #ebf1ff;
        border-radius: 4vh;
        z-index: 2;
    }
}