:root {
    /* --base-clr: #050505; */
    --base-clr: cream;
    /* --text-clr: lightgrey; */
    --text-clr: black;
    --heading-clr: #160505;
    --newsbar-clr: rgba(32, 98, 179, 0.57);
    --newsbar-clr-dark: rgba(11, 33, 61, 0.57);

    --line-clr: #42434a;
    --hover-clr: #5e63ff4f;
    --hover-100per-clr: #3237d7;
    --hover-text-clr: #42446a;
    
    --accent-clr: #ebbd4a;
    --secondary-text-clr: white;

    --debug-clr: green;
    
    --maintext-h1-size: clamp(12px, 6vh, 45px);
    --maintext-h2-size: clamp(10px, 3.5vh, 36px);
    --maintext-footnote-size: clamp(10px, 2.5vh, 20px);
    --maintext-p-size: clamp(10px, 2vh, 20px);

    /* --h1-font-size: 60px; */
    --site-indent: 4vw;
    --site-spacingpara: 2.5vh;
    --site-spacing_top: 4vh;
    --site-spacing_bot: 2vh;

    --site-margin: 4vw;
    --site-max-width: 92vw;
}

/* applies to all */
* {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
    /* background-color: whitesmoke;   */
}

html {
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    color: black;
    max-width: 100%;
    display: grid;
    /* background-color: lightpink; */
    /* border: black 10px solid; */

    /* grid-area settings*/
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

}

body h1{
    /* color:green; */
    font-size: var(--maintext-h1-size);
    font-weight: 1200;
    padding-bottom: var(--site-spacingpara);
}
body h2 {
    font-size: var(--maintext-h2-size);
    padding-bottom: var(--site-spacingpara);
}
body p,ul,li {
    font-size: var(--maintext-p-size);
    padding-bottom: var(--site-spacingpara);
}

.flex-container {
    display: flex;
    flex-direction: row;
    /* font-size: 30px; */
    text-align: left;
}
.flex-item {
    /* background-color: #f1f1f1; */
    padding: 10px;
    flex: 50%;
    
}
.center-container {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    text-align: left;
    background-color: var(--newsbar-clr);
    padding: 2vw;
    border: black 1px solid;
    font-weight: 800;
    p {
        font-size: larger;
    }
}
img {
    padding-top: 10px;
    width: 40vw;
    border: black 1px solid;
}
img.logo {
    width: 30vw;
    border: None;
}
ul {
    text-align: left;
    list-style-position: inside;

}
.icontitle {
    display: flex;
    /* justify-content: space-around; */
    gap: 15px;
    div {
        padding: 0px;
        i {
            padding-top: 7.5px;
        }
    }

}
.https {
    font-weight: 800;
    color:#580b0b;
    text-decoration: None;
}

.contactlink {
    font-weight: 800;
    text-shadow: 1px 1px var(--newsbar-clr);
}

/**********************************************************************/
/*                     HEADER                                         */
/**********************************************************************/

header {
    grid-area: header;

    width: 100%;
    /* border: dashed 5px red; */
    border-bottom: 2px solid black;
    /* padding: 1vh 1vw; */

    div#newsbar{
        height: 1vh;
        border-bottom: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }
    div#newsbarbot {
        height: 1vh;
        border-top: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }
    .topnav{
        overflow: hidden;
        background-color:var(--base-clr);
        display: flex;

        align-items: center;
    }
    .topnav img#logo {
        float: left;
        padding: 2vh 2vw;
        padding-left: var(--site-margin);
    }
    .topnav a {
        
        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: black;
        text-align: center;
        padding: 0 1vw;
        text-decoration: none;
        /* font-size: calc(1.25*var(--maintext-font-size)); */
        line-height: 1;
        height: 60px;
        max-width: 150px;
    }
    .topnav a:hover {
        background-color: #ddd;
        color: black;
        img{
            background-color:#ddd;
        }
    }

    .topnav a.active {
        background-color: var(--newsbar-clr);
        color: white;
        /* img{
            background-color: blue;
        } */
    }

    .topnav .icon {
        display: none;
    }

    
}



/**********************************************************************/
/*                     FOOTER                                         */
/**********************************************************************/

footer {
    grid-area: footer;
    padding-top: min(10px, 2%);
    text-align: center;
    line-height: 1.5;
    font-size: var(--maintext-footnote-size);
    
    div.iconrow {
        display: flex;
        align-items: center;
        justify-content: center;
        
        a{
            padding-inline: 8px;
        }
        img {border: None;}

    }
    p {
        padding:0;
    }
}

/**********************************************************************/
/*                     MAIN                                         */
/**********************************************************************/

main {
    grid-area: main;
    margin: var(--site-margin);
    margin-top: calc(var(--site-margin)/2.0);
    max-width: var(--site-max-width);
    /* border: solid 5px darkblue; */
    
}

main div#index {
    margin: 0;
    background-image: url("../images/background_image.jpg");
    background-position: -120px -180px;
    min-height: 76vh;
    height: fit-content;
    flex-direction: column;
}
img#dual {
    flex-direction: column;
    width: 20vw;
    height: auto;
    border: None;
}

@media (max-width: 850px) {
    .flex-container {
        flex-direction: column;
    }
    .center-container {
        max-width: 76vw;
    }
    img#dual {
        width: 40vw;
    }
    img {
        width: 80vw;
    }
    
}

/**********************************************************************/
/*                          MEDIA                                     */
/**********************************************************************/


@media screen and (max-width: 960px) {
    img.logo {
        width: 60vw;
    }
    .topnav {
        display: flex;
        justify-content: space-between;
        align-items: top;
        /* overflow: hidden; */
    }
    .topnav div a { /* : not(:first-child)*/
        display: none;
    }
    .topnav div a.icon {
        /* margin-right: 2vw; */
        display: flex; /* this unsets the display none*/
        color: black;
        /* border: red dashed 2px; */
    }
    .topnav div a.icon:hover {
        color: var(--newsbar-clr);
        background-color: unset;
    }
    .topnav.responsive {
        text-align: top;
    }
    .topnav.responsive img#logo{
        display: block;
        position: relative;
        top: -83px;
        left: 0px;
    }
    .topnav.responsive div {
        /* position: relative; */
        justify-content: right;
        display: flex;
        flex-direction: column;
        height: fit-content;
        padding-bottom: 5px;
    }

    .topnav.responsive div a.icon {
        position: absolute;
        right: 0;
        top: 32px; 
        
    }

    .topnav.responsive a {
        display: flex;
        text-align: left;
        align-content: center;
        justify-content: left;
        /* align-items: left; */
        /* justify-items: left; */
        /* position: relative;
        right: 0px;
        top: 15px; */
        height: 35px;
        padding-right:0;
        padding-left: 0;
        /* border: green 2px dashed; */

    }
    .topnav.responsive a.active {
        color: blue;
        background-color: transparent;
        font-weight: 800;

    }
    
}