/* 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;
}



/* Mobile First CSS: we'll design for phone sizes first, then add media queries for larger screens later */

body {
	background: #8e98ed;
    color: #112840;
	font-family: "Manrope", sans-serif;
}


#container {
	
}


header, footer {
    
    background: #112840;
    color: #8e98ed;
    padding: 1.3em;
}


h1{
    font-family: "Sedan", serif;
    font-size: 3em;
    line-height: 1.12em;
}

section {
    border: 1px solid black;
    padding: 15px;
    margin-bottom: 1.8em;
}

section header {
    background: none;
    color: #112840;
}

section h1 {
    font-size: 1.7em;
}

section#myStuff {
    background: #a6aef5;
}


/*.mobile-only {
    
   color: yellow; 
}

.desktop-only {
    
    display: none;
}*/

/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */



/* Minimum width for laptops. */
@media all and (min-width: 769px) {
	
    body {
        background: #a6e7f5
            url(../img/tzununa_sunset.JPG) no-repeat fixed center;
        background-size: cover;
    }
    
    #container {
        width: 725px;
        margin: auto;
    }
	
    section#somebodysStuff {
        
        background: rgba(0,0,0,0.7);
        color: white;
    }
    
    section#somebodysStuff h1 {
        
        color: #8e98ed;
    }
    
    header, footer {
        background: none;
    }
	
    #container>header h1 {
    color: white;
    }
    
    footer {
        
        color: white;
        text-align: right;
    }
	
} /* closes 769px+ */



/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
    #container{
        width: 1000px;
        margin: auto;
    }
	
    section#somebodysStuff {
        
        float: left;
        width: 45%;
    }
    
    section#myStuff {
        
        float: right;
        width: 40%;
    }
    
    footer {
        clear: both;
    }
    
   /* .mobile-only {
    display: none;
    color: yellow;
    
    }

    .desktop-only {
        display: block;
        color: yellow;
    }*/
	
} /* closes 1024px+ */