*{
    margin:0;
    padding:0;
}

body{
    color:#000;
    font-size:14px;
    font-family: arial;
    border-top:2px solid #eee;
}

/*Index.html*/
.homeLayout{
    
    background: #eee;
    width: 80%;
    
    margin:10px auto;
    border:1px dotted #ccc;
}


.homeLayout header{
    display: flex;
    flex-direction: column;
    align-content: center;
    height:140px;
    background: #fff;
    align-items: center;
    justify-content: center;
    border-bottom:1px solid #ccc;
   
   
}

.homeLayout footer{
    min-height:50px;
    background: #eee;
    display: grid;
    border-top:1px solid #ccc;
    padding:10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.homeLayout .news{
    grid-template-columns: repeat(3, 320px);
    grid-gap: 10px;
    padding:10px;
    display: grid;
    background: #eee;
}

.homeLayout .contentWrapper p{
    text-align: center;
}

.homeLayout .news div a{
    color: #000;
   
}

.homeLayout .news div:hover{
    background:#999;
}

.homeLayout nav{
    text-align:center;
}

.homeLayout footer a{
    color:#999;
    text-decoration: none;
}

.sampleOne header{
    height: 70px;
    text-align:center;
    padding:30px 0;
}

.sampleOne header h1{
    text-transform: uppercase;
    margin-bottom: 15px;
}

.sampleOne header h2{
    color:#ccc;
   
}
 
.sampleOne h2 span{
    color: red;
}

.sampleOne .wrapper{
  
    display: grid;
    width:80%;
    grid-gap:30px;
    margin:30px auto;
    grid-template-columns: repeat(auto-fill, 250px);
    grid-auto-flow: row;
    justify-content: center;
    justify-items: center;
   
}



.sampleOne .wrapper div{
    background:#fff;
    border:1px solid #eee;
    box-shadow:2px 2px 2px #ccc;
    padding:2px;
    width:250px;
    justify-content: center;
    align-items: center;
    display: flex;
}

footer p{ 
    text-align:center;
}

.sampleOne footer{
    margin-top:30px;
    width:80%;
    margin:0 auto;
    color: #999;
    text-align:center;
}

footer a{
    color: #999;
    font-size:12px;
    margin-right:10px;
    text-transform: uppercase;
    
    
}
.sampleOne footer p{
    font-size:11px;
    margin-top:10px;
}

.sampleOne div p{
    width:80%;
    line-height: 21px;
    font-size:12px;
    text-align: center;
}






.layout{
   display:grid;
   background: #eee;
   width: 80%;
   justify-content: center;
   grid-template-areas: 
    "header header header"
    "news news news"
    "nav  contentWrapper  contentWrapper"
    "quotes quotes quotes"
    "footer footer footer";
    grid-gap:10px;
    justify-content: stretch;
    margin:10px auto;
    border:1px dotted #ccc;
}

.layout header{
    grid-area: header;
    align-content: center;
    height:140px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom:1px solid #ccc;
   
   
}

header span{
    color: red;
}



.layout footer{
    grid-area: footer;
    align-content: center;
    min-height:50px;
    background: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top:1px solid #ccc;
    padding:10px;
}

.layout .navigation{
    grid-area: nav;
}

.navigation ul{
    margin:10px;
    list-style: none;
}
.navigation ul li{
    margin-top:10px;
}

.navigation ul li a{
    color: #000;
    text-decoration:none;
    font-weight: bold;
}



.layout .news{
    grid-area: news;
    display: flex;
    grid-auto-flow: row;
    padding:10px;
    justify-content: center;
    align-content: center;
    background: #eee;
}

.news div {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    line-height: 21px;
    background: rgb(209, 209, 209);
    margin: 0 10px;
    border-radius: 10px;
    padding: 20px;
   
}


.news div h4{
    font-size:16px;
}

.layout .quotes{
    grid-area: quotes;
}
.layout .contentWrapper {
    min-height: 280px;
}


.layout .contentWrapper{
    grid-area: contentWrapper;
   
}

.contentWrapper p{
    font-size:12px;
    line-height: 21px;
    width:80%;
    margin:0 auto;

}



.layout footer a{
    color:#999;
    text-decoration: none;
}

.sampleThree .contentWrapper {
   display: grid;
   grid-template-columns: repeat(2, 400px);
   grid-gap:10px;

}

.sampleThree .contentWrapper div{
    background:rgb(216, 216, 216);
    border-radius: 5px;
    padding:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sampleThree .contentWrapper div p{ 
    text-align: center;
}


.sampleThree .contentWrapper div:nth-child(3){
   
    grid-column: 1/3;
}

/*Responsive*/
@media only screen and (max-width: 500px) {
    body {
        background-color: rgb(177, 247, 177);
    }
    .layout.responsive{
        grid-template-areas: 
        "header"
        "news"
        "nav"
        "contentWrapper"
        "footer"
    }


.layout.responsive .news {
    display: grid;
    grid-gap: 10px;
 }
 
 .layout.responsive .news div {
    width: auto;
    
 }
 
}