@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@font-face {
    font-family: 'ASL';
    src: url('asl.eot'),
         url('asl.ttf') format('truetype'),
         url('asl.woff') format('woff');
}
html{
    height:100%;
}
body{
    margin:0px;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:start;
    font-family: "Red Hat Display";
    background-color: rgba(0,17,34,255);
    overflow:hidden;
}
p{
    margin:0px;
}
div{
    display:flex;
    margin:0px;
}
button{
    display:flex;
    margin:0px;
}
.row{
    flex-direction:row;
}
.col{
    flex-direction:column;
}
#bigWrapper{
    width:100%;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:100%;
    transition: 0.75s ease;
    background: url(background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#wrapper{
    width:100%;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:100%;
    opacity:0;
    transform: translateY(-100vh);
    transition: 1.5s ease;
}
#corner{
    z-index:1;
    width:90px;
    position:fixed;
    right:0;
    bottom:0;
    margin:10px;
}
#appName{
    margin:10px 10px;
    font-size:45px;
    font-weight:900;
    color:rgb(236, 236, 236);
}
#appDesc{
    margin:20px 10px 0px 10px;
    font-size:24px;
    font-weight:600;
    color:rgb(236, 236, 236);
}
#button{
    padding:10px;
    text-align:center;
    justify-content:center;
    font-family: "Red Hat Display";
    width:80%;
    margin:50px 0px 0px 0px;
    font-size:20px;
    font-weight:bold;
    color:rgb(252, 255, 209);
    background: rgb(78,78,78);
    background: linear-gradient(135deg, rgba(78,78,78,1) 0%, rgba(40,40,40,1) 100%);
    border:none;
    border-radius:20px;
}
#logo{
    width:300px;
    margin:10px;
}
#page2{
    align-items:center;
    background-color:rgba(0,17,34,255);
    height:100%;
    width:100%;
}
#frame{
    background-color: white;
    height:60%;
    width:100%;
}
#slider{
    width:75%;
    margin:15px;
    color:black;
}
#labels{
    width:75%;
    align-items:center;
    justify-content:space-between;
}
.label{
    color:rgb(236, 236, 236);
    font-size:16px;
}
#subtitle{
    background-color:rgba(0,17,34,255);
/* border-top: solid rgb(252, 255, 209) 4px;  */
    border-bottom: solid rgb(252, 255, 209) 2px;
    height:15%;
    font-size:18px;
    padding:10px 10px;
    width:90%;
    color:rgb(252, 255, 209);
    text-align:center;
    justify-content:center;
    overflow:scroll;
}
#ref{
    font-size:24px;
    color:rgb(252, 255, 209);
    padding: 10px 0px;
}
#left{
    align-items:start;
    padding-bottom:10px;
}
#right{
    align-items:start;
    padding-top:10px;
}
.a{
    font-family: 'ASL';
    color: rgb(252, 255, 209);
    font-size: 60px;
}
.e{
    font-family: 'Red Hat Display';
    font-weight:600;
    color: rgb(252, 255, 209);
    padding:12.4px 0px;
    font-size: 32px;
}
#dictionary{
    background-color:rgba(0,17,34,255);
    height:25%;
    width:50%;
    justify-content:space-evenly;
    align-items:start;
    
    overflow:scroll;
}
.hidden{
    opacity:0;
}