html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      font-family: Helvetica;
}

.wrapper {
      height: 100vh;
      width: 100%;
}

.pattern {
      position: absolute;
     
      width: 70%;
      height: 95vh;
      background: url(BG_Pattern.png) no-repeat 50% 50%;
     
      opacity: 0.3;
}

.nav {
      width: 100%;
      height: 80px;
      position: absolute;
      

}

.logo {
      font-size: 18px;
      margin: 0.2em 2em;
      line-height: 80px;
      position: absolute;
}

.menu {
      position: absolute;
      height: 80px;
      right: 120px;
}

.menu ul {
      list-style: none;
}

.menu ul li {
      display: inline-block;
      margin: 1em 0;
      padding: 0 30px;
      font-size: 15px;
}




.cart {
      position: fixed;
      font-size: 16px;
      margin: 0.2em 1em;
      line-height: 80px;
      right: 20px;
}

.box-1 {
      position: absolute;
      width: 60px;
      height: 60px;
      background: none;
      border: 2px solid paleturquoise;
      top: 10%;
      left: 15%;
      z-index: -1;
      transform: rotate(60deg);
}

.box-2 {
      position: absolute;
      width: 120px;
      height: 120px;
      background: paleturquoise;
      
      top: 54%;
      left: 28%;
      z-index: -1;
      transform: rotate(-110deg);
}

.box-3 {
      position: absolute;
      width: 80px;
      height: 80px;
      background: none;
      border: 2px solid paleturquoise;
      top: 34%;
      left: 78%;
      z-index: -1;
      transform: rotate(30deg);
}

.runner img {
      width: 70%;
      z-index: 2;
      margin-top: -20px;
}

.title-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: Anton;
      font-size: 90px;
      color: rgba(0,0,0,0);
      font-style: italic;
      text-transform: uppercase;
      z-index: -1;
      -webkit-text-stroke: 2px paleturquoise;
      opacity: 0;
}

.title-1 {
      position: absolute;
      top: 38%;
      left: 30%;
      transform: translate(-50%, -50%);
      font-family: Anton;
      font-size: 90px;
      color: paleturquoise;
      padding-right: 20px;
      font-style: italic;
      text-transform: uppercase;
      z-index: 1;
      opacity: 0;
      /* -webkit-text-stroke: 2px orange; */
}

.content {
      position: absolute;
      top: 64%;
      left: 57%;
      width: 36%;
      color: grey;
      font-weight: lighter;
      font-size: 14px;
      line-height: 24px;
}


button {
      margin-top: 6px;
      background: paleturquoise;
      color: #fff;
      padding: 20px 30px;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 10px;
      border: none;
}
button:hover{
      background: white;
      color:black;
      border: solid 3px paleturquoise;
      cursor: pointer;
}

.media {
      position: absolute;
      bottom: 210px;
}

.media ul {
      position: absolute;
      list-style: none;
}

.media ul li {
      color: grey;
      padding: 10px 0;
}

.media ul li:hover{
      cursor: pointer;
}


@media(max-width: 900px) {
      

      .pattern {
            display: none;
      }

      .runner img {
            display: none;
      }

      .title-1, .title-2 {
            font-size: 50px;
      }

      .title-1 {
            left: 20%;
            top: 40%;
      }

      .title-2 {
            left: 50%;
            z-index: 1;
      }

      

      .content p {
            display: none;
      }

      .box-2 {
            top: 70%;
      }

      .content button {
            position: fixed;
            right: 3em;
            bottom: 4em;
            z-index: 1;
      }
}