/* Title*/
.title {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font: bold;
    text-align-last: center;
}
/* Main text*/
body{
    font-family: Arial, sans-serif;
    margin:0;
    background:#f4f4f4;
}
/*Heading for top section of site. Where title is.*/
header{
    background:#222;
    color:white;
    padding:20px;
    text-align:center;
}
/*Navigation bar*/
nav{
    background:#444;
}
/* Navigation bar display*/
nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
}
/* navigation bar text spacing*/
nav li{
    padding:15px 20px;
}
/* Navigation bar text links*/
nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}
/* text hover effects*/
nav a:hover{
    color:#ffcc00;
}
/*Banner Effects*/
.banner{
    color: black;
    text-align: center;
    align-content: center;
    padding: 50px 20px;
}
/* Main elements widths and space*/
.container{
    max-width:1100px;
    margin:auto;
    padding:30px;
}
/* Article boxes*/
article{
    background:white;
    padding:20px;
    border:1px solid #ccc;
    margin-bottom:20px;
    align-content: center;
    text-align: center;
} 

article img{
    width:50%;
    height:auto;
    margin: 0 auto;
}
/* Article link styles*/
article a{
    text-decoration:none;
    color:black;
}
/* Article Hover effects*/
article:hover{
    transform:scale(1.02);
    transition:0.2s;
}

footer{
    background:#222;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:40px;
}
/*Mobile style*/
@media (max-width:768px){
/* stack on top of each ohter on mobile*/
    nav ul{
        flex-direction: column;
        align-items: center;
    }
/*Stack main elements on top of each other*/    
    main{
        grid-template-columns: auto;
    }
}