:root {

  /* colors */
  --vs-blue: #71c1f9;
  --vs-cream-white: #FAF7F0;
  --vs-orange: #FF6D28;

  /* fonts */
  --vs-main-font: 'Nunito', sans-serif;
  --vs-fun-font: 'Kolker Brush', cursive;

  --vs-bold: 800;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background: #231936;
  position: relative;
}

/* Background image */

.landing {
  background: url(../images/portal_of_glory_web.jpg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100%;
} 

  /* landing page */

  .landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 125px;
    margin-bottom: 125px;
    gap: 100px;
    visibility: visible;
  }

    .headline {
      
      font-family: var(--vs-fun-font);
      font-weight: var(--regular-custom);
      font-size: 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .headline-sub {
      text-decoration: none;
      color: var(--vs-cream-white);
    }

    .headline-sub:hover {
      color: var(--vs-orange);
      cursor: pointer;
    }

    .headlines-sub-container {
      display: flex;
      justify-content: space-around;
      gap: 200px;
    }

  /* main class set ups */

  .stories,
  .coding,
  .games,
  .about {
    position: absolute;
    visibility: hidden;
  }

    .stories-headline, 
    .coding-headline,
    .games-headline {
      position: relative;
      color: var(--vs-orange);
      font-family: var(--vs-fun-font);
      font-weight: var(--regular-custom);
      font-style: italic;
      font-size: 4rem;
      text-align: center;
    }

    .stories-paragraph, 
    .coding-paragraph,
    .games-paragraph,
    .about-paragraph {
      font-family: var(--vs-main-font);
      color: var(--vs-cream-white);
      font-size: 1.5rem;
      padding: 15px;
      max-width: 400px;
      letter-spacing: 1.5px;
    }

    .call-to-action {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .btn-stories, .btn-home, .btn-coding, .btn-nft {
      padding: 8px 16px;
      font-weight: var(--vs-bold);
      background: var(--vs-orange);
      color: var(--vs-deep-purple);
      border-radius: 5px;
      border: none;
    }

    .btn-stories:hover, .btn-home:hover, .btn-coding:hover, .btn-nft:hover {
      cursor: pointer;
      background: var(--vs-cream-white);
    }

    .btn-stories a {
      color: var(--vs-deep-purple);
      text-decoration: none;
    }

    /* modified classes */

    .about-paragraph {
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .about-img {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 15px;
    }

    .social-icons-item {
      color: var(--vs-blue);
    }

      .social-icons-item:hover {
        color: var(--vs-cream-white);
      }

    .opensea-container {
      display: flex;
      justify-content: center; 
      align-items: center;
      padding: 1.5px;
    }

      .opensea {
        border-radius: 2.5px;
      }

  /* Copyrights and mentions */
  .copyrights-and-mentions {
    visibility: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--vs-blue);
    opacity: .5;
  }

    .mentions {
      display: flex;
      gap: 10px;
    }

    .mentions a {
      color: var(--vs-cream-white);
      text-decoration: none;
    }

    .mentions a:hover {
      cursor: pointer;
      color: var(--vs-orange);
    }

/* tablets fix */

@media (min-width: 600px) {

  .landing {
    height: 100vh;
  }

}

/* cell phones adjusts */

@media (max-width: 600px) {

  .headlines-sub-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
  }

  .stories {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stories-paragraph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0px;
  }

  .games-paragraph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0px;
  }

  .about-paragraph {
    max-width: 350px;
  }

  .copyrights-and-mentions {
    gap: 10px;
  }

  .mentions {
    flex-direction: column;
    gap: 2.5px;
  }

    .web-icons {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

  .author-name {
    display: flex;
    justify-content: center;
  }


}