#start-screen{
    display: flex; 
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem; 
    width: 100%;
    height: 100%; 
    min-height: 100vh; 
    box-sizing: border-box; 
    gap: 3rem; 
}

#start-screen h1{
    text-align: center; 
    color: black; 
    font-size: 4rem; 
}

#start-screen #intro{
    width:50vw; 
    font-size:1.5rem; 
}

#start-screen #preface{
    font-size:1rem; 
    width:40vw; 
}

#start-screen p{
    max-width: 80vw; 
    text-align: center; 
    font-size: 1.3rem;
    margin-bottom:0rem;   
    color: black; 
}


/*
.results-box{
    font-size:3.5rem;  
    color:black; 
}*/

.popup{
    position: fixed; 
    top:20vh; 
    left:50%; 
    transform: translateX(-50%);

    background-color:white; 
    display: flex;
    flex-direction:column;  
    align-items: center; 
    justify-content: center; 
    z-index: 1000; 
    border-radius:12%;
    border: 0.1rem solid black;


    padding: 1rem; 
}

#popup-message{
    /*background-color:rgb(255, 255, 255); */
    font-size:1.2rem; 
}

#okay-button{
    text-align:center; 
}

/*Button stuff - tried to get a custom printed button*/
/*.choices input{
    display: none; 
}

.choices .custom{
    width:1rem;
    height:1rem; 

    border: 0.1rem solid black; 
    border-radius:50%; 
    display:inline-block; 
    vertical-align:middle; 
    margin:1rem; 

    position:relative; 
}

.choices input:checked + .custom::after{
    content:'';
    position:absolute;
    background-color:rgb(118, 215, 248);
    transform:translate(-50%,-50%);

    width:1rem;
    height:1rem; 

    border: 0.1rem solid black; 
    border-radius:50%; 

}*/


.hidden{
    display:none; 
    animation: fadeOut 0.8s;
}

@keyFrames fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
@keyframes fadeOut{
    from{opacity:1;}
    to{opacity:0;}
}