/* SEMANTIC ELEMENTS */
    /* Layout */
        main{
            min-height:68vh;
        }
    
        body{
            font-family: "Lexend", serif;
            font-size:20pt;
            
            width:1500px;
            max-width:100%;
            overflow-x:hidden;
            margin:auto;
            
            background-color:#99c1f1;
            line-height:1.5;
            word-spacing:0.16;
            letter-spacing: 0.12;
        }
        
        section{
            display:flex;
            justify-content:space-around;
        }
        
        section, form, article{
            max-width:1000px;
            margin:10px auto 10px auto;
            background-color:white;
            border:2px solid black;
            border-radius:10px;
            padding:10px;
            
        }
        
        /* Focus indicator */
        *:focus {
        	/* inner indicator */
        	outline: 2px solid white;
        	outline-offset: -5px;
        	
        	/* outer indicator */
        	box-shadow: 0 0 0 4px #193146;
        }
        
        .mainNav a:focus{
            outline:2px solid black;
            outline-offset:-5px;
        }
        
        a:focus, .glossary:focus{
            outline-offset:0;
        }
        
        
    
    /* Text */
        h1{
            text-align:center;
        }

    /* Form attributes */
        input{
            margin-bottom:20px; 
            font-size:100%; 
        }
        
        select{
            font-size:100%;
        }
        
        button{
            background-color:#133089;
            border:2px solid black;
            border-radius:10px;
            padding:10px;
            margin:auto;
            color:white;
            font-size:18pt;
            display:block;
            margin-top:10px;
            
            cursor:grab;
        }
    
/* CLASSES */
    /* General */
    .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;
    }
    
    .buttonStyle{
        background-color:#133089;
        border:2px solid black;
        border-radius:10px;
        padding:10px;
        margin:auto;
        color:white;
        font-size:18pt;
        display:block;
        margin-top:10px;
        cursor:grab;
    }
    
    .redButton{
        background-color:#7F0707;
    }
    
    .notice{
        font-size:30pt;
        text-align:center;
        padding:20vh;
    }


    /* Glossary */
    .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:30rem;
        
        position:absolute;
    }

    .definitionPic{
        max-width:90%;
        width:200px;
    }
    
    /* colour mode */
    .colour-mode{
        background-color:#c1d6f2;
    }
    
    .colour-mode nav, .colour-mode button, .colour-mode .buttonStyle{
        background-color:#425389;
    }
    
    .colour-mode img{
        filter:saturate(50%);
    }
    
    .colour-mode .redButton{
        background-color:#7f3f3f;
    }
    
    .colour-mode a:link{ /* unvisited links */
      color: #4949a3;
    }
    
    .colour-mode nav a:link{
        color:white;
    }
    
    .colour-mode .mainNav a{
        color:black;
    }
    

section img{
    max-width:50%;
    margin:auto;
}
 
.backButton{
    color:#3F3F3F;
    text-decoration:none;
}

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

.desktopOnly{
    display:inline;
}

/* MEDIA QUERIES */
@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;}
}

@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 only screen and (max-width: 400px){
    .definition{
        flex-direction:column;
    }
}

@media print {
    nav, .prev, .next, button{
        display:none !important;
    }
    
    .slideshow{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
    }
    
    .slide{
        display:flex !important;
        min-height:0px;
        
        margin:auto;
        margin-bottom:50px;
        max-width:90%;
        padding:10px;
        
        break-inside: avoid;
        page-break-inside: avoid; /* For older browsers */
        
        background-color:#c1f9a4; /* for users who find it difficult to read black on white. Only works if "print backgrounds" is selected. */
        /* I've seen other people use light green, but I'm not sure if it works best for the most people. */
        /* That's what the HTML highway is for! But its still not good. */
    }
    
    body{
        background-color: unset !important;
        overflow-x:visible !important;
    }

    
}