body {
      font-family: Roboto;
      margin: 0;
      background: #343233;
}

.container {
      max-width: 1200px;
      text-align: center;
      margin: 0 auto;
      padding: 0 3rem;
}

@media screen and (max-width: 580px) {
      .container {
            padding: 0 2rem;
      }
}

h1, h2, h3 {
      font-weight: 300;
      margin-top: 0px;
      margin-bottom: 8px;
}

h1 {
      font-size: 54px;
      color: #FFD152;
}

h2 {
      font-size: 42px;
      color: #8D8273;
}

h3 {
      font-size: 28px;
      color: #8D8273;
}

h4 {
      font-size: 20px;
      color: #8D8273;
      font-weight: 400;
      margin-bottom: 0;
}

p {
      margin: 20px 0;
      color: #8D8273;
      line-height: 24px;
}

img {
      margin: 20px 0;
      width: 100%;
}

button {
      outline: none;
      border: none;
      margin: 18px 0;
      padding: 20px 40px;
      background: #FFD152;
      font-family: Roboto;
      color: #282627;
      letter-spacing: 2px;
      font-weight: 800;
      text-transform: uppercase;
}

i {
      font-size: 42px;
      letter-spacing: 14px;
}

/* fixed navigation */

nav {
      height: 60px;
      width: 100%;
      background-color: #343233;
      position: fixed;
}

nav ul {
      padding: 0;
      margin: 0;
}

nav li {
      display: inline;
      float: left;
}

nav a {
      display: inline-block;
      width: 100px;
      font-weight: 400;
      text-align: center;
      text-decoration: none;
      padding: 20px 0;
      color: #8D8273;
      transition: 1s;
}

nav a:hover {
      color: #6C6C6C;
}

nav a#toggle-btn {
      display: none;
}

@media screen and (max-width: 580px) {
      nav {
            height: auto;
            border-bottom: 0;
      }

      nav ul {
            display: none;
            height: auto;
      }

      nav li {
            width: 100%;
            float: left;
            position: relative;
      }

      nav a {
            text-align: left;
            width: 100%;
            text-indent: 25px;
            background: #282627;
            color: #8D8273;
      }

      nav a:hover {
            color: #6C6C6C;
      }

      nav a#toggle-btn:after {
            content: "|||";
            transform: rotate(-90deg);
            width: 40px;
            height: 40px;
            display: inline-block;
            position: absolute;
            right: 5px;
            top: 20px;
      }

      nav a#toggle-btn {
            display: block;
            background: #282627;
            color: #8D8273;
            width: 100%;
            position: relative;
      }

      .menu:before, .menu:after {
            content: "";
            display: table;
      }

      .menu:after {
            clear: both;
      }

      .menu {
            zoom: 1;
      }
}

/* landing-page content */

.section-hero {
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow-y: hidden;
      background-image: url(https://cdnb.artstation.com/p/assets/images/images/005/674/033/large/ching-yeh-god.jpg?1492914710); 
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: auto;
      background-origin: content-box;
      background-size: 100% 100%;
      background-size: cover;

}

.section-hero .container {
      margin-top: 34vh;
}

.section-hero h2 {
      color: #8D8273;
}

@media screen and (max-width: 580px) {
      .section-hero h2 {
            font-size: 24px;
      }

      .section-hero p {
            display: none;
      }
}

/* overview */

#overview {
      background: #282627;
      padding: 8rem 0;
}

.overview-content {
      display: grid;
      grid-gap: 80px;
      grid-template-columns: repeat(2, 1fr);
      text-align: left;
}

@media screen and (max-width: 580px) {
      .overview-content {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: left;
      }
}

/* about section */

#about {
      padding: 8rem 0;
}

#about h2 {
      text-transform: uppercase;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 12px;
      margin-bottom: 2em;
}

/* features */

#features {
      background: #282627;
      padding: 8em 0;
}

.features-content {
      display: grid;
      grid-gap: 80px;
      grid-template-columns: repeat(2, 1fr);
      text-align: left;
}
@media screen and (max-width: 580px) {
      .features-content {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: left;
      }
}

/* subscribe section */

#subscribe {
      background: #343233;
      padding: 8em 0;
}

#subscribe h2 {
      color: #8D8273;
}

#subscribe input {
      width: 80%;
      margin: 2em 0;
      background: none;
      border: 1px solid #8D8273;
      padding: 20px;
      font-family: Roboto;
      font-weight: 400;
      color: rgb(211, 165, 100);
}

#subscribe input:focus {
      border: none;
      outline: none;
      border: 2px solid #8D8273;
}

input::placeholder {
      color: #8D8273;
      text-transform: uppercase;
      font-weight: 400;
}

/* footer */

footer {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 1em 0;
      background: #282627;
}

footer span {
      color: #8D8273;
      font-weight: 600;
}
.fa {
      padding: 10px;
      font-size: 10px;
      width: auto;
      text-align: center;
      text-decoration: none;
      margin: 5px 2px;
    }
    
    .fa:hover {
        opacity: 0.7;
    }
    
    .fa-facebook {
      background: #3B5998;
      color: white;
    }
    .fa-twitter {
      background: #55ACEE;
      color: white;
    }
    .fa-linkedin {
      background: #007bb5;
      color: white;
    }
    .fa-instagram {
      background: #125688;
      color: white;
    }