/* set base formatting and color scheme for page using body, header and h2 */
body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color:mediumblue;
    color:rgb(255, 255, 255);
}

header {
    color:aliceblue;
    background-image:-moz-linear-gradient(blue,teal);
    border-color: white;
    border-radius: 20px;
    border-width: 2px;
    text-align: center;
    font-size: 200%;
    padding: 0px;
    margin: 0px;
}

h2 {
    background-color: orangered;
    border-radius: 7px;
    border-color:aliceblue;
    border-width:2px;
    border-style:solid;
}

/* Make sticky nav */
nav {
    
    position:sticky;
    background-color: rgb(0, 0, 65);
    top: 0;
    border-radius: 1px;
    border-style:solid;
    
}

/* format image for smallest screen size first */
img {
    display:block;
    margin-left: auto;
    margin-right: auto;
}


/* format paragraphs for each section */
p {
    background-color: aliceblue;
    border-style: double;
    border-width: 1px;
    color:midnightblue;
    border-radius: 10px;
    border-color:black;
}







/* media query @576px changes padding on text boxes and enlarges images */
@media (min-width: 576px){


    img{
        height: 550px;
    }

    p{
        padding:10px;
    }

    h2{
        padding:10px;
    }

    h1{
        padding:10px;
    }


}

/* Media query @720px further enlarges images, changes background to a radial gradient, and increases font-size,*/

@media (min-width: 720px){
    img{
        height:650px;
    }

    section{
        margin:60px;
    }

    body{
        background-image: -moz-radial-gradient(rgb(110, 214, 255),mediumblue);
    }

    p{
        font-size:19pt;
    }

    h2 {
        font-size: 26pt;
    }


}


/* Final media query @992px changes layout so images float left, further enlarges images and font-size, removes text boxes in favor of plain text, uses box model to avoid text box overlapping images, and makes footer sticky*/
@media (min-width: 992px){
    img{
        align-items: left;
        margin: right 20px;
        float:left;

        
    }

   
   
   p{
    background: none;
    color:aliceblue;
    border: none;
    font-size: 34pt;
    margin-bottom:150px;
    
   }

   h2{
    font-size:58pt;
   
   }

   footer{
    position:sticky;
    bottom:0;
    align-items: left;
   }

   h2{
    margin:100px;
   }
}