@font-face {
    font-family: 'Dongle';
    src: url('/Dongle-Regular.ttf') format('truetype'); /* Assuming the font file is named Dongle.ttf */
}

html, body {margin: 0; height: 100%; overflow: hidden}

h1{
    font-size: 50px;

    font-family: 'Dongle', sans-serif;

    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.app{
    height: 100vh;
}

p{
    margin-right: 7vw;
    font-family: sans-serif;
}

select{
    border-width: 0px;
    background-color: white;

    border-bottom: 1px solid;
}

#welcometext{
    font-size: 66px;
    padding: 6vw;
}

#h2logo{
    font-size: 20px;

    font-family: 'Dongle', sans-serif;

    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

    transform: translateY(-25px);
    
}

.loadingscreen{
    position: fixed;

    background-color: white;
    z-index: 99;
    width: 100vw;
    animation: dissolve 1s forwards;
    animation-delay: 5s;
    height: 100%;
}

.statsscreen{
    position: fixed;

    background-color: white;
    z-index: 98;
    width: 100vw;
    height: 100vh;
}

.usablescreen{
    margin: 5vh;
}

.top{
    top: 0;
}

.close{
    position: fixed;
    top: 20px;
    left: 20px;
}

.hideclose{
    top: -5555px;
}

.loadingscreentext{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;

    animation: dissolve 1s forwards;
    animation-delay: 4.2s;
}

.rowwrapper{
    display: flex;
    flex-direction: row;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigbubble{
    width: 80vw;
    height: 12vh;
    border: 1px solid black;
    border-radius: 15px;
}

.fullscreen{
    width: 100vw;
    position: absolute;
    left: 0;
}

.infopill{
    display: flex;
    flex-direction: column;
    margin: 10.5px;
}

.pilltitle{
    margin: 0px;
    font-size: 13.7px;
}

.pilldivider{
    height: 8vh;
    width: 1px;
    background-color: black;
}

#totaltests{
    margin: 15px 0px 0px 0px;
}

#Ao5{
    margin: 15px 0px 0px 0px;
}

#Ao12{
    margin: 15px 0px 0px 0px;
}

#header{
    display: flex;
    flex-direction: column;
    height: 25vh;
    margin-left: 10px;
    margin-top: 15px;
}

.center{
    align-self: center;
}

.right{
    justify-self: end;
}

#reactionarea{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 73vh;
}

.coloredorbe{
  /*Creating the point*/
  opacity: 30%;
  width: 45px;
  height: 45px;
  border-color: gray;
  border-width: 2px;
  border-radius: 50%;
  border-style: solid;
 
}

.colorfill{
  /*Creating the point*/
  position: absolute;
  opacity: 50%; 
  width: 17px;
  height: 17px;
  background-color: gray;
  border-radius: 50%;
}

.expand{
    animation-name: expand;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.ascend{
    animation-name: ascend;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.enterfullscreen{
    animation-name: enterfullscreen;
    animation-duration: 0.22s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.thin{
    animation-name: thin;
    animation-duration: 0.24s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.fullyexpand{
    animation-name: fullyexpand;
    animation-delay: 0.15s;
    animation-duration: 0.24s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.shrink{
    animation-name: shrink;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.exitfullscreen{
    animation-name: exitfullscreen;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.descend{
    animation-name: descend;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.unthin{
    animation-name: unthin;
    animation-duration: 0.2s;
    animation-delay: 450ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.orange{
    background-color: rgb(255, 182, 46);
    height: 150vh;
    width: 150vh;
}

@keyframes expand {
  70%{
    width: 46px;
    height: 46px;
  }
}

#type{
    height: 25px;
}


@keyframes dissolve {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        z-index: -99;
        transform: translateY(0vh);
    }
    75%{
        opacity: 0;
        z-index: -99;
        transform: translateY(0vh);
    }
    100%{
        opacity: 0;
        z-index: -99;
        transform: translateY(-150vh);
    }
}

@keyframes ascend {
    100%{
        transform: translateY(-27vh);
    }
}

@keyframes descend {
    0%{
        transform: translateY(-27vh);
    }
    100%{
        transform: translateY(0vh);
    }
}

@keyframes enterfullscreen {
    100%{
        height: 99vh;
        transform: translateY(-25vh);
    }
}

@keyframes exitfullscreen {
    0%{
        height: 99vh;
        transform: translateY(-25vh);
    }
    100%{
        height: 73vh;
    }
}

@keyframes thin {
    100%{
        border-width: 0px;
    }
}

@keyframes fullyexpand {
    100%{
        height: 150vh;
        width: 150vh;
        background-color: aqua;
    }    
}

@keyframes shrink {
    0%{
        height: 150vh;
        width: 150vh;
    }
    100%{
        height: 17px;
        width: 17px;
    }
}

@keyframes unthin {
    0%{
        border-width: 0px;
    }
    100%{
        border-width: 2px;
    }
}