body {
  background-color: #1d1c1c;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Architects Daughter';
  height: 100vh;
}

/*Welcome Area*/
.Grid-Container-Welcome{
  display: grid;
  grid-template-columns: 50% 50%;
  width: calc(100% - 60px);
  height: calc(100% - 120px);
  position: relative;
  top: 90px;
  margin: auto;
  background-image: url(https://drive.google.com/uc?id=1zS2wsh8_4YIRT7mXSjA4qKkoArbiHzeB);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: #00000059 0px 5px 15px;
}
.Header-ZombArchive, .Text-ZombArchive1, .Text-ZombArchive2{
  margin-left: 20px;
}
.Header-ZombArchive{
  color: #ffffff;
  font-weight: bolder;
  font-size: 50px;
}
.Text-ZombArchive1{
  color: #4a6bff;
  font-size: 30px;
}
.Text-ZombArchive2{
  color: #ffffff;
  font-size: 21px;
}

/* discord and twitch button in welcome text*/
.Button-Style span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 500ms;
  font-weight: bolder;
}
.Button-Style:hover span {
  padding-right: 45px;
}
.Button-Style:hover span:after {
  opacity: 1;
  right: 0;
}
.Discord-Icon span:after, .Twitch-Icon span:after {
  content: url("https://drive.google.com/uc?id=1EN26bXT_frURxPAs6UnMaeEbiNXB57pE");
  position: absolute;
  opacity: 0;
  top: -1px;
  right: -20px;
  transition: 0.5s;
}
.Twitch-Icon span:after{
  content: url("https://drive.google.com/uc?id=1s_cAV5-nG0P5l0TI2ktTiUoT8ETJ8kyd");
}

/* site links in welcome section */
.Site-Links-Container{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 65px 165px;
  position: relative;
  top: 35px;
  text-align: center;
}
.Header-Site-Links, .sitelinks-buttons{
  color: #ffffff;
  margin: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Header-Site-Links{
  grid-column: 1/5;
  background-color: #5c5c5c;
  height: 50px;
  font-size: 35px;
  box-shadow: #00000083 0px -1px 15px;
}
.sitelinks-buttons{
  background-color: #1b1b1b;
  border: 1px solid #b3b3b3;
  height: 150px;
  font-size: 25px;
  cursor: pointer;
}
.sitelinks-buttons:hover{
  background: #444444;
  transition: 0.2s;
}


/* media queries */
@media (max-width: 1350px) {
  body{
    overflow-y: auto;
  }
  .Grid-Container-Welcome{
    grid-template-columns: 100%;
    height: 1000px;
  }
  .Site-Links-Container{
    width: calc(100% - 20px);
    justify-self: center;
  }
}

@media  (max-width:710px) {
  .Grid-Container-Welcome{
    height: 1180px;
  }
  .Header-Site-Links{
    grid-column: 1/3;
  }
  .Site-Links-Container{
    grid-template-columns: 50% 50%;
    grid-template-rows: 80px 180px 180px;
    position: relative;
    top: 50px;
  }

}

@media (max-width: 650px) {
  .Grid-Container-Welcome{
    height: 1400px;
  }

}

@media (max-width: 460px) {
  .Grid-Container-Welcome{
    height: 1900px;
  }
  .Header-Site-Links{
    grid-column: 1;
  }
  .Site-Links-Container{
    grid-template-columns: 100%;
    grid-template-rows: 80px 180px 180px 180px 180px 180px 180px;
  }
 
}



@media  (max-width:425px) {

  .Header-ZombArchive, .Text-ZombArchive1{
    text-align: center;
    margin: 0px ;
  }
  .Header-ZombArchive{
    font-size: 45px;
  }
  .Text-ZombArchive1{
    font-size: 24px;
  }
  .Text-ZombArchive2{
    font-size: 18px;
  }

}

@media  (max-width:375px) {
  .Header-ZombArchive{
    font-size: 40px;
  }
  .Text-ZombArchive1{
    font-size: 22px;
  }
  .Text-ZombArchive2{
    font-size: 17px;
  }

}

@media  (max-width:325px) {
  .Header-ZombArchive{
    font-size: 35px;
  }
  .Text-ZombArchive1{
    font-size: 19px;
  }
  .Text-ZombArchive2{
    font-size: 15px;
  }

}