/*
CSS file for general formatting rules that should apply to the whole document
i.e. 
background color
text formatting: font, font size, font color, text alignment
link formatting: link, visited link, hovered link
button formatting
navigation bar
*/

body{background-color: #FFFDFA; margin: 0}

header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}

#header-logo{
    width: 10%;
}

h1, h2, h3, h4, h5, h6{
    color: #393F4A;
    font-family: "DM Sans", Tahoma, Geneva, Verdana, sans-serif;
}

p{
    color: #393F4A;
    font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14pt;
}

p a, p a:active, p a:visited{
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}

p a:hover{
    color: #FF7A82;
    text-decoration: underline;
}

a.button:link, a.button:visited{
    color: #FFFDFA;
    font-family: "DM Sans", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background-color: #358285;
    padding: 10px 30px; 
    border-radius: 5px;
}

a.button:hover{background-color: #2D6E70;}

nav{
    width: 100%;
    height: auto;
    background-color: #DFF3FF;
    font-family: DM Sans, Tahoma, Geneva, Verdana, sans-serif;
    float: left;
    margin-top: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

nav img.hidden{
    display: none;
}

nav img#logo{
    float: left;
    clear: right;
    margin: 10px;
    max-height: 36px;
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav.centered-nav{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

nav li, .dropdown-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    float: right;
}

nav li.dropdown{
    display: inline-block;
}

nav a{
    background-color: #DFF3FF;
    display: block;
    padding: 15px 25px;
    color: #393F4A;
    font-size: 14pt;
    text-decoration: none;
}

nav a:hover, .dropdown:hover .dropbtn{background-color: #C8DAE6;}

.dropdown-content a:hover, .submenu:hover .dropdown-subheading{border-left: 2px solid #4BB9BD;}

nav a.current{text-decoration: underline #4BB9BD 2px;}

nav a.final-link{margin-right: 50px;}

.dropdown{
    position: relative;
    float: right;
}

.dropdown-content{
    display: none;
    position: absolute;
    top: 56px;
    background-color: #DFF3FF;
    min-width: 250px;
    padding: 10px;
}

.dropdown-content > li{
    justify-content: left;
    float: left;
    width: 250px;
}

li.submenu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: none;
    align-items: start;
}

.dropdown-content a, .dropdown-subheading{
    display: block;
    width: 100%;
    padding: 10px;
    color: #393F4A;
    font-size: 14pt;
    text-decoration: none;
}

.article-list a{
    font-size: 12pt;
    margin-left: 20px;
    padding: 5px 10px;
    width: 210px;
}

.icon{
    display: none;
}

.dropdown:hover .dropdown-content{display: block;}

footer > div{
    background-color: #ffefe0; 
    color: #393F4A; 
    padding: 40px;
}

.contact-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.contact-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    width: 30%;
}

.main-override h1{
    font-size: 30pt !important;
    color: #393F4A !important;
}

.main-override p{
    font-size: 14pt !important;
    color: #393F4A !important;
}

#backToTopButton {
    display: none; 
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #4bb9bd;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#backToTopButton:hover {
    background-color: #246365;
}

/* specifying behaviour when on phone size screen */

@media screen and (max-width: 600px){
    /* nav */
    #menu-icon, .icon-container a{
        display: inline-block;
        height: 30px;
    }

    .icon-container{
        background-color: #DFF3FF;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    #home-icon{
        display: inline-block;
        height: 100%;
    }

    #home-icon:hover{
        background-color: #C8DAE6;
    }

    #header-logo{
        width: 40%;
    }

    nav *{
        display: none;
    }

    #menu-icon:hover{
        background-color: #C8DAE6;
        cursor: pointer;
    }

    nav.collapsed-nav{
        margin-bottom: 50px;
        top: 50px;
    }

    nav.collapsed-nav, nav.collapsed-nav ul{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    nav.collapsed-nav *{
        display: block;
    }

    nav.collapsed-nav #logo, nav.collapsed-nav .dropdown-content{
        display: none !important;
    }

    nav.collapsed-nav li{
        width: 80%;
        height: auto;
        float: none;
    }

    nav.collapsed-nav a{
        width: 80%;
        text-align: center;
    }

    nav.collapsed-nav a.final-link{
        margin-right: auto;
    }

    /* footer */
    .contact-box{
        width: 100%;
    }

    .contact-row{
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
}