.test {background: #f79256  #fbd1a2  #7dcfb6  #00b2ca  #1d4e89

#8ecae6  #219ebc  #023047  #ffb703  #fb8500 #bfe5f8

 #ffffff  #00171f  #003459  #007ea7  #00a8e8

#3d5a80  #98c1d9  #e0fbfc  #ee6c4d #293241
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #023047;
    line-height: 1.5;  
}

img {
    max-width: 100%;
    display: block;
}
/* Typography */ 

h1 {
    margin: 0;
}

.site-title p {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8rem;
}

header p {
    margin: 0;
}

nav a {    
    letter-spacing: 1px;
}

a {
    color: #023047;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #fb8500;
    border-bottom: 1px solid #fb8500;
    padding-bottom: .25em;
}

.current-page {
    border-bottom: 1px solid #023047;
    padding-bottom: .25em;
}

.current-page:hover,
.current-page:focus {
    color: #023047;
    border-bottom: 1px solid #023047;
    padding-bottom: .25em;
}

.article-info {
    font-weight: 900;
}

ion-icon {
    font-size: 1em;
    margin-right: .5em;   
}


/* Layout */

.container {    
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;    
}

.container-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}


header {    
    text-align: center;
    padding: 2em 0;
    background: hsl(199, 64%, 73%);      
}

footer {    
    padding: 2em 0;
    background: #8ecae6; 
}

.main-section {
    margin: 2em 0;
}

@media screen and (min-width: 530px) {
    header {
        position: sticky;
        top: 0;
        background: hsl(199, 64%, 73%, 0.98)
    }
    .container-flex {        
        flex-direction: row;               
    }    
}

.site-title img {
    width: 20%;    
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;          
}

nav li {
    margin: .25em;
}

@media screen and (min-width: 530px) {
    nav ul {        
        flex-direction: row;        
        justify-content: space-between;              
    }

    nav li {
        margin: 0 0.5em;
    }
}

.footer-margin {
    margin: 0.5em 0;
    text-align: center;
}

.article-featured {
    border-bottom: #707070 1px solid;
    padding-bottom: 2em;
    margin-bottom: 2em;
}

.container .article-featured:last-child {
    border: none;
}

.article-start {           
    padding-bottom: 2em;
    margin-bottom: 2em;    
}

.article-start img {   
    margin: 2em 0;
}

.container-img {
    display: flex;
    flex-direction: column;      
}

@media screen and (min-width: 530px) {
    .container-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.article-start img {    
    width: 48%;
    height: 48%;
    margin: 2em 0;
}
}