@font-face{
    font-family: 'din';
    src: url('../assets/fonts/Roboto-Regular.ttf')
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: linear-gradient(to bottom right, #000000 10%, rgb(0, 0, 60));
    overflow: hidden;

    user-select: none;
}

#logo{
    background: linear-gradient(
        45deg,
        #0366cffc 0%,
        #0366cffc 42%,
        #b4d8fffc 50%, 
        /* #88c2fffc 50%,  */
        #0366cffc 58%,
        #0366cffc 100%
    );
    /* background-color: white; */
    mask-image: url("../assets/logos/1024.png");
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;

    background-size: 300% 300%;
    background-position: -125% 50%;

    animation: 6s linear infinite wave;

    

    height:100px;
    aspect-ratio: 1/1;
    position: fixed;
    
    left:25px;
    top:25px;
}
@keyframes wave{
    0%{
        background-position: 125% 50%;
    }
    50%{
        background-position: -25% 50%;
    }
    50.01%{
        background-position: 125% 50%;
    }
    100%{
        background-position: 125% 50%;
    }
}
/* #logo img{
    height:100px;
    aspect-ratio: 1/1;
    position: fixed;
    
    left:25px;
    top:25px;
}
#logo img{
    object-fit: contain;
    filter: brightness(0) invert(1);
} */

#instructions{
    font-size:30px;
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(0%,-50%);
    font-family: 'din';
    
}
#instructions ul{
    list-style: none;
}
#instructions li{
    color:white;
    padding-bottom: 15px;
    padding-top: 15px;
}
#instructions li:first-child{
    color: rgb(213, 190, 61)
}
#instructions li i{
    margin-right: 5px;
}
#qrcodeborder{
    position: absolute;
    left: 35%;
    top:50%;
    transform: translate(-50%,-50%);

    height:28vh;
    aspect-ratio: 1/1;
    object-fit: cover;   
    outline: 3px solid rgb(213, 190, 61);
    border-radius: 25px;
}
#qrcode{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);

    height:25vh;
    aspect-ratio: 1/1;
     
}
#qrcode img{
    object-fit: cover;  
}
#fullscreenBtn{
    position: fixed;
    width: 50px;
    height: 50px;

    right:0;
    bottom:0;
    margin: 25px;

    border-radius: 10px;
    outline: 1.5px solid white;

    transition: background-color .2s ease;

    cursor: pointer;
}
#fullscreenBtn .btn-text{
    color:white;
    position: absolute;
    left:50%;
    top:50%;

    transform: translate(-50%,-50%);
}
#fullscreenBtn[active='false']{
    background-color: #0256b0;
}
#fullscreenBtn[active='true']{
    background-color: #023369;
}
#fullscreenBtn:hover{
    background-color: #022953;
}
#fullscreenBtn:active{
    background-color: #011c38;
}
#appName{
    position: fixed;
    width: fit-content;
    height: fit-content;

    left: 10px;
    bottom: 10px;

    color: white;
    font-size: 17.5px;
    font-family: 'din';

    display: flex;
    flex-direction: row;
    gap:25px;
}
#appName span{
    position: relative;
    bottom: 10px;
    display: flex;
    align-items: end;
}
#appName i{
    font-size: 25px;
    margin-right: 2.5px;
}
#appName i.fa-google-play{
    font-size:20px;
    margin-right: 2.5px
}