#top{
    height: 10svh;
    width: 100%;
    display: flex;
    justify-content: left;
    background-color: wheat;
    line-height: 10svh;
}
#name{
    text-shadow: 3px 3px white;
    width: 20svw;
    font-size: 3svw;
    text-align: center;
}
#middle{
    height: 66svh ;
    display: flex;
    justify-content: center;
    width: 100%;

}
.swipebutton{
    width: 40vw;
    height: 100%;
}
#bottom{
    height: 21svh;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-color: yellow;
}
#card{
    width: 42.525svh;
    height: 59.4svh;
    background-color: tan;
    position: fixed;
    top : 12svh;
    left: 50vw;
    translate: -50%  0% ;
    border-radius: 5px;
}
#card *{
    margin: 10pt;
}
#cardname{
    background-color: lightgray ;
    @media screen and (orientation : portrait) {
        line-height: 80px;
        height: 80px;
        font-size: 72px;  
    }
    @media not (orientation : portrait){
        line-height: 40px;
        height: 40px;
        font-size: 30px;
    }
    
}
#cardtext{
    background-color: lightgray;
    @media screen and (orientation : portrait) {
        line-height: 68px;
        font-size: 64px;
    }
    @media not (orientation : portrait){
        line-height: 24px;
        font-size: 22px;
    }
}
#nav{
    width: 55svw;
    margin-left: 10pt;
    display: flex;
    justify-content: center;
}
#nav a{
    margin-left : 1.4svw;
    margin-right: 1.4svw;
    font-size: 3svw;
    line-height: 10svh;
    text-decoration: none;

}
#logo{
    width: 18svw;
    height: 18svw;
    
    position: fixed;
    translate: 0 0;
    left: 0vh;
    top : 0vh;
}

#deny{
    background-color: red;

}
#accept{
    background-color: green;
}
#fakelogo{
    width: 18svw;
}