/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-= STYLES DESIGNED AND BUILT BY SEYEON THOMPSON -=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

header {
  width: 100vw;
  height: 12vh;
}

#logo {
  font-family: cortado, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30pt;
  color: #FFCD05;
  padding:  2%;
  float: left;
  display: inline-block;
}

#logo a {
  color: #FFCD05;
  text-decoration: none;
}

#topnav {
  padding: 3%;
  float: right;
  display: inline-block;
}

#topnav li {
  font-family: Helvetica, sans-serif;
  font-size: 10pt;
  display: inline;
}

#topnav li a {
  display: inline-block;
  color: #FFFFFF;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}

#topnav li a:hover {
  text-decoration: underline;
}

button#hamburger-button {
    position: fixed;
    background-color: #FFCD05;
    border: 0.2vw solid #098346;
    font-size: 5vw;
    line-height: 5vw;
    padding: 0.2vw 0.5vw 0.5vw 0.5vw;
    margin-left: 50vw;
    border-radius: 25%;
    outline: none;
  }

    button#hamburger-button:hover {
      color: #FFFFFF;
      background-color: #F57E20;
      border-color: #F57E20;
    }

    button#hamburger-button:active {
      color: #FFFFFF;
      background-color: #F57E20;
      border-color: #F57E20;
    }

      figure#dim-the-lights {
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0;
          transition: opacity 1s;
      }

      .dim-the-lights {
        opacity: 1;
        background-color: rgba(0,0,0,0.5);
      }

  nav {
    position: fixed;
    left: -30vw;
    height: 80vh;
    font-size: 3vw;
    line-height: 4vw;
    background-color: #F57E20;
    padding: 20vh 5vw 0 5vw;
    transition: 1s transform;
  }

    a, a:hover {
      text-decoration: none;
      color: #FFFFFF;
    }

    .slide-drawer {
      transform: translateX(30vw);
    }



hr {
  border: 1px solid #FFCD05;
}

main {
  padding-top: 8%;
  padding-bottom: 15%;
}

body {
  background-color: #098346;
  text-align: center;
}

h1 {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 40pt;
  color: #FFFFFF;
  padding-top: 1%;
  padding-bottom: 1%;
}

h2 {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20pt;
  color: #FFCD05;
  padding-bottom: 2%;
}

h3 {
  font-family: Helvetica, sans-serif;
  font-size: 13pt;
  color: #FFFFFF;
  text-align: left;
  padding-right: 2%;
  padding-bottom: 20%;
}

#couple {
  display: inline-block;
  float: left;
  width: 50vw;
  padding-left: 2%;
  padding-right: 1%;
}

.container {
  position: relative;
  width: 40%;
  display: inline-block;
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFCD05;
}

.container:hover .overlay {
  opacity: 0.9;
}

.text {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text a {
  text-decoration: none;
  color: #FFFFFF;
}

footer {
  background-color: #FFCD05;
  text-align: center;
  padding: 1%;
  font-family: Helvetica, sans-serif;
  font-size: 10pt;
  color: #FFFFFF;
}