/* Styles for earthwilders website  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
/* color palette */
:root{
    --c1: #2f4a31; /* nav, h1, aside li */
    --c3: #ebeaeb; /* background light neutral */
    --c2: #78865a; /* nav, footer dots */
    --c4: #8aa473; /* aside border */
    --c5: #2f4a31; /* footer, p, h2 */
    --c6: #a22c29; /* link highlight */}
body {
    background-color: var(--c3);
    font-family: 'robotoregular';}

/* Navigation Bar Styling */
#top {
    /* width: 80%; */
    /* max-width: 940px; */
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 1;
}
#primary {
    /* width: 940px; */
    height: 50px;
    line-height: 50px;
    background: var(--c1);
    /* position: fixed;
    z-index: 1; */
}
#primary .horizontal {
    list-style-type: none;
    float: left;
    width: 14.28%;
    text-align: center;
    font-size: 1.3em;
    position: relative;}
.horizontal a {
    text-decoration: none;
    color: var(--c2);
    display:block;}
.horizontal a:hover {
    background: var(--c2);
    color: var(--c1);}
/* pseudo classes */
.Home #primary .horizontal:nth-child(1) a,
.OurStory #primary .horizontal:nth-child(2) a,
.WhatWeDo #primary .horizontal:nth-child(3) a,
.ForStudents #primary .horizontal:nth-child(4) a,
.Partners #primary .horizontal:nth-child(5) a,
.Research #primary .horizontal:nth-child(6) a,
.Contact #primary .horizontal:nth-child(7) a{
    background: var(--c2);
    color: var(--c1);}
/* Drop-Down Menu Displays */
.drop-down {display: none;}
.drop-down a {
    background: var(--c1);
    color: var(--c2);}
.drop-down li {
    width: 200%;
    list-style-type: none;}
#primary li:hover .drop-down { 
    display: block; /* opposite of no display, displays or appears on hover */
    position: absolute;
    top: 50px;
    left: 0px; /* these three lines adjusts position relative to parent nav li */
    z-index: 1; /* so that the dropdown displays on top of other elements on the page (like in photoshop) */
}

/* Banner Styling */
/* #hero {
    width: 100%;
    max-width: 940px;
    max-height: 380px;
    overflow: hidden;
    margin-bottom: 20px;}
#hero img {
    max-width: 940px;} */

/* Main Page Styling */
#wrapper {
    width: 90%;
    max-width: 940px;
    margin: 0px auto 0 auto;
}
main {
    width: 100%;
    max-width: 940px;
    float: left;
}
.OurStory img{ 
    max-width: 25%;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    /* border: #78865a solid 4px; */
    /* box-shadow: 10px 10px 5px #78865a; */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.779), 0 6px 20px 0 rgba(0, 0, 0, 0.44);
}

/* Thirds Styling */
.row {
    clear: both;/* allows the floating third elements to be placed under the main and aside */
    overflow: hidden; /* this will put the margin at the bottom since the thirds are floating */
    width: 100%;
    max-width: 940px;
}
.third {
    width: 31.91%;
    /* max-width: 300px;  */
    float: left;
    margin-right: 2.126%;}
.third:last-of-type {
    margin-right: 0px;}
.third img {
    max-width: 100%;
    margin-bottom: 12px;
    border-radius: 50%;
}
.third h3 {text-align: center;}
/* blockquotes */
blockquote {
    color: var(--c5);
    border-left: var(--c4) solid 20px;
    display: block;
    font-size: 1.5em;
    padding: 10px;
    margin: 20px;
}
blockquote span {
    display: block;
    text-align: right;
    font-size: 0.8em;
    font-style: italic;
    margin-top: 10px;
}

/* Partners List Styling */
.Partners ul {
    list-style: none;
    font-size: large;
    text-align: center;
}
.logo {
    max-width: 300px;
    margin-bottom: 30px;
}
/* Contact form styling */
fieldset{
    padding: 10px;
    border: 2px solid var(--c2);
    margin: 0 auto 20px auto;
    max-width: 580px;
}
label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--c1);
}
input[type="text"], input[type="email"] {
    margin-bottom: 10px;
    height: 30px;
    width: 100%;
}
textarea {
    width: 100%;
    margin-bottom: 10px;
    height: 60px;
}
input[type="submit"] {
    width: auto;
    padding: 5px 10px;
    text-decoration: solid;
}
/* Aside Styling
aside {
    width: 340px;
    background: var(--c3);
    float: right;
    /* margin-top: 24px; */
    /* border: 5px solid var(--c4);
    margin-bottom: 20px;}
aside ul {
    list-style-type: none;}
aside p, aside h2, aside ul {
    margin: 10px;} */ 

/* Footer styling */
footer {
    height: 40px;
    line-height: 40px;
    border-top: 4px dotted var(--c2);
    clear: both;}
footer li {
    list-style-type: none;
    font-size: 0.8em;
    float: left;
    width: 33%;
    text-align: center;
    position: relative;}

/* Typography */
p {color: var(--c5);
    line-height: 1.5em;
    margin-bottom: 20px;}
h1 {
    font-size: 4.6em;
    font-family: 'akrobatbold';
    color: var(--c1);
    margin-bottom: 10px;
    text-align: center;}
h2 {
    font-size: 1.6em;
    color: var(--c5)}
h3 {
    font-size: 1.4em;
    color: var(--c4);
    margin-bottom: 10px;}
h3 a {
    color: var(--c2);}
h3 a:hover {
    color: var(--c4)}
#primary a {
    font-family: 'akrobatbold';
    font-size: 1.0em;}
aside a {
    color: var(--c6);
    text-decoration: underline;}
aside li {
    color: var(--c1);}
footer a, footer li {
    color: var(--c5);}
footer a:hover {
    color: var(--c4);
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 20, 2024 */
/* @font-face {
    font-family: 'archisticobold';
    src: url('../fonts/archistico_bold-webfont.woff2') format('woff2'),
         url('../fonts/archistico_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;} */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 1, 2024 */
@font-face {
    font-family: 'akrobatbold';
    src: url('../fonts/fontsfree-net-akrobat-bold-webfont.woff2') format('woff2'),
         url('../fonts/fontsfree-net-akrobat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 1, 2024 */
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/archistico_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}