body {
font-family: 'Ropa Sans', sans-serif;
font-weight: normal;
font-size: 20px;
color: white;
background-color: MediumBlue;
}



/* Responsive pain-in-the-ass bullshit ----------- */
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
body { 
margin: 2em;
width: 40%;
}
.header {
font-size: 2.75em; 
}
.details {
width: 66%;
}
h4 {
font-size: 1.125em;        
}    
}

/* Desktop/Laptop ----------- */
@media only screen  and (min-width : 1200px) and (max-width : 1823px) {
/* Styles */
body {
margin: 1.5em;
width: 45%;
}
.header {
font-size: 2.25em; 
}
.details {
width: 85%;
}
h4 {
font-size: 1.125em;        
}    
}

/* Tablets ----------- */
@media only screen  and (min-width : 768px) and (max-width : 1199px) {
/* Styles */
body {
margin: 1.5em;
width: 50%;
}
.header {
font-size: 2em; 
}
.details {
width: 95%;
}
h4 {
font-size: 1em;        
}    
}

/* Mobile ----------- */
@media only screen  and (min-width : 360px) and (max-width : 767px) { 
/* Styles */
body {
margin: 1.5em 1em 1.5em .75em;
width: 95%;
}
.header {
font-size: 1.625em;
}
.details {
width: 100%;
}
.details p {
}   
}

/* end of responsive headaches */

/* Menu Typography */ 
.nav-collapse ul {
font-family: 'Ropa Sans', sans-serif;
margin: 0;
padding: 0;
}

/* Big Text */
.header {
float: left;
clear: both;    
}

main p {
margin: 1.5em 0 .75em 0;
}

/* Details */
.details {
float: left;
clear: both;
font-family: 'Open Sans', sans-serif;
margin-bottom: 5em;
}

h4 {
float: left;
clear: both;
margin: 1em 0 .25em 0;
font-weight: 500;
padding: 0 .25em;
margin-bottom: .25em;
font-family: 'Ropa Sans', sans-serif;
}


.details ul {
margin: 1em 0;
}

.details li {
float: left;
clear: both;    
list-style-type: circle;
margin: auto;
margin-bottom: .375em;
font-size: .85em;
}

/* Links */
a , a:link , a:active , a:visited {
text-decoration: none;
color: yellow;
}

a:hover {
color: PaleGoldenrod;
}