/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}


header{
    
    padding:5px;
    line-height: 2em;
     font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
    color:#316d81;
}

h1, footer{color:#0c80a6;}
h2{
      font-style: italic;
font-size:5em;
    line-height: normal;
    margin-bottom: 0.5em;
    
}

body {
	line-height:2.5em;
    padding:2px;
text-align: center;
  font-family: "Fondamento", cursive;
  font-weight: 400;
  font-style: normal;
    line-break:auto;
background:url(../img/Water.jpg)
    fixed no-repeat center;
    background-size:cover;
color:	#e8fce8;
    
}
p{
    padding: 0px;
}

footer {
    font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
font-size: 12px;

}


#container {
    align-content: center;
	
}


.ocean,.blood,.forest,.soul{
    transition: color 0.3s ease
}

.ocean:hover {
  color: #1E90FF; 
}

.blood:hover {
  color: #DC143C; 
}

.forest:hover {
  color: #228B22; 
}

.soul:hover {
  color: #696969; 
}






/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
    body{
}
    
     #container{}
    
    Section {
        
        line-height: 2em;
    }
    
    
    #one{
        float:left;
        width:80%;}
        
        #two{
       float:left;
        width:90%;}
    
    #three{
        float:right;
        width:100%;}
        
        #four{
       float:right;
        width:85%;}

    footer{
        float:right;
        margin:2em;
}
    
    h2, {color:#266073;}

    h1,footer{color:#387d94;}
	
	
	
} /* closes 1024px+ */