html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Libre Franklin";
    background-color: #FAF9F6;
}

h2 {
    font-size: 32px;
    margin: 5% 0 5% 0;
    text-align: center;
}

a {
    color: black;
    text-decoration: none;
}

@media only screen and (min-width: 0px) and (max-width: 1030px) {
    .navbar {
        width: 100%;
        height: 50px;
        padding-top: 10px;
        border-bottom: 1px solid rgba(0,0,0,0.5);
        box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        background-color: #1B2617;
        border-radius: 0 0 30px 30px;
    }

    .navbrand {
        width: 85%;
        display:inline-block;
        margin: 0;
        font-size: 10px;
    }

    .navbrand h1 {
        padding-left: 5%;
        color: #FAF9F6;
        text-shadow: 1px 1px 10px #1B2617;
        transition: color 0.3s;
    }

    .navbrand h1:hover {
        color: #B8BDB5;
    }

    .overlay {
        height: 0;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #1B2617;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .overlaymenu {
        position: relative;
        top: 10%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }

      .overlay a {
        padding: 20px;
        text-decoration: none;
        font-size: 36px;
        color: #FAF9F6;
        display: block;
        transition: 0.3s;
      }
      
      .overlay a:hover, .overlay a:focus {
        color: #B8BDB5;
      }
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }

      .hamburger {
        margin-top: 5px;
        margin-right: 5%;
        float: right;
        color: #FAF9F6;
        text-shadow: 1px 1px 10px #1B2617;
        transition: color 0.3s;
        cursor: pointer;
      }

      .hamburger:hover {
        color: #B8BDB5;
      }
}

@media only screen and (min-width: 1030px) {
    .navbar {
        width: 100%;
        height: 60px;
        padding-top: 10px;
    }

    .navbrand {
        margin-left: 5%;
        height: 50px;
        display:inline-block;
        font-size: 10px;
        border-radius: 30px;
        background-color: #1B2617;
        transition: background-color 0.3s, color 0.3s;
        color: #FAF9F6;
    }

    .navbrand:hover {
        background-color: #FAF9F6;
        color: #1B2617;
    }

    .navbrand h1 {
        width: 300px;
        display:inline-block;
        height: 30px;
        text-align: center;
    }

    .overlay {
        padding-right: 50px;
        padding-top: 15px;
        display: inline-block;
        float: right;
    }

    .overlaymenu a {
        color: #1B2617;
        background-color: #FAF9F6;
        transition: color 0.3s, background-color 0.3s;
        border-radius: 30px;
    }

    .overlaymenu a:hover {
        color: #FAF9F6;
        background-color: #1B2617;
    }

    .overlay a:hover, .overlay a:focus {
        color: #FAF9F6;
      }

    .overlaycontent {
        text-align: center;
        padding: 10px;
        margin: 10px;
        font-weight: bold;       
        border-radius: 30px;
        background-color: #FAF9F6;
    }
    .closebtn {
        position: absolute;
        top: -50px;
        height: 0;
        width: 0;
    }

    .hamburger {
        position: absolute;
        top: -50px;
        width: 0;
        height: 0;
    }
}
/* comingsoon */
.comingsoon {
    height: 50vh;
    color: black;
    font-size: 32px;
    text-align: center;
    padding: auto;
}

.comingsoon a {
    background-color: #1B2617;
    padding: 20px;
    color: #FAF9F6;
    border-radius: 80px;
    border: 0;
    transition: color 0.5s, background-color 0.5s, border 0.5s;
}

.comingsoon a:hover {
    color: #1B2617;
    background-color: #FAF9F6;
    border: 3px solid #1B2617;
}

/* footer */
@media only screen and (min-width: 0px) {
    footer {
        display: grid;
        margin-top: 5%;
        color: #FAF9F6;
        background-color: #1B2617;
        max-height: 500px;
        padding: 0 10% 2% 10%;
        overflow: hidden;
    }

    .footerBrand {
        grid-row: 1;
        text-align: center;
        margin: 0;
        max-height: auto;
        color: #FAF9F6;
        font-size: 4vw;
    }

    .footerBrand h1 {
        transition: color 0.3s;
    }
    .footerBrand h1:hover {
        color: #B8BDB5
    }
    
    .footerbox1 {
        display: block;
        grid-row: 2;
        color: #FAF9F6;
        padding: 0vw;
        text-align: center;
        width: 100%;
        height: auto;
        list-style-type: none;
    }

    .footerbox1 li {
        display: inline;
        padding-top: 3vw;
    }

    .footerbox1 h5 {
        display: inline;
        color: #FAF9F6;
        width: auto;
        font-size: 0;
        transition: color 0.3s;
    }

    .footerbox1 h5:hover {
        color: #B8BDB5;
    }

    .footerbox1 a {
        padding: 10px;
        color: #FAF9F6;
        transition: color 0.3s;
    }

    .footerbox1 a:hover {
        color: #B8BDB5;
    }

    .footerbox2 {
        grid-row: 3;
        font-size: 3vw;
        text-align: center;
    }
}

@media only screen and (min-width: 767px) {
    footer {
        max-height: 1000px;
    }

    .footerBrand {
        grid-row: 1;
        font-size: 24px;
        max-height: auto;
        padding: 0;
    }

    .footerBrand h1 {
        transition: color 0.3s;
    }
    .footerBrand h1:hover {
        color: #B8BDB5
    }

    .footerbox1 {
        display: block;
        grid-row: 2;
        margin: 0;
    }

    .footerbox1 a {
        display: block;
        color: #1B2617;
        padding: 5px;
    }

    .footerbox1 a:hover {
        color: #1B2617;
    }
    
    .footerbox1 h5 {
        font-size: 15px;
        padding: 0;
    }

    .footerbox1 li {
        padding-top: 0;
    }

    .footerbox1 i {
        width: 0;
    }

    .footerbox2 {
        margin-top: 10px;
        text-align: center;
        font-size: 10px;
    }
}