/*As of May 20, 2025, dark mode will now be determined by browser*/
body {
    margin:0;
}
img{
    max-width: 100%;
    height: auto;
}
.navbar{
    overflow: auto;
    display: flex;
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}
.navbar a{
    float: left;
    text-align: center;
    padding: 12px 14px;
    font-size: 16px;
}
/*The @media for this is at the bottom*/
.navbar a:link, .darkmode .navbar a:link{
    color: white;
    background-color: black;
}
.navbar a:hover, .darkmode .navbar a:hover{
    text-decoration: none;
    background-color: lightgray;
    color: black;
}
.navbar a.active, .darkmode .navbar a:active{
    font-weight: bold;
    text-decoration: none;
}
.navbar a:link, .navbar a:visited, .darkmode .navbar a:visited, .darkmode .navbar a:link{
    color: white;
    text-decoration: none;
}
.main{
    padding: 16px;
    margin-top: 30px;
}
.centre h1, .centre p, .centre h2, .centre h3, .centre h4, .centre h5, .centre h6, .centre a{
    text-align: center;
}
/*When browser is set to dark mode*/
@media (prefers-color-scheme: dark){
    body{
        background-color: #202020;
    }
    h1,h2,h3,h4,h5,h6,figcaption,p,.tab p, .tab a{
        color: white;
    }
    a:link, a:hover, a:visited, a:active{
        color: #89c6e3
    }
    .darkmode{
        background-color: white;
    }  
    .darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6, .darkmode figcaption, .darkmode p{
        color: black;
    }
    .darkmode a:hover, .darkmode a:link, .darkmode a:active, .darkmode a:visited, .darkmode .tab a, .darkmode .tab p{
        color: #000099
    }
    .navbar .darkmode a, .navbar .darkmode a:link, .navbar .darkmode a:active, .navbar .darkmode a:visited{
        color: white;
    }
    .navbar .darkmode a:hover{
        color:black;
    }
    
}
/*When browser is set to light mode*/
@media (prefers-color-scheme: light) {
    body{
        background-color: white;
    }
    a:link, a:visited{
        color: #000099;
        background-color: transparent;
        text-decoration: underline;
    }
    a.hover{
        color: #000099;
        background-color: transparent;
        text-decoration: underline;
        font-weight: bold;
    }
    h1,h2,h3,h4,h5,h6,figcaption,p,.tab p, .tab a{
        color: black;
    }
    .darkmode{
        background-color: #202020;
        color:white;
    }
    .darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6, .darkmode figcaption, .darkmode p{
        color: white;
    }
    .darkmode a:hover, .darkmode a:link, .darkmode a:visited, .darkmode .tab p, .darkmode .tab a{
        color: #89c6e3
    }
    .navbar .darkmode a{
        color: white;
    }
    .navbar .darkmode a:hover{
        color:black;
    }
}
@media only screen and (max-width: 800px){
    /*For features unsupported on mobile*/
    .desktop{
        display: none;
    }
    .column1{
        width: 100%;
        padding: 0px;
    }
    /*unsure about what width should be here*/
    .column2{
        /*The below centres images on mobile*/
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*The above centres images on mobile*/
        float: none;
        width: 66%;
        padding: 0px;
    }
    .column3{
        /*The below centres images on mobile*/
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*The above centres images on mobile*/
        float: none;
        width: 50%;
        padding: 0px;
    }
    .gallery1{
        float: left;
        width: 35%;
        padding: 0px;
    }
    .gallery2{
        float: left;
        width: 55%;
        padding: 0px;
    }
    .gallery3{
        /*The below centres images on mobile*/
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*The above centres images on mobile*/
        float: none;
        width: 66%;
        padding: 0px;
    }
    /* to be developed further. Goal is to have a menu that only appears on click
    .navbar {
        flex-direction: column;
        float: right;
        width: 26%;
    }*/
    .r::after {
    content: "";
    clear: both;
    display: table;
}
}
@media only screen and (min-width: 801px){
    .column1{
        float: right;
        width: 74%;
        padding: 0px;
    }
    .column2 {
        float: right;
        width: 26%;
        padding: 0px;
    }
    .column3{
        float: right;
        width: 20%;
        padding: 0px;
    }
    .gallery1{
        float: left;
        width: 20%;
        padding: 0px;
    }
    .gallery2{
        float: left;
        width: 30%;
        padding: 0px;
    }
    .gallery3{
        float: left;
        width: 42%;
        padding: 0px;
    }
}
img.clear, h1.clear, h2.clear, h3.clear, h4.clear, h5.clear, h6.clear, p.clear, a.clear{
    clear: both;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
a{
    font-family: Helvetica;
    font-size: "100%";
}
h1,h2,h3,h4,h5,h6,figcaption{
    font-family: Helvetica;
    font-size: "100%";
}
p{
    font-family: Helvetica;
    font-size: "100%";
}
.tab{
    font-size: "100%";
    font-family: Helvetica;
    margin-left: 40px;
}