@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Lobster&family=Roboto+Slab:wght@200;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Slab:wght@200;800&display=swap');

.symbol{
    display: flex;
    position: absolute;
    top: 10vh;
    
}

.symbol img{
    width: 28vw;
    margin: 0 39vw;
}

.box{
    height: 50vh;
    width: 24vw;
    border-style: solid;
    border-color: white;
    display: flex;
    position: absolute;
    /* top: 12vw; */
    margin: -62vh 39vw;
    padding: 0 0 0 2vw;
}

.headtext{
    margin: 15px 0 0 20px;
    font-family: 'Bree Serif', serif;
    font-family: 'Lobster', cursive;
    font-family: 'Roboto Slab', serif;
    font-size: 35px;
    font-weight: bolder;
}

.user{
    display: flex;
    position: absolute;
    top: 10vh;
    margin: 2vh 0 0 1.5vw;
    font-family: 'Roboto Slab', serif;
}

.user input{
    display: flex;
    width: 15vw;
    margin: 0 2vw 0 0;
}

.passwd{
    display: flex;
    position: absolute;
    top: 18vh;
    margin: 2vh 0 0 1.5vw;
    font-family: 'Roboto Slab', serif;
}

.passwd input{
    display: flex;
    width: 13.75vw;
    margin: 0 2vw 0 0;
}

.signin{
    display: flex;
    position: absolute;
    top: 26vh;
    left: 10vw;
    width: calc(130px / 5vw);
    height: calc(130px / 5vw);
    font-family: 'Roboto Slab', serif;
}

.signin:hover{
    position: absolute;
    top: 26vh;
    left: 10vw;
    width: 3.9vw;
    height: 4.3vh;
}

.reglogin{
    display: flex;
    position: absolute;
    top: 35vh;
    left: 5vw;
    font-family: 'Roboto Slab', serif;
}

.registernow{
    background-color: rgb(191, 51, 226);
    color: white;
    display: flex;
    position: absolute;
    top: 40vh;
    left: 7vw;
    border-radius: 5px;
    width: calc(130px / 5vw);
    height: calc(130px / 5vw);
    font-size: 15px;
    font-weight: bolder;
}

.registernow:hover{
    width: calc(130px / 4.5vw);
    height: calc(130px / 4.5vw);
    font-size: 16px;
    font-weight: bolder;

}

@media only screen and (max-width: 1032px) {
    .box{
        height: 50vh;
        width: 26.7vw;
        border-style: solid;
        border-color: white;
        display: flex;
        position: absolute;
        /* top: 12vw; */
        margin: -62vh 39vw;
    }
}


@media only screen and (max-width: 768px) {

    symbol{
        display: flex;
        position: absolute;
        top: 10vh;
        
    }
    
    .symbol img{
        width: 28vw;
        margin: 0 39vw;
    }
    
    .box{
        height: 50vh;
        width: 30.7vw;
        border-style: solid;
        border-color: white;
        display: flex;
        position: absolute;
        /* top: 12vw; */
        margin: -62vh 39vw;
    }

    .user{
        display: flex;
        position: absolute;
        top: 10vh;
        margin: 2vh 0 0 1.5vw;
        font-family: 'Roboto Slab', serif;
    }

    .user input{
        display: flex;
        width: 15vw;
    }
    
    .passwd{
        display: flex;
        position: absolute;
        top: 18vh;
        margin: 2vh 0 0 1.5vw;
        font-family: 'Roboto Slab', serif;
    }
    
    .passwd input{
        display: flex;
        width: 13.75vw;
    }

}