html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(29, 28, 28);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Architects Daughter';
}


/*IMG Loader*/
.Loader{
  background-color: rgb(18, 29, 41);  
  width: 100%;
  height: 100%;
  z-index: 3;
}

#loading-bar-spinner {
  width: 90px;
  height: 90px;
  border:  solid 6px transparent;
  border-top-color:  #c9dfde;
  border-left-color: #000000;
  border-radius: 50%;
  margin: auto;
  position: relative;
  top: 25%;
  animation: loading-bar-spinner 1200ms linear infinite;
}

@keyframes loading-bar-spinner {
0%   { transform: rotate(0deg);   transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}


.Game-Navigation-Container{
  display: flex;
  padding: 16.5px;
  color: #FFF;
  font-weight: bolder;
  margin-left: 20px;
}
.Game-Navigation{
  margin-right: 25px;
  text-decoration: none;
  color: #FFF;
  cursor: pointer;
}
.Game-Navigation:hover{
  text-shadow: 0 0 10px #ffffff;
  color: white;
  transition: 0.5s;
  border-bottom: 1px solid white;
}
  

/* ANCHOR Grid-Container [WaW BO1 BO2 BO3]*/
.Grid-Container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-left: 20px;
  margin-right: 30px;
  color: white;
  position: relative;
}
.Grid-Container:nth-last-of-type(3){
  top: 120px;
}
.Grid-Container:nth-last-of-type(2){
  top: 180px;
}
.Grid-Container:last-of-type{
  top: 240px;
}
.Header-Style{
  grid-column: 1/5;
  background-color: #2f446b;
  font-size: 45px;
  text-align: center;
  border: 2px solid white;
  margin-bottom: 25px;
}


/*Grid Element Style*/
.Element-Style { 
  background-size: cover;
  height: 230px;
  font-size: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  color: #FFF;
  transition: all 0.5s;
  position: relative;
  cursor: pointer;
}
.Element-Style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.Element-Style:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.Element-Style::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.Text-Style {
  border: 2px solid; 
  border-radius: 5px;
  background: rgb(0, 0, 0); 
  padding-left: 20px;
  padding-right: 20px;
  display: none;
}


/*ANCHOR WaW Maps*/
.Nacht-WaW-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=19EVkPswOdqoZOkpNFY5iDdPQ2DBX4Ysp);
}
.Verrückt-WaW-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1UJ5x1G4J1XiMViAuVGgXLWDm1ig6f6MD);
}
.Shino-WaW-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1wlBIlxEhurDewo9hnLzgFdu_c6xHmomZ);
}
.DerRiese-WaW-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=19WQAbTxKZhW8FwMoe74QXDMa429mb-ww);
}

/*ANCHOR BO1 Maps*/
.Kino-der-Toten-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1HTc04Jt6TImGiF4IISoI4BvysSRGSHwo);
}
.Five-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1bLbPIK5jP-j7Ip9k9qmHYG86qflA6pPf);
}
.Ascension-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1sHRWPXxWNI4T-2Gzrsx20LzdE-g515T7);
}
.Call-of-the-Dead-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1XFbol5lFInCZ9W6aq6JDCF4JIik-PFvs);
}
.Shangri-la-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1Q6Ul-wH6w7AYkTn7jwAnACZZTOp2-X3P);
}
.Moon-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1ci2zM2HeLnUQ6katZWhi8NJHH3Z2dS3A);
}
.Nacht-der-Untoten-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1AxoUiIWBCKijnYvhO5vQPNXvyY3cllg1);
}
.Verruckt-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1wcIRsYBis1vnmA4mKiHqGqHTwMpl06Ux);
}
.Shi-No-Numa-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1ZSOlMbk-6KjfDNmv_s-U0fhfVjTPVC9w);
}
.Der-Riese-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1-gq4Yq5q6n6CT3smWOCswR1DieA4HSer);
}

/*ANCHOR BO2 Maps*/
.Tranzit-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1JZMPWQPAQlbgNX9nFgmrLNvZ8osSZK1c);
}
.Bus-Depot-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=12ZMFOWTYV15f17luOuLVOo3baE4ReXBE);
}
.Town-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1jNrITNJeHIPfSo6DLQeRhts8skWMyz1y);
}
.Farm-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1Qn1kNiuiZ7MnYQHbuR-FxgPPgHHzx3Cl);
}
.Nuketown-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1BW0Ihb6jEejWBlskKzQ91b7Ci8hBTWoo);
}
.Die-Rise-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1hNM6A_U7AX2rS-Lydh3Fr2IAEYf2xcuM);
}
.Mob-of-the-Dead-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1LYoHlncBZLVK--yG10OcBGmlzBPD8nHx);
}
.Buried-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1ElxrlJPxMdHN6EQSrX_I7IXpKOdq-rYQ);
}
.Origins-Background-IMG {
  background-image: url(https://drive.google.com/uc?id=1VyMpPXTcY0grNai62a7KyR8iqV59tuNl);
}


/* ANCHOR Media Queries for responsive Design*/

@media (max-width:1200px) {
  .Header-Style{
    grid-column: 1/4;
  }
  .Grid-Container{
    grid-template-columns: 33.3333% 33.3333% 33.3333%;
  }    

}

@media (max-width:900px) {
  .Header-Style{
    grid-column: 1/3;
  }
  .Grid-Container{
    grid-template-columns: 50% 50%;
  } 

}

@media (max-width:630px) { 
  .Header-Style{
    font-size: 20.5px;
  }

  .Text-Style{
    font-size: 23px;
  }

}

@media (max-width:550px) {
  .Header-Style{
    grid-column: 1/2;
  }
  .Grid-Container{
    grid-template-columns: 100%;
  } 

}