* {
    
    box-sizing: border-box;
    padding:0px;
}

#wrapper {
   
    transition: .5s ease-in-out;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%; 
    width: 1200px; 
    border-radius: 5px;
    background-color: #c1c8cb; color: #326981;
    
    
    }


.picfloat {
        
    position: 20px fixed;
    float: left; 
    background-color: white;
    border-style: ridge;
    border-width: 4px;   
    border-radius: 5%;
    padding: none;
    margin: none;
    z-index: 3;
    

}

header {
 
    
    min-height: 100px; width: 100%;
    background-color: #326981; 
    color: #c1c8cb; 
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    align-self: flex-start; 
    padding-left: 1px;
    padding-bottom: 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 2;


}

header h1{

    
    font-size: 200%;
    

}

header p {
    
    
    font-size: 100%;


}

header a{

   
    font-size: 100%;
    color: white;
    white-space: nowrap;
    padding-inline: 1%;

}

nav {

    background-color: darkorchid;
    color: #d88f22;
    text-align: center;
    padding-inline-start: left;

}

body {
    
    
    background-color: #00008f;
    
    min-height: 480px;
    max-width: 1200;
    align-self: center;
    

}



.container {
    
    
    display: flex;
    justify-content: center;
    padding-left: 20px;

}

.container main{
    
    
    z-index: 1;
    min-width: 70%;
    max-width: 90%;
    margin-left: 3%;
    margin-right: .5%;
    position: relative;
    padding-top: 20px;
    padding-left: none;
    padding-right: none;
    min-height: 1020px;

}

.container main h2{

   
    display: flex;
    padding-bottom: 3%;
    justify-content:  center;
    font-size: 150%;
    color: #326981;
    text-decoration-line: underline;


}

.container main h3{

    
    /* display: flex; */
    padding:20px;
    background-color:#a2c2cf;
    font-size: 110%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    justify-content: left;
    color: #052431;
    

}

.container main title{

    display: flex;
    padding-bottom: 3%;
    justify-content:  center;
    font-size: 100%;
    color: #082b3a;
    text-decoration-line: underline;

}

hr {

    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgb(74, 15, 253);
    margin: 1em 0;
    padding: 0;
    

}

footer {

    display: flex;

    min-height: 50px;
    justify-content: center;
    align-items: center;
    background-color: #326981 ;
    color: #c1c8cb;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    white-space: nowrap;

}

footer a {

    width: 20px;
    padding-left: 1%;
    color:rgb(191, 96, 242)

}

@media only screen and (max-width: 1160px) {
    #wrapper {

        transition: .5s ease-in-out;
        width: 940px;

    }
    body {

      
      

    }
    header{

        width: 100%;
    }
    .container {

        width: 100%;

    }
    footer{

        width: 100%;
        white-space: nowrap;

    }

  }

@media only screen and (max-width: 975px) {
    #wrapper {

        transition: .5s ease-in-out;
        width: 600px;

    }
    body {

      
      

    }
    header{

        width: 100%;
    }
    .container {

        width: 100%;

    }
    footer{

        width: 100%;
        white-space: nowrap;

    }

  }

@media only screen and (max-width: 731px) {
    #wrapper {

        transition: .5s ease-in-out;
        width: 480px;

    }
    body {

      
      

    }
    header{

        width: 100%;
    }
    .container {

        width: 100%;

    }
    footer{

        width: 100%;
        white-space: nowrap;

    }

  }

  @media only screen and (max-width: 572px) {
    #wrapper {
       
        transition: .5s ease-in-out;
        max-width: 414px;
        margin-left: 0%;
        margin-right: 0%;
        

    }
    body {

        margin: 0px;
        padding-left: none;
        padding-right: none;
        
     

    }
    header{

        width: 100%;
    }
    .container {

        width: 100%;
        padding-left: none;
        padding-right: none;

    }

    .container main {

        padding-left: none;
        padding-right: none;
        

    }
    footer{

        width: 100%;
        white-space: nowrap;
    }

}

@media only screen and (max-width: 420px) {
    #wrapper {
       
        transition: .5s ease-in-out;
        width: 414px;
        margin-left: 0%;
        margin-right: 0%;
        

    }
    body {

        margin: none;
        padding-left: none;
        padding-right: none;
        
     

    }
    header{

        width: 100%;
    }
    .container {

        width: 100%;
        padding-left: none;

    }

    .container main {

        padding-left: none;
        

    }
    footer{

        width: 100%;
        white-space: nowrap;
    }

}