@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Macondo&family=Open+Sans&family=Koulen&family=Akshar&family=Montserrat&family=Poppins&family=Source+Sans+Pro&family=Oswald&family=Raleway&family=Smooch&family=Ubuntu&family=Inter&family=Nunito&family=Titillium+Web&display=swap');

@media (orientation: landscape) {
    body{
        font-family: 'Nunito', sans-serif;
        font-size: 1.8vh;
        font-weight: 400;
        color: var(--font);
        background: var(--background2);
        cursor: default;
        position: relative;
        height: 100vh;
    }
    
    main{
        position: fixed;
        left: 280px;
        height: calc(100vh - 7vh);
        top: 6.5vh;
        width: calc(100% - 280px);
        background-color: var(--background2);
        transition: all 0.5s ease;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5vh 1vh;
        box-sizing: border-box;
    }
    
    main::-webkit-scrollbar{
        -webkit-appearance: none;
    }
    
    main::-webkit-scrollbar:vertical{
        width: 10px;
    }
    
    main::-webkit-scrollbar:horizontal{
        height: 10px;
    }
    
    main::-webkit-scrollbar-thumb{
        background-color: var(--font2);
        border-radius: 10px;
        border: 3px solid var(--background2);
    }
    
    main::-webkit-scrollbar-track{
        border-radius: 10px;
        background-color: rgba(255,255,255,0);
    }
    
    .main{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
    .main__background{
        position: fixed;
        left: 280px;
        height: calc(100vh - 7vh);
        top: 6.5vh;
        width: calc(100% - 280px);
        background-color: var(--background2);
        display: none;
        z-index: 9;
    }
    
    .tip{
        position: absolute;
        top: calc(100% + 0.5vh);
        background-color: var(--font);
        padding: 0;
        border-radius: 1vh;
        color: white;
        display: none;
        width: 9vh;
        font-size: 60%;
        text-transform: uppercase;
        left: calc(50% - 4.5vh);
        box-sizing: border-box;
        height: 2.5vh;
        line-height: 2.5vh;
        text-align: center;
    }
    
    footer{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .footer__logo{
        display: none;
        background-image: var(--logo);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 5vh;
        margin-bottom: 5vh;
    }
    
    .footer__background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--background);
        z-index: -1;
    }
    
    .footer__message{
        display: none;
        position: absolute;
        left: 5vh;
        top: calc(50% - 2vh);
        padding: 0 1vh;
        height: 4vh;
        background-color: var(--color);
        color: white;
        box-sizing: border-box;
        margin: 1.5vh 0;
        width: calc(100% - 10vh);
        line-height: 4vh;
        text-align: center;
        border-radius: 1vh;
    }
    
    .loading{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    
    .loading svg{
        width: 2.5vh;
        height: 2.5vh;
        display:inline-block;
    }
    
    .loading svg rect{
        fill: var(--color);
    }
    
    .background{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        opacity: 0.3;
        z-index: 9;
    }
    
    .background .loading{
        display: none;
        position: absolute;
        left: 280px;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: calc(100% - 280px);
        height: 100%;
    }
    
    .background .loading svg rect{
        fill: white;
    }

}

@media (orientation: portrait) {

    body{
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1.8vh;
        font-weight: 400;
        color: var(--font);
        background: var(--background2);
        cursor: default;
        position: relative;
        height: 100%;
    }

    main{
        position: fixed;
        left: 0;
        width: 100%;
        background-color: var(--background2);
        transition: all 0.5s ease;
        top: 7.25vh;
        height: calc(100% - 15.5vh);
        overflow: hidden;
    }

    .main{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 0.75vh;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .main__background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background2);
        display: none;
        z-index: 9;
    }

    footer{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 99;
    }
    
    .footer__logo{
        display: none;
        background-image: var(--logo);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 5vh;
        margin-bottom: 5vh;
    }
    
    .footer__background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--background);
        z-index: -1;
    }
    
    .footer__message{
        display: none;
        position: absolute;
        left: 5vh;
        top: calc(50% - 2vh);
        padding: 0 1vh;
        height: 4vh;
        background-color: var(--color);
        color: white;
        box-sizing: border-box;
        margin: 1.5vh 0;
        width: calc(100% - 10vh);
        line-height: 4vh;
        text-align: center;
        border-radius: 1vh;
    }

    .loading{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    
    .loading svg{
        width: 2.5vh;
        height: 2.5vh;
        display:inline-block;
    }
    
    .loading svg rect{
        fill: var(--color);
    }
    
    .background .loading svg rect{
        fill: white;
    }

    .background{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        opacity: 0.3;
        z-index: 10;
    }

}