.menu{
    /*display: none;*/
}

.options .menu-covid,
.options .menu-controls,
.options .menu-start{
    display: none;
}

.language{
    position: absolute;
    right: 20px;
    bottom: 16px;
    z-index: 10;
    cursor: pointer;
    display: none;
}
.intro .language{ display: block; }



/*======================================
    LEFT SIDE
======================================*/
.menu-left-side{
    width: 60vw;
    height: 100vh;
    padding-right: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0; left: -60vw;
    z-index: 5;
    background: #0f141e;
    background: #1cb;
    background: #1cd;
    transform: skew(15deg);
    transform-origin: bottom left;
    transition: width .3s, left .3s, padding-left .3s;
    box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;
    overflow: hidden;
}
    .menu-left-side > *{
        transform: skew(-15deg);
    }

    .active.intro .menu-left-side{
        width: 90vw;
        left: 0;
    }

    .active.musics .menu-left-side{
        left: -20vw;
    }

    .active.options .menu-left-side{
        left: -5vw;
        padding-left: 5vw;
    }

    .active .menu-left-size{
        left: -5vw;
    }


.playing-logo{
    position: fixed;
    top: 0px;
    right: 0;
    z-index: 6;

    font-family: "Raleway";
    font-weight: 300;
    font-size: 24px;
    color: #333;
    transform: translate(200%, 24px);
    transition: transform .4s;
}

    .active.intro .playing-logo{
        transform: translate(-24px, 24px);
    }
    
    .playing-logo span{
        display: block;
        text-align: right;
        font-weight: 800;
        color: rgba(0,0,0,.32);
        font-size: 16px;
    }


.menu-title{
    font-family: "Montserrat";
    /*color: rgba(255,109,109,1);*/
    color: #FFF;
    text-align: right;
    text-align: left;
    margin-left: calc(10vw + 24px);
    transition: transform .4s, opacity .4s;
    position: relative;
    z-index: 8;
}
    .menu-title-wrapper{
        display: inline-block;
        text-align: center;
    }
    
    .menu-logo{
        font-size: 100px;
        font-weight: bold;
        transition: font-size .4s;
    }

    .menu-slogan{
        margin-top: -10px;
        margin-left: 24px;
        font-size: 40px;
        opacity: .7;
        transition: font-size .4s, margin-right .4s;
    }

    .menu-covid{
        display: flex;
        margin-top: 64px;
    }

        .menu-covid-img{
            margin-right: 32px;
            height: 96px;
        }

        .menu-covid-info{
            flex: 1;
        }

            .menu-covid-title{
                font-size: 24px;
                font-weight: bold;
            }

            .menu-covid-text{
                margin-top: 16px;
            }

        .menu-covid-logo{
            height: 52px;
        }


    .menu-controls{
        margin-top: 32px;
    }
        .menu-covid-subtitle{
            font-size: 16px;
            font-weight: bold;
        }

        .menu-buttons{
            display: flex;
            margin-top: 8px;
        }

            .menu-button{
                margin-right: 16px;
                padding: 14px 20px;
                border: 1px solid #ffffff;
                border-radius: 10px;
                cursor: pointer;
            }
            .menu-button i{
                margin-right: 8px;
            }

            .logged .menu-create-account{ display: none; }
            .logged .menu-enter{ display: none; }
            .menu-play{ display: none; }
            .logged .menu-play{ display: block; }

    .menu-start{
        display: none;
        opacity: 0;
        margin-top: 42px;
        margin-left: 0px;
        transition: opacity .4s, margin-left .4s;
    }
        .menu-start-item{
            display: inline-block;
            margin-right: 36px;
            font-size: 24px;
            text-transform: uppercase;
            cursor: pointer;
        }
            .menu-start-item:after{
                content:"";
                display: block;
                width: 0;
                height: 2px;
                background: rgba(255,255,255,.6);
                transform: translate(36px, 2px);
                transition: width .3s;
            }
            .menu-start-item:hover:after{
                width: calc(100% - 32px);
            }

            .menu-start-item i{
                width: 24px;
                display: inline-block;
                text-align: center;
                margin-right: 8px;
            }

    .active.musics .menu-title{
        transform: skew(-15deg) translateX(-100px);
        opacity: 0;
    }

    .active.intro .menu-logo{
        font-size: 140px;
    }
    .active.intro .menu-slogan{
        font-size: 54px;
    }

    .active.intro .menu-start{
        opacity: 1;
        margin-left: 42px;
    }

    .logged .menu-start{
        /* display: block; */
    }



/*======================================
    RIGHT SIDE
======================================*/
.menu-right-side{
    width: 55vw;
    height: 100vh;
    position: absolute;
    top: 0; left: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;

    font-family: "Raleway", serif;
    color: #0f141e;

    transition: width .4s, left .4s;
}

    .intro .menu-right-side{}

    .active.options .menu-right-side{
        width: 55vw;
        left: 45vw;
    }
    .active.musics .menu-right-side{
        width: 70vw;
        left: 30vw;
    }




.menu-selector{
    display: inline-block;
}
    .menu-selector-prev,
    .menu-selector-next{
        padding: 5px;
        display: inline-block;
        font-family: "FontAwesome";
        cursor: pointer;
    }
        .menu-selector-prev.off,
        .menu-selector-next.off{ opacity: .3; }
        .menu-selector-prev{ margin-right: 48px; }
        .menu-selector-next{ margin-left: 48px; }

    .menu-selector-itens{
        display: inline-block;
        text-align: center;
    }

    .menu-selector-item{
        display: none;
    }
        .menu-selector-item.selected{ display: block; }

    .menu-selector i{
        font-size: 16px;
        margin-top: -5px;
        margin-right: 16px;
    }



.menu-options{
    height: 100%;
    display: none;
    flex-direction: column;
    font-weight: 500;
    font-size: 32px;
    transition: opacity .25s;
    opacity: 0;
}
     
    .active.options .menu-options{
        opacity: 1;
        display: flex;
    }

    .menu-options-title{
        padding: 40px 0 40px 24px;
        font-weight: bold;
        font-size: 42px;
    }

    .menu-options-itens{
        flex: 1;
        overflow: auto;
    }

    .menu-options .menu-selector{
        margin-left: 32px;
        font-size: 24px;
        font-weight: bold;
        color: #e46161;
    }

    .menu-option{
        padding: 13px 0;
        font-weight: 100;
        margin-bottom: 8px;
    }

        .menu-option-performance i{ margin-left: 16px; opacity: .7; }

        .menu-link{
            color: inherit;
            cursor: pointer;
            text-decoration: none;
        }

        .menu-option-description{
            font-size: 14px;
            margin-top: 5px;
            margin-left: 8px;
        }


    .menu-options-bot{
        box-sizing: border-box;
        padding: 16px 0 32px 0;
    }
    .menu-next{
        float: right;
        margin-top: 40px;
        margin-right: 0;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
        transition: margin-right .4s;
    }
        .active .menu-next{
            margin-right: 64px;
        }



.background-circles {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 5vw;
    z-index: 6;
}



.loadscreen{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    background: #FFF;
    background: #F6F6F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: visibility 0s .7s, opacity .7s;
}
    .loadscreen.active{
        opacity: 1;
        visibility: visible;
        transition: visibility 0s, opacity 1s .25s;
    }

.loading.dark .loadscreen{
    background: #0f141e;
    color: #FFF;
}

    .loadword{
        font-family: "Raleway";
        margin-top: 64px;
        font-size: 32px;
        font-weight: 100;
    }

    .loadbars,
    .loadbars:after,
    .loadbars:before{
        content: "";
        display: inline-block;
        width: 20px;
        height: 50px;
        background: #e46161;
        position: relative;
        animation: scaling 1s infinite;
        box-shadow: -1px 1px 2px 3px rgba(0,0,0,.05) inset;
    }

    .loadbars{ animation-delay: 0s; }
    .loadbars:before{ margin-left: -35px; animation-delay: -.33s; }
    .loadbars:after{ left: 50px; animation-delay: .33s; }



    @keyframes scaling{
        0%{ transform: scale(1, 1); }
        50%{ transform: scale(1, 1.5); }
        100%{ transform: scale(1, 1); }
    }


.pre-play{
    width: 600px;
    height: 100vh;
    box-sizing: border-box;
    position: fixed;
    top: 0; right: -600px;
    z-index: 50;
    transition: transform .4s, visibility 0s .4s;
    visibility: hidden;
}
    .pre-play.open{
        transform: translateX(-600px);
        visibility: visible;
        transition: transform .4s, visibility 0s;
    }

    .pre-play-background{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: #FFF;
        box-shadow: -3px 0 5px rgba(0,0,0,.15);
        transform: skew(15deg);
        transform-origin: 0 0;
    }

    .pre-play-content{
        width: 100%;
        height: 100%;
        padding: 60px 80px;
        padding-right: 0;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
    }

        .pre-play-title{
            font-size: 32px;
            font-family: 'Montserrat';
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 32px;
        }

        .pre-play-configs{
            flex: 1;
        }

        .pre-play-modes, .pre-play-difs, .pre-play-controls{
            display: flex;
        }

        .pre-play-o-mode, .pre-play-o-dif, .pre-play-o-control{
            margin-top: 32px;
        }
        .pre-play-o-mode{ margin-left: 16px; }
        .pre-play-o-control{ margin-left: 48px; }
        .pre-play-o-dif{ margin-left: 80px; }

        .pre-play-mode, .pre-play-dif, .pre-play-control{
            margin: 4px;
            padding: 8px 16px;
            border: 1px solid rgba(0,0,0,.1);
            cursor: pointer;
        }
            .pre-play-mode.active, .pre-play-dif.active, .pre-play-control.active{
                background: rgb(18, 214, 239);
                color: #FFF;
            }

        .pre-play-play{
            display: flex;
            justify-content: flex-end;
            text-align: right;
            margin-right: 32px;
        }
            .pre-play-cancel{
                margin-right: 128px;
                cursor: pointer;
            }
            .pre-play-play .musics-play{
                margin: 0;
            }



.about, .donate{
    width: 100%;
    height: 100%;
    padding: 64px;
    box-sizing: border-box;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(0,0,0,.4);
}
.about.active,
.donate.active{
    display: flex;
}

    .about-wrapper{
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        background-color: #FFFFFF;
        overflow-y: auto;
        border-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .about-close,
    .donate-close{
        padding: 16px;
        font-size: 24px;
        cursor: pointer;
        float: right;
    }

    .about-title{
        font-size: 24px;
        margin: 0 32px;
        margin-top: 42px;
    }

    .about p,
    .donate p{
        padding: 0 32px;
    }
    .about a,
    .donate a{
        color: blue;
        cursor: pointer;
    }

    .about-people{
        margin: 0 32px;
        margin-bottom: 42px;
    }

    .professor{
        display: flex;
        margin-top: 16px;
        align-items: center;
    }
        .professor-img{
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
        }

        .professor-info{
            margin-left: 16px;
        }

            .professor-name{
                font-size: 18px;
            }
            .professor-from{
                font-size: 14px;
            }


    .donations{
        display: flex;
        padding: 24px 0;
        margin-top: 24px;
        margin-left: 32px;
    }
    .donations a{
        margin-right: 16px;
        text-decoration: none;
    }
        .donation{
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: initial;
        }

        .donation-icon{
            margin-bottom: 8px;
            font-size: 42px;
        }