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

body{
    font-family: 'Crimson Text', serif; 
    background-color: #1D2D44;
    color: #F0EBD8;
    position: relative;
    
 }

 header{
     background-color: #222222;
     text-align: center;
     padding: 12px;
     height: 12vh;
 }

 h1 {
    font-family: 'Anton', sans-serif;
    color: #32908F;
    border-bottom: 2px solid #eeeeee;
    text-shadow: black 2px 2px;
    font-size: 1em;
}


#nav1{
    display: flex;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    position: sticky;
    top: 0px;
    background: rgb(53, 51, 49);
    height:8vh;
    flex-flow: row;
}

nav a{
    color: #bd135f;
    text-decoration: none; 
    text-shadow: black 2px 2px;
    display: block;
    flex: 1 0 20%;
    text-align: center;
    margin: 2px;
    padding-top: 8px;
}

nav img {
    height: 25px;
    filter: drop-shadow(black 2px 2px);
}

#headimg{
    background-image: url(/images/code.jpg);
    height: 10vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: black solid 1px;
    border-bottom: black solid 2px;
    display: none;
}

main {
    min-height: 75vh;
    display: flex;
    flex-flow: row wrap;
}

main a{
    color: #bd135f;
}

main h2, h3 {
    margin-top: 10px;
    font-family: 'Anton', bold sans-serif;
    color:#32908F;
    text-shadow: black 2px 2px;
}

article{
    flex:1 0 100%;
    padding: 10px;
}

#grady {
    max-width: 40%;
    float: right;
    padding: 10px;
    width:20vh

}

aside{
    flex: 1 0 100%;
    padding: 10px;
}

#pls {
    display: none;
}

#sectone {
    display: none;
}

footer{
      border-top: 2px solid #eee;
      margin-top: 1vh;
      font-size: .8em;
      padding:5px;
 }

/* bigger phone */
@media screen and (min-width:321px) {
    header {
        height: 10vh;
        min-height: 80px;
    }

    #grady{
        width: 200px;
        max-width: 40vw;
    }
    #nav1 {
        height: 6vh;
        min-height: 40px;
    }
}
/* tablet style */
@media screen and (min-width:700px){
    #headimg{
        display:block
    }

    #grady {
        min-width: 200px;
    }

    header {
        height: 10vh
    }

    h1 {
        font-size: 1.5em;
    }

    #nav1 {
        height: 4.5vh;
    }
}

/* large tablet */
@media screen and (min-width:1000px) {
    header {
        max-height: 7vh;
    }

    p{
        font-size: 1.4em;
    }

    a{
        font-size: 1.2em;
    }
}

/*inbetween style*/
@media screen and (min-width:1026px) {
    #headimg {
        height: 15vh;
    }


    #nav1 img {
        position: relative;
        top: 0px;
    }

    #grady{
        min-width: 15vw;
    }
    p {
        font-size: 1.3em;
    }

    h2, h3{
        font-size: 1.8em;
    }

    main{
        min-height: 65vh;
    }

    main a {
        font-size: 1.3em;
        text-decoration: none;
    }

    li {
        font-size: 1.3em;
    }

    dd {
        font-size: 1.3em;
    }

}

/* desktop style */
@media screen and (min-width:1500px) {
    h1 {
        font-size: 2em;
    }

    header {
        min-height: 100px;
        /* max-height: 10vh; */
    }

    #nav1 {
        justify-content: center;  
        min-height: 50px;
    }

    #nav1 a{
        flex: 1 0 none;
        font-size: 1.2em;
    }

    #nav1 img {
        position: relative;
        top: 5px;
    }

    article {
        flex: 1 0 80%;
    }

    aside{
        flex: 1 0 20%;
        border-left: solid 1px black;
        background-color: rgba(4, 17, 59, 0.5);
    }

    #pls {
        display: block;
    }

    #sectone {
        display: block;
    }

    #pictwo{
       background-image: url(/images/seal.jpg);
       min-height: 600px;
       background-position: absolute;
       background-repeat: no-repeat;
       background-size: cover;
       background-position-y: -500px;
       border-top: black solid 3px;
       position: relative;
    }
   
    #goodboi {
       position: absolute;
       font-size:3.4em;
       text-shadow: slategrey 2px 2px ;
       top: 190px;
       right: 600px;
       color: rgb(22, 75, 175);
    }
   
    #sectone {
        min-height: 200px;
       margin: 5px 0px;
       position: relative;
    }
   
    #listone {
       position: relative;
       width: 30%;
       height: 260px;
       border: 2px solid wheat;
       list-style:decimal;
       padding-left: 60px;
       margin-left: auto;
       margin-right: auto;
       background-color: rgba(7, 97, 97, 0.486);
       transform: translate(300px,75px);
       border-radius: 45px;
       
    }
   
   or{
       font-size: 1.4em;
   }
   #sectone {
   
       margin: 50px;
       min-height: 400px;
       display: flex; /* this makes the block a flex parent */
   }
   
   #pictureone {
      background-color: aqua;
      max-height: 400px;
      width: 50%; 
      background-image: url(/images/sealtwo.jpg);
      background-position: center;
      background-position-y: -250px;
      border-radius: 45px;
      margin-right: 200px;
   }
}