:root {
  --ecru: #d2cfc8;
  --dark: #211e16;
  --beige: #bcaea2;
  --burnt: #be4c13;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  background-color: var(--ecru);
  position: relative;
  z-index: -99;
}

main {
  background-color: var(--ecru);
}

a {
  color: var(--dark);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  font-family: "Syne", sans-serif;
}

h1, h2, h3 {
  text-align: center;
  font-family: "Syne", sans-serif;
  font-weight: 600;
  color: var(--dark);
}

h1 {
  font-size: 4rem;
  margin: 5px;
}

#portfolio h1, #gallery h1 {
  color: var(--burnt);
}

p {
  font-size: 0.9rem;
  line-height: 1.2rem;
  color: var(--dark)
}

button {
  background-color: var(--burnt);
  color: var(--ecru);
  border-radius: 5px;
  border: 0px;
  padding: 10px 20px;
  text-align: center;
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: 1rem;
}




/******* MENU *******/
header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 2;
}

header.open {
  background-color: transparent;
}

nav {
  width: calc(100vw - 40px);
  height: 50px;
  padding: 0px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav h2 {
  font-size: 34px;
  margin: 5px 0 0 0;
  transition: 1s ease-in-out;
}

.nikoline_elbaek.light {
  color: var(--ecru)!important;
}

.burger_menu {
  width: 30px;
  height: 25px;
  margin: 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.line1 {
  width: 100%;
  height: 3px;
  background-color: var(--dark);
  transition: 1s ease-in-out;
}

.line2 {
  width: 100%;
  height: 3px;
  background-color: var(--dark);
  transition: 1s ease-in-out;
}

.line3 {
  width: 100%;
  height: 3px;
  background-color: var(--dark);
  transition: 1s ease-in-out;
}

.line1.open {
  transform: translateY(11px) rotate(45deg) scale(1.2);
}

.line2.open {
  transform: scale(0);
}

.line3.open {
  transform: translateY(-11px) rotate(-45deg) scale(1.2);
}

.line1.light {
  background-color: var(--ecru);
}

.line2.light {
  background-color: var(--ecru);
}

.line3.light {
  background-color: var(--ecru);
}

.menu_content img {
  width: 3rem;
  float: right;
  margin-right: 10px;
}

.menu_content h1 {
  color: var(--ecru);
  text-shadow: 2px 2px 10px var(--dark);
  font-size: 3rem;
  text-align: right;
}

.menu_content {
  width: 600px;
  height: 30vh;
  position: fixed;
  top: 35vh;
  right: -600px;
  z-index: 2;
  transition: 1s ease-in-out;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.menu_content.open {
  right: 15px;
  width: 95%;
}

.menuoverlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--dark);
  opacity: 0%;
  transition: opacity 1s;
}
.menuoverlay.open {
  display: block;
  opacity: 70%;
}




  /******* FOOTER *******/
  footer {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--dark);
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: -99;
    color: var(--ecru);
    text-align: center;
  }

  footer h2, footer h3, footer p, footer a {
    color: var(--ecru);
  }

  footer a {
    font-weight: 600;
  }
  
  .some {
    padding: 20px 0;
    margin: 0 20px;
  }
  
  .some1 {
  width: 40px;
  height: 40px;
  }
  
  .col1 {
    padding: 20px 0;
    margin: 0 20px;
  }
  
  .col2 {
    padding: 20px 0;
    margin: 0 20px;
  }

  .copy {
    font-size: 0.8rem;
    color: var(--beige);
  }
  
  .hide {
    display: none;
    z-index: -1;
  }

  .otw {
    margin-top: 100px;
  }



    /*** MOBILE ***/
    @media only screen and (max-width: 600px) {
      header {
        background-color: var(--ecru);
      }

      nav {
        padding: 6px 6px;
        width: calc(100vw - 12px);
      }
      
      nav h2 {
        font-size: 24px;
      }

      h1 {
        font-size: 3rem;
      }

      .menu_content h1 {
        font-size: 2.5rem;
        right: -300px;
      }

      .burger_menu {
        width: 25px;
        height: 20px;
      }
      .line1.open {
        transform: translateY(9px) rotate(45deg) scale(1.2);
      }
      
      .line3.open {
        transform: translateY(-9px) rotate(-45deg) scale(1.2);
    }
  }