/* Reset*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    
}

/* Utilities */

.container {
    margin: auto;
    max-width: 1100px;
    overflow: visible;
    padding: 0 20px;
}

@font-face {
    font-family: sunflower ;
    src: url(../css/Sunflower/Sunflower-Light.ttf);
}

ul{
    list-style: none;
}

body{
    background-color: #333;
    color: #FAF9F6;
    font-family:sunflower, Arial, Helvetica, sans-serif;
}

a{
    color: #333;
}

.highlight {
    color: rgb(72, 146, 241);
    font-weight: bold;
}


/* Navigation */
#navbar {
    position: sticky;
    top: 30px;  
    text-align: center;
    width: 100%;
    margin: 0; 
    z-index: 20;
}

#navbar ul li:hover,
#navbar ul li.current{
    background: rgb(206, 201, 179);
    color: rgb(53, 126, 35);
}

#navbar li{
    display: inline; 
    width: 100%;
    padding: 10px 63px;
    border: 1px solid beige;
    background-color: beige; 

}


/* the world */
.title {
    background-image: url(../images/horizon-earth-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
    color: #FAF9F6;
    height: 800px;
    width: 100%;
    padding: 300px 0px;
    margin-bottom: 9px;
    text-align: center;
    font-size: 185px;
    font-family: sunflower, Arial, Helvetica, sans-serif;
    min-width: 900px;
    max-width: none;
}

.welcome {
    padding-bottom: 35px;
}

.welcome, 
.ovotw {
    padding-top: 50px;
    text-align: center;
}

.welcome h2, 
.ovotw h2,
.ovotw-pics h2{
    font-size: 40px;
    text-align: center;
}

.welcome p, 
.ovotw p{
    position:relative;
    left: 50px;
    font-size: 20px;
    max-width: 90%;
    
}

.ovotw-pics img {
    position: relative;
    left: 65px;
    right: 40px;
    width: 465px;
    border: 3px solid black ;
}


/* The Land */
.land-title {
    background-image: url(../images/land-heading.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
    color: #FAF9F6;
    height: 800px;
    width: 100%;
    padding: 300px 0px;
    margin-bottom: 9px;
    text-align: center;
    font-size: 185px;
    font-family: sunflower, Arial, Helvetica, sans-serif;
    min-width: 900px;
    max-width: none;
}

.land {
    padding-top: 20px;
    text-align: center;
}

.land h2,
.land-pics h2{
    font-size: 40px;
    text-align: center;
}

.land p{
    position:relative;
    left: 50px;
    font-size: 20px;
    max-width: 90%;
}

.land-pics img{
    position: relative;
    left: 65px;
    right: 40px;
    width: 465px;
    height: 312px;
    border: 3px solid black ;
}

/* The Ocean*/

.ocean-title {
    background-image: url(../images/the-ocean.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
    color: #FAF9F6;
    height: 800px;
    width: 100%;
    padding: 300px 0px;
    margin-bottom: 9px;
    text-align: center;
    font-size: 185px;
    font-family: sunflower, Arial, Helvetica, sans-serif;
    min-width: 900px;
    max-width: none;
}

.ocean h2,
.ocean-pics h2 {
    font-size: 40px;
    text-align: center;
}

.ocean {
    padding-top: 20px;
    text-align: center;
}

.ocean p{
    position:relative;
    left: 50px;
    font-size: 20px;
    max-width: 90%;
}

.ocean-pics img{
    position: relative;
    left: 65px;
    right: 40px;
    width: 465px;
    height: 312px;
    border: 3px solid black ;
}


/* Recent Discoveries */
.ocean-species,
.core-slow,
.river{
    display:inline;
    position:relative;
    left: 40px;
    float: left;
    margin-top: 75px;
    width:600px;
    padding:20px;
    border: 5px dashed #FAF9F6;
}

.ocean-species img,
.core-slow img,
.river img{
    width: 550px;
    height: 309px; 
}

.core-slow img{
    margin-top: 20px;
}

.river img {
    margin-top: 40px;
}

.discoveries-title {
    background-image: url(../images/discoveries-header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
    color: #FAF9F6;
    height: 800px;
    width: 100%;
    padding: 300px 0px;
    text-align: center;
    font-size: 185px;
    font-family: sunflower, Arial, Helvetica, sans-serif;
    min-width: 900px;
    max-width: none;
}

.container-disc {
    margin: auto;
    max-width: 2000px;
    overflow: auto;
    padding: 0 20px;
}

#article {
    color: #ee4848;
    font-weight: bold;
}

#article:hover{
    color: rgb(32, 119, 231);
}

/* Resources */
.re-header{
    position: relative ;
    text-align: center;
    top: 75px;
    font-size: 40px;
}

.source {
    display: block;
    position: relative;
    top: 100px;
    border: black 3px solid;
    padding: 10px;
    margin: 20px;
    
}

.resrcs{
    margin-bottom: 150px;
}

.source img{
    height: 130px;
}
.source a {
    color: #FAF9F6;
}


/* Footer */
.footer{
    background-color: black;
    width: 100%;
}

.footer ul li {
    display:inline-block;
    padding: 20px 200px;
    text-align: center;
}