html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: rgb(80, 170, 255);
}

/* grid set up */
.wrapper {
    min-height: 100%;
    display: grid;
    grid-template-columns: 200px auto 500px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
        "logo banner banner"
        "navigation navigation quick-search"
        "main main main"
        "footer footer footer"
    ;
    row-gap: 4px;

}

/* logo style */
.logo{
    grid-area: logo;
}

/* banner style */
.banner{
    grid-area: banner;
}

/* navigation style(background behind buttons) */
.navigation{
    grid-area: navigation;
    background-color: rgb(0, 225, 255);
    display: flex;
    gap: 8px;
}

/* search bar style for behind */
.quick-search{
    grid-area:quick-search;
    background-color: rgb(0, 225, 255);
}

/* main style */
.main{
    grid-area: main;
    background-color: rgb(0, 225, 255);
}

/* footer style */
.footer{
    grid-area: footer;
    font-weight: lighter;
    font-family: "Arvo", serif;
    font-style: italic;
    display: flex;
    justify-content: space-between;
}

/* pading for everything */
.all{
    padding: 10px;
}

/* text and background colors for logo, banner, and footer */
.logo, .banner, .footer{
    background-color: rgb(225, 53, 53);
    color: white;
}

/* text style */
h1 , h2, h3{
    font-family: "Arvo", serif;
    font-style: italic;
}

/* saw in the video never mentioned */
.right{
    float: right;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 10px;
    transform: rotate(10deg);
}

/* link style before visit */
a{
    color: rgb(0, 0, 0);
    font-weight: lighter;
    text-decoration: underline;
}

/* link color change */
a:visited {color: rgb(73, 73, 73);}
a:hover {color: rgb(255, 49, 49)}

/* keeping footer color the smae */
.footer a, .footer a:visited{
    text-decoration: none;
    color: rgb(0, 0, 0) ;
}

/* changes the fotter Credits/Image Atribution link color when you hover over it */
.footer a:hover{
    color: rgb(114, 187, 255);
}