* {
    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;
}

h2 {
    text-align: center;
    font-family: 'Anton', sans-serif;
}

#clickme{
    background-color: rgba(0, 0, 0, 0.562);
}

#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;
}

#nav1 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);
}


main {
    min-height: 80vh;
    display: flex;
    flex-flow: row wrap;
    width: 100vw;
}


#nav2 a {
    color: #bd135f;
    text-decoration: none; 
    text-shadow: black 2px 2px;
    display: block;
    background-color: rgb(53, 51, 49);
    flex: 1 0 100%;
    width: 100vw;
    text-align: center;
    margin: 20px 0px;
    padding: 15px 0px;
}

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

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

    header {
        height: 10vh;
        min-height: 80px;
    }

    #nav1 {
        height: 6vh;
        min-height: 40px;
    }
}
/* tablet style */
@media screen and (min-width:700px){

    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;
    }
    footer {
        display: block;
        
    }
}



/*inbetween style*/
@media screen and (min-width:1026px) {


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

    p {
        font-size: 1.3em;
    }

    main{
        min-height: 80vh;
    }

    #nav1 {
        min-height: 50px;
    }

    #nav2 {
        margin-top: 30px;
    }

    #nav2 a{
        margin: 20px 30vw;
        width: 40vw;
        border-radius: 25px;
        border: #eee solid 1px;
    }

    #nav2 a:hover{
        border: solid black 1px;
        background-color: white;
        color: red;
        text-shadow: none;
    }

    main{
        min-height: 1000px;
        max-height: 100vh;
    }

}

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

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

    main{
        min-height: 1000px;
        max-height: 100vh;
    }
    #nav1 {
        justify-content: center;  
        min-height: 50px;
    }

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

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

}