@font-face {
  font-family: 'Afterglow-Regular';
  src: url('/fonts/Afterglow-Regular.ttf');
  font-weight: normal;
}

@font-face {
  font-family: 'SourceSans';
  src: url('/fonts/SourceSans3-Regular.ttf');
  font-weight: normal
}

body {
  background: #020e27;
  font-family: 'SourceSans', sans-serif;
}

.hero-image {
  position: fixed; /* Anchors the container to the top */
  width: 100%;
  z-index: 1; /* Ensures image stays behind text */
}

img {
  width: 100%;
}

.content {
  width: 100%;
  margin: 0 auto;
  background-color: #030d25;
  opacity: 0.9; 
  position: relative;
  z-index: 2; /* Ensures image stays behind text */
}

@media only screen and (min-width: 768px) {  /* Target screens wider than 768px */
  main {
    background-color: #020e27;
    padding-top: 500px; 
  }
  
  section h2 {
    font-size: 60px;
    font-weight: normal;
    margin-top: 20px;
    padding-top: 50px;
    text-align: center;
    color: #00c9ff; 
    font-family: 'Afterglow-Regular', serif;
  }
  
  section p {
    font-size: 24px;
    text-align: center;
    line-height: 2;
    color: white;
    font-family: 'SourceSans', sans-serif;
    padding-left: 10%;
    padding-right: 10%;
  }

  
  .p4g-mockups {
    padding-top: 500px;
    width: 100%; /* Scales image to be 100% of the viewport width */
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures image stays behind text */
    opacity: 1 !important;
  }

}

@media only screen and (max-width: 768px) {  /* Target screens 768px or narrower */
    main {
    background-color: #020e27;
    padding-top: 110px; 
  }
  
    section h2 {
      font-size: 48px;
      font-weight: normal;
      margin-top: 20px;
      padding-top: 50px;
      text-align: center;
      color: #00c9ff; 
      font-family: 'Afterglow-Regular', serif;
    }
    
    section p {
      font-size: 24px;
      text-align: center;
      line-height: 2;
      color: white;
      font-family: 'SourceSans', sans-serif;
  }

     .p4g-mockups {
      padding-top: 200px;
      width: 100%; /* Scales image to be 100% of the viewport width */
      margin: 0 auto;
      position: relative;
      z-index: 2; /* Ensures image stays behind text */
      opacity: 1 !important;
    }
}


#closing {
  padding-top: 50px;
  padding-bottom: 50px;
}

a {
  color: white;
}

.colored-sentence {
  color: #92fe9d; 
}

button {
  background-color: #00c9ff; 
  color: #020e27;
  padding: 10px 20px;
  font-family: 'SourceSans', sans-serif;
  font-size: 24px;
  border: none;
  cursor: pointer;
  display: inline-block;
  border-radius: 5px; /* Adjust value for sharper or smoother curves */
}

/* Optional hover effect */
button:hover {
  background-color: #92fe9d;
}