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



body {
    height: 200vh;
    background: url(agent-hero-bg.svg);
    background-color: rgb(0, 13, 61);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    transition: 0.5s;
    margin-top: 60px;  
}

.nav {
    background-color: rgba(0, 13, 61, 0.8);
    padding: 20px;
    position: fixed;
    top: 0;
    z-index: 10;
    opacity: 1; 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    
}

.fetch_logo{

    color: whitesmoke;
    padding-right: 30px;
    height: auto;
    font-size: 200%;
   
}


.nav-link {
    position: relative;
    color: white;
    text-decoration: none;
    display: inline;
    font-size: 1.4em;
    padding: 10px;
    border-radius: 35%; 
    transition: 0.3s;
    margin-right: 30px; 
    opacity: 150%;
  }
  
  .nav-link::before {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px; 
    height: 40px; 
    background-color: rgba(255, 255, 255, 0); 
    border-radius: 50%;
    transition: background-color 0.3s ease; 
    z-index: -1; 
  }
  
  .nav-link:hover::before {
    background-color: rgba(255, 255, 255, 0.3); 
  }
  .dropdown {
      float: left;
      overflow: hidden;
      transition: opacity 225ms ease-in-out;
    }
    
    .dropdown .dropbtn {
      font-family: Arial, sans-serif;  
      border: none;
      outline: none;
      font-size: 1.4em;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      transition: opacity 0.3s ease, background-color 0.3s ease;;
      margin: 0;
      text-decoration: none;
      position: relative;
    }
    
    .dropdown .dropbtn::before {
      content: ''; 
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 85px; 
      height: 50px; 
      background-color: rgba(255, 255, 255, 0); 
      border-radius: 50%;
      transition: background-color 0.3s ease; 
      z-index: -1; 
  }
  
  .dropdown .dropbtn:hover::before {
      background-color: rgba(255, 255, 255, 0.3); 
  }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #000;
      min-width: 160px;
      background-color: rgb(31, 9, 140);
      box-shadow: 0 2px 5px 0 rgb(255, 255, 255);
      transition: opacity 0.3s ease-in-out;
      z-index: 1;
      left: 50%; 
      transform: translateX(-222%);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    .dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;  
      display: block;
      text-align: left;
      transition: opacity 0.3s ease-in-out;
  
    }
    
    .dropdown-content a:hover {
      background-color: rgb(40, 27, 108);
      box-shadow: 0 0 5px 5px rgba(206, 205, 205, 0.7); 
   
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
      opacity: 1;
    }
    
/* Nabdropdown code from W3schools "not everything"*/

.top-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    font-weight: 400;
}

h1 {
    font-size: 5em;
    text-shadow: 0px 0px 50px rgba(0, 13, 61, 0.5);
    text-align: center;
    
    
}


.typewriter {
    font-weight: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    display: inline-block;
    overflow: hidden;
    border-right: .15em solid rgb(0, 13, 61, 0.5);
    white-space: nowrap;
    animation: typing 4.5s steps(40, end), blink-caret .75s step-end infinite;
    background: linear-gradient(to right, hsl(219, 100%, 41%), rgb(10, 230, 164));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    
    
}


p {
    color: aliceblue;
    font-size: 6em;
    text-shadow: 0px 0px 10px rgba(0, 13, 61, 0.5);
    text-align: center;
    width: 50%;
    font-family:'Balgin Text Regular';
    
}

.games-container {
    font-size: 1.4em;
    color: white;
    display: none;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    flex-wrap: wrap;
}

.game-item {
    width: calc(33.33% - 20px);
    height: 33.33%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.game-item:hover {
    transform: scale(1.1);
    box-shadow: 10px 10px 10px rgba(0, 13, 61, 0.2),
        -10px -10px 10px rgba(0, 13, 61, 0.2);
}



.game-item.game-1 {
    background-image: url('Warzone.jpg');
}

.game-item.game-2 {
    background-image: url('Minecraft.jpg');
}

.game-item.game-3 {
    background-image: url('Fortnite.jpg');
}

.game-item.game-4 {
    background-image: url('GTA.jpg');
}

.game-item.game-5 {
    background-image: url('Rainbow.jpg');
}

.game-item.game-6 {
    background-image: url('SSB.jpg');
}

.game-item.game-7 {
    background-image: url('RDR.jpg');
}

.game-item.game-8 {
    background-image: url('OW.jpg');
}

.game-item.game-9 {
    background-image: url('RL.jpg');
}


#loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000d3d;
    z-index: 1000;
  }
  
  .spinner {
    width: 95px;
    height: 95px;
    border: 15px solid #ffffff;
    border-top-color: #270c66;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  } 
  #content {
    visibility: hidden;
  }

  footer{
    background-color: #000d3d;
    position: relative;
    opacity: 0.5%;
    width: 100%;
  } 


/* Mobile View */
@media (max-width: 768px) {

  .top-container h1 {
    font-size: 1.5em;
  }

  .top-container p {
    font-size: 1em;
  }

  .games-container {
    grid-template-columns: 1fr;
  }

  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .nav .dropdown {
    display: none;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    top: auto;
    left: auto;
    background-color: transparent;
    width: auto;
  }

  .nav-link {
    padding: 15px;
    border-radius: 0;
  }

  .nav-toggle {
    display: none;
  }

}