@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

@font-face {
  font-family: 'NES';
  font-style: normal;
  font-weight: normal;
  src: url('nes-logo.ttf') format('ttf'), url('nes-logo.woff') format('woff'), url('nes-logo.woff2') format('woff2');
}

:root {
  --title: 2rem 'NES';
  --subtitle: 1.3rem 'NES';
  --text: 1rem 'Electrolize';
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-flow: column;
  font: var(--text);
  text-align: center;
}

h2 {
  font: var(--title)
}

h3 {
  font: var(--subtitle);
}

h2, p {
  margin-bottom: 20px;
}

footer {
  background: url(images/bg3.png) bottom no-repeat, linear-gradient(0deg,#1e0820 90%, #201408 100%);
  background-size: contain;
}

.content {
  padding: 20px 25vw;
}

.front {
  padding: 20px;
  padding-bottom: 95vh;
  /*#bfa23e*/
  background: url(images/bg2.png) no-repeat bottom, url(images/parallaxbg.png) no-repeat bottom #d0d1f8;
  background-size: contain;
}

.gb {
  position: absolute;
  justify-items: center;
  /*padding-bottom: 250px;*/
  right: 30%;
  
  img {
    width: 40vw;
  }
  
  .gb-scr {
    width: 16vw;
    border-radius: 2px;
  }
  
  .gb-body {
    z-index: 1;
  }
  
  .screenshots {
    position: absolute;
    right: 30%;
    top: 15%;
    z-index: 1000;
    
    &::after{
      box-shadow: 0 0 5px black inset;
      content: '';
      display: block;
      width: 100%;
      height: 97%;
      position: absolute;
      border-radius: 2px;
      top: 0;
    }
  }
}

.store {
  background: url(images/stairs-l.png) repeat-y left top, url(images/stairs-r.png) repeat-y right top #130820;
  color: #d0d1f8;
  
  h2 {
    color: #3ebfbf;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  
  img {
    width: 200px;
    
    &:hover {
      cursor: pointer;
    }
  }
}

.trailer {
  justify-items: center;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  
  img {
    width: 400px;
  }
}

.features {
  display: flex;
  flex-flow: column;
  background: url(images/bg1.png) no-repeat bottom, linear-gradient(0deg,#bfa23e 85%, #130820 100%);
  background-size: contain;
  color: white;
  grid-gap: 20px;
  padding: 100px 30vw;
  padding-bottom: 250px;
  
  h2 {
    color: #201408;
  }
}

.scrshot {
  display: flex;
  grid-gap: 40px;
  
  img {
    width: 200px
  }
  
  ul {
    text-align: left;
  }
}

.reverse {
  flex-flow: row-reverse;
}

.wish {
  padding-top: 20px;
  background-color: #201408;
  color: #bfa23e;
}

.about-team {
  display: flex;
  grid-gap: 20px;
  text-align: left;
  color: #f8d0f3;
  padding: 200px 25vw 110px 10vw;
  
  img {
    width: 50px;
    height: 100%;
  }
  
  h2, h3 {
    color: #bf3eae;
  }
}

.team {
  width: 60%;
}

@media screen and (max-width: 600px) {
  
  h2 {
    font-size: 1.2rem;
  }
  
  h3 {
    font-size: 1rem;
  }
  
  .front {
    padding-bottom: 400px;
  }
  
  .gb {
    right: 8%;
    
    img {
      width: 80vw;
    }
    
    .gb-scr {
      right: 30%;
      width: 33vw;
    }
  }
  
  .content {
    padding: 20px 60px;
  }
  
  .store {
    background: url(images/stairs-l.png) repeat-y left top, url(images/stairs-r.png) repeat-y right top #130820;
    background-size: 15%;
  }
  
  .buttons {
    img {
      width: 150px;
    }
  }
  
  .trailer {
    iframe {
      width: auto;
    }
  }
  
  .logo {
    img {
      width: 250px;
    }
  }
  
  .scrshot {
    flex-flow: column;
    align-items: center;
    
    ul {
      li {
        list-style: inside;
      }
    }
  }
  
  footer {
    background-size: contain;
  }
  
  .about-team {
    flex-flow: column;
    padding: 40px 60px;
  }
  
  .team {
    width: auto;
  }
  
  .roles {
    display: flex;
    justify-content: space-between;
  }
  
  .features {
    background: url(images/bg1.png) no-repeat bottom, linear-gradient(0deg,rgba(191, 162, 62, 1) 90%, rgba(19, 8, 32, 1) 100%);
    background-size: contain;
    padding: 90px 60px;
  }
}