/* SEMANTIC ELEMENTS */
    /* Layout */
    body{
        font-family: "Lexend", serif;
        font-size:20pt;
        
        width:1500px;
        max-width:100%;
        overflow-x:hidden;
        margin:auto;
        
        background-color:#99c1f1;
    }
    
    section{
        display:flex;
        justify-content:space-around;
    }
    
    /* Text */
    h1{
        text-align:center;
    }

    /* Form attributes */
    button{
        margin:auto;
    }

    input{
        margin-bottom:20px; 
        font-size:100%; 
        width:99%;
    }
    
    select{
        font-size:100%;
    }
    
    button{
        background-color:#133089;
        border:none;
        border-radius:10px;
        padding:10px;
        margin:auto;
        color:white;
        font-size:18pt;
        display:block;
        margin-top:10px;
        
        cursor:grab;
    }

    
#question{
    text-align:center;
    font-size:3em;
    justify-content:center;
}


.card{
    display:grid;
    justify-content:center;
    padding:20px;
    margin-top:20px;
    margin:5px;
    border:2px solid black;
    border-radius:10px;
    text-align:center;
    width:250px;
    background-color:white;
}

.card:hover{background-color:lightgrey;}

/* formStyle is no longer in use */

.formStyle2{
    max-width:1000px;
    margin:10px auto 10px auto;
    background-color:white;
    border:2px solid black;
    border-radius:10px;
    padding:10px;
}

.glossary{
    cursor:help;
    text-decoration:underline dashed;
}

.definition{
    z-index:1;
    border:2px solid black;

    background-color:white;
    display:none;
    font-size:18pt;
    padding:10px;
    max-width:400px;
}

.definitionPic{
    max-width:90%;
    width:200px;
}


/* Rubbish, isn't it? */
.buttonStyle{
    background-color:#133089;
    border:none;
    border-radius:10px;
    padding:10px;
    margin:auto;
    color:white;
    font-size:18pt;
    display:block;
    margin-top:10px;
    cursor:grab;
}

@media only screen and (max-width: 400px){
    .definition{
        flex-direction:column;
    }
}


@media only screen and (max-width: 1000px) {
    section {flex-direction:column;}
    #question{font-size:1.5em;}
            
    .card{
        width:70vw;
        margin-left:auto;
        margin-right:auto;
    }
    
    .formStyle{margin-top:10px;}
}

.folder {
    width: 16rem;
    height: 16rem;
    margin: 0 auto;
    margin-top: 3.125rem; /* 50px / 16 */
    position: relative;
    background-color: #FFD86C;
    border-radius: 0 0.375rem 0.375rem 0.375rem; /* 6px / 16 */
    color: black;
    text-align: center;
    display: block;
}

.folder:before {
    content: '';
    width: 50%;
    height: 2rem; /* 12px / 16 */
    border-radius: 0 1.25rem 0 0; /* 20px / 16 */
    background-color: #FFD86C;
    position: absolute;
    top: -0.75rem; /* -12px / 16 */
    left: 0px;
}
            
.folder:hover{
    text-decoration:underline;
}

.folder img{
    margin-top:20px;
    height:40%;
}
    
section img{
    max-width:50%;
    margin:auto;
}
 
.slideshow-container{
    position:relative;
    margin: auto;
}

.slide{
    display:none;
    border:3px solid black;
    border-radius: 10px;
    min-height:80vh;
    background-color:white;
    
    width:100%;
    max-width:1000px;
}

.slide img{
    padding: 10px;
    margin: auto; /* should work? no? */
    max-width: 80%;
    max-height: 400px;
    object-fit: cover;
}

.prev, .next {
    cursor: pointer;
    font-weight: bold;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}        

.backButton{
    color:#3F3F3F;
    text-decoration:none;
}

.responsive{
    display:flex;
    flex-wrap:wrap;
}

.desktopOnly{
    display:inline;
}

@media only screen and (max-width: 800px) {
    .folder{
        width:90%;
    }   
    
    .responsive{
        flex-direction:column;
    }
    
    .desktopOnly{
        display:none;
    }
    
    #create, #explore, #home, #folders, #account{
        border-top:none;
        border-left:none;
        border-right:none;
    }
}

@media print {
    nav, .prev, .next, button{
        display:none !important;
    }
    
    .slideshow{
        display:block !important;
    }
    
    .slide{
        display:block !important;
        margin-left:20px;
        margin-right:20px;
        width:100% !important;

        padding-left:10px;
        padding-right:10px;
    }
    
}