body {
        background-color: #1f8bd3;
        color:#fcf6e7;

}
/*Display for smaller screens*/
@media screen and (max-width:700px){
    body{
        font-family: 'Playfair Display', serif;
        background-color:#34b897;
        color: #333333;
        margin: 10px;
        padding: 20px;

    }
    header{
        display: grid;
        /*fr = fractional unit*/
        grid-template-columns: 2fr 3fr; 
        grid-template-rows: 1fr;
        /*2fr 1fr = column 1 takes 2/3 of space 
        in grid (2+1 = 3) while 2nd takes the other 1/3*/
        grid-gap: 15px;
        justify-items: left;
    }
    h1{
        text-align: center;
    }
    .byline{
        font-weight: bold;
        text-align: center;
        margin: 125px -300px;
    }
    .no{
        margin: -100px 0;
        padding-bottom: 100px;
    }
    footer{
        width: 75%;
        margin-left: 10px;
        text-align: left;
        background-color: #282009;
        color: #FFFFFF;
    }
    aside{
        border: 1px solid #333333;
        background: #ebc959;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #0e0404;
        width: 20%;
        height: 20%;
        margin-top: 275px;
    }
    img{
        width: 60%;
        height: 35%;
        margin: 0 30;
    }
    main{
        padding: 10px;
        width: 80%;
        margin: 0 -460px;
    }
    a{
        color: #e25821; ;
    }
    a:hover{
        text-decoration-line: underline;
        font-weight: bold;
    }
}
    

/*Display for larger screens*/
@media screen and (min-width:701px){
    header {
        padding: 30px;
        justify-items: center;
    } 
    main p{
        padding: 20px;

    }
    main{
        margin-top: -75px;
      	margin-left:-50px;
    }
    footer{
        margin: auto;
        background-color: #FFFFFF;
        color:  #282009;
    }
    aside{
        border: 1px solid #333333;
        background:  #fcf6e7;
        color: #272727;
        margin-left:20px;
      	margin-top:-45px;
        width: 65%;
        height: 90%;
    }
    img{
        width: 300px;
        height: 250px;
        margin: 0 10;
    }
    a{
        color:#ac0862;
        font-weight: bold;
    }
    a:hover{
        color:#068b2e;
        text-decoration-line: underline;
    }
}

header {
    grid-area: header;
} 
main {
    grid-area: main;
} 
footer {
    padding: 30px;
    text-align: center;
} 
h1 {
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
aside {
    grid-area: sidebar;
    width: 75%;
    padding: 20px;
    margin-bottom: 20px;
    height: fit-content;
}
.wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
        "header header header" /*3 columns of the header section*/
        "sidebar main main";    /*2 columns of main section 1 sidebar section*/
    grid-gap: 20px;
    width: 900px;
    margin: 0 auto;
}

.byline {
    font-family:'Courier New', Courier, monospace;
    font-style: italic;
}

p{
    font-size: 18px;
    margin: 20px 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a{
    text-decoration: none;
}
a:hover{
        text-decoration-line: underline;
        font-weight: bold;
}