.App {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: auto;
}
:root {
  --bodybg: #2c3e50;
  --darkbg: #1d2935;
  --lightbg: #3a5168;
  --lightestbg: #6c95be;
  --themecolor: #07100e;
  --textcolor: #ecf0f1;
  --headfont: "EB Garamond", serif;
  --shadegreen: rgb(40, 240, 157);
  --shadeblue: #06abee;
  --darkest: #121920;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
.pattern{
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background: url("../img/pattern.svg");
  background-repeat: repeat;
  z-index: -4;
  opacity: 0.1;
  filter: brightness(0.1);
}
body {
  background-color: var(--bodybg);
  padding: 0;
  margin: 0;
  cursor: url(../img/cursor.ico), auto;
}
main {
  width: clamp(300px, 95%, 1300px);
  margin: auto;
  min-height: 100vh;
  text-align: center;
}
a {
  color: var(--textcolor);
  text-decoration: none;
}
li {
  text-decoration: none;
  list-style: none;
}
p {
  margin: 0;
}
section{
  margin: 4rem auto;
}
/* THIS CSS IS FOR BTN 1  */

.btn1 {
  width: clamp(4rem, 90%, 25rem);
  appearance: button;
  background-color: var(--lightbg);
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: din-round, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 20px;
  margin: 0 auto;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter 0.2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.btn1:after {
  background-clip: padding-box;
  background-color: var(--lightestbg);
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.btn1:main,
.btn1:focus {
  user-select: auto;
}

.btn1:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn1:disabled {
  cursor: auto;
}

/* THIS IS CSS FOR BTN 2  */

.btn2 {
  background-image: linear-gradient(144deg, var(--shadeblue), var(--shadegreen));
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #ffffff;
  font-family: Phantomsans, sans-serif;
  font-size: 2rem;
  justify-content: center;
  line-height: 1em;
  padding: 1rem;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 1rem 2rem 1rem 0;
}

.btn2:active,
.btn2:hover {
  outline: 0;
}

.btn2 span {
  background-color: rgb(5, 6, 45);
  padding: 1rem 2rem;
  border-radius: 6px;
  transition: 300ms;
}

.btn2:hover span {
  background: none;
}

@media (min-width: 768px) {
  .button-64 {
    font-size: 24px;
  }
}

.h2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--headfont);
  align-items: center;
  font-size: 3rem;
}
.h3{
  color: var(--textcolor);
  font-size: 2rem;
}
hr {
  color: var(--darkbg);
  margin: 2rem auto;
}
.hide {
  display: none;
}

.alertbox{
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background-color: transparent #1d2935;
}
.alertbox div{
  width: 200px;
  margin: auto;
  background-color: var(--lightbg);
  padding: 4rem;
  border: 2px solid var(--lightestbg);
  border-radius: 2rem;
  align-self: center;
  filter: opacity(1) !important;
}
.alertbox p{
  font-size: 2rem;
  color: var(--lightestbg);
}

/* GAMES CARD TEMPLATE CSS IS HERE  */
.Card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  width: clamp(300px, 100%, 500px);
  background-color: var(--lightbg);
  border-radius: 2rem;
  cursor: pointer;
}
.Card:hover{
  filter: brightness(1.1);
}
.Card img {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  border-radius: 2rem;
}
.Card div h3 {
  font-size: 2.5rem;
  font-family: var(--headfont);
  margin: 1rem;
  text-align: left;
}
.Card h3{
  font-size: 2.5rem;
  font-family: var(--headfont);
  margin: 1rem;
  text-align: left;
  color: var(--textcolor);
}
.Card div h3::first-letter {
  text-transform: uppercase;
}
.Card div p {
  font-size: 2rem;
  color: var(--lightestbg);
  margin: 0;
}
.Card div p span {
  padding: 0 1rem;
}
.Card div p::first-letter {
  text-transform: uppercase;
}



/* CSS FOR SEARCH BOX OR SEARCH FORM */
.searchBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: auto;
  width: clamp(300px, 100%, 700px);
}

.searchBox input{
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
  width: clamp(100px, 90%, 500px);
  margin: 0 1rem 0 0 ;
}
.searchBox button{
  width: 50px;
  height: 50px;
}
.searchBox img{
  width: 50px;
  height: 50px;
}


/* OPS 404 Page CSS  */
.Ops404{
  width: clamp(300px, 100%, 800px);
  margin: auto;
  text-align: center;
}
.Ops404 img{
  width: 90%;
  margin: auto;
}

/* FULL GAME PROFILE PAGE CSS IS HERE  */
/* .GameFullPage{

} */
.headProfileImg {
  width: 100%;
  border-radius: 2rem;
}
.fullPage {
  width: clamp(300px, 95%, 1300px);
  margin: auto;
}
.GameFullPage h2 {
  font-size: 4rem;
  text-align: left;
  color: var(--textcolor);
  margin: 0 2rem;
}
.FullCard{
  display: flex;
  align-items: center;
}
.FullCard img{
  width: 15rem;
  height: 15rem;
  border-radius: 1rem;
}
.fullPage section {
  border-radius: 2rem;
  background-color: var(--lightbg);
  padding: 2rem 1rem;
}
.fullPage p {
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  color: var(--darkest);
  text-align: left;
  margin: 2rem;
}
.fullPage span {
  color: var(--lightestbg);
}
span.cost {
  background-color: var(--lightestbg);
  color: var(--lightbg);
  width: 4rem;
  padding: 1rem;
  border-radius: 1rem;
  margin: 2rem 1rem;
}

.playvideo{
  color: var(--lightestbg);
  font-size: 2rem;
  padding: 1rem;
  display: block;
  text-align: left;
}
/* GENRE OF GAME  */
.CategorySection {
  background-color: var(--bodybg);
  border-radius: 2rem;
  padding: 2rem 0;
  margin: 4rem 0;
}
.CategorySection h3 {
  color: var(--lightestbg);
  font-size: 3rem;
  padding: 1rem;
  margin: 0;
}
.CategoryDisplay {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.CategoryCard {
  width: clamp(5rem, 90%, 12rem);
}
.CategoryCard img {
  width: 100%;
}
.CategoryCard p{
  font-size: 2rem;
  color: var(--textcolor);
  text-align: center;
}
 /* FRIENDLY MEDIA AND SUPPORT  */
.FriendlyDisplay{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

}
.FriendlyDisplay div{
  width: clamp(100px, 100%, 200px);
}
.FriendlyDisplay img{
  width: 100%;
}
.FriendlyDisplay p{
  color: var(--textcolor);
  text-align: center;
}

 /* MORE INFO  */
 .MoreInfo{
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
  align-items: center;
  }
  .MoreInfo h2{
    width: 100%;
  }
.score{
  display: flex;
  flex-direction: column;
  text-align: center;
}
.score p:first-of-type{
  font-size: 8rem;
  background-color: var(--darkbg);
  border: 2rem solid var(--lightestbg);
  border-radius: 50%;
  color: var(--lightbg);
  width: 8rem;
  height: 8rem;
  padding: 4rem;
  text-align: center;
  position: relative;
}

.score p:last-of-type{
  text-align: center;
  color: var(--lightestbg);
}

.androidversion{
  display: flex;
  flex-direction: column;
  text-align: center;
}

.androidversion p:first-of-type{
  font-size: 5rem;
  background-color: var(--darkbg);
  border: 2rem solid var(--lightestbg);
  color: var(--lightbg);
  padding: 2rem;
  text-align: center;
}
.androidversion p:last-of-type{
  text-align: center;
  color: var(--lightestbg);
}



/* CATEGORY SECTION CSS  */

.categorySection h2{
  font-size: 5rem;
  margin: 2rem 5rem;
}


 /* GOAT GAMES CSS  */
.goat{
  background-color: var(--darkbg);
  border-radius: 2rem;
  padding: 2rem;
  margin: 2rem auto;
  text-align: center;
}
.goat svg{
  width: clamp(200px, 100%, 300px);
margin: auto;
}
.goat svg .st1{
  fill: rgb(200, 0, 0);
}
.GOATPage svg{
  width: clamp(200px, 100%, 300px);
  margin: auto;
}
.GOATPage svg .st1{
  fill: rgb(200, 0, 0);
}
/* REQUEST YOUR GAME  */
.RequestGame{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 5rem auto;
  background-color: var(--darkbg) !important;
  border-radius: 2rem;
  text-align: center;
}
.RequestGame img{
  width: clamp(200px, 100%, 300px);
}
.RequestGame h3{
  font-size: 3rem;
  color: var(--textcolor);
}
.RequestGame div{
  width: 48%;
}
.RequestGame p{
  color: var(--lightestbg);
  text-align: left;
  padding: 1rem;
  width: 500px;
}





















/* // HEADER AND NAV CSS  */
header {
  background: var(--darkbg);
  width: clamp(300px, 95%, 1300px);
  margin: 1rem auto;
  border-radius: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  z-index: 1;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}

.logo h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--headfont);
  align-items: center;
}

.logo img {
  padding: 1rem 2rem;
  width: 5rem;
  height: 3.7rem;
}

header span {
  padding: 1rem 2rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--headfont);
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
}

.overlay-content {
  position: relative;
  top: 1%;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  z-index: 0;
}

.overlay a:hover,
.overlay a:focus {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--headfont);
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 36px;
  cursor: pointer;
  z-index: 1;
}
.barNav {
  font-size: 3rem;
  display: block;
  align-self: center;
  cursor: pointer;
}
@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* FORM FOR NEW GAME CSS  */
.InsertFormGame {
  display: flex;
  flex-direction: column;
  width: clamp(300px, 90%, 900px);
  margin: 5rem auto;
  font-size: 2rem;
  color: var(--textcolor);
}

.InsertFormGame input {
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
}

.InsertFormGame label {
  text-align: left;
  font-size: 3rem;
  color: var(--textcolor);
  margin-top: 4rem;
  margin-bottom: 0.5rem;
}
.InsertFormGame select {
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
}
.InsertFormGame button {
  margin: 5rem auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  border: none;
  padding: 1rem 5rem;
  border-radius: 1rem;
  font-size: 2rem;
  color: #1d2935;
  transition: 0.5s ease-in-out;
}
.InsertFormGame button:hover {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.InsertFormGame button:active {
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
.InsertFormGame fieldset {
  border: none;
  display: flex;
  justify-content: space-evenly;
  width: 300px;
}

/* DISCOVER CSS IS HERE  */

.Heading{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  max-height: 900px;
}
.Heading div{
  width: clamp(300px,45%, 500px);
}
.Heading h2{
  font-size: clamp(3rem,5vw,7rem);
  text-align: left;
  line-height: 1;

}
.Heading p{
  font-size: 2rem;
  padding: 1rem;
  color: var(--textcolor);
  text-align: left;
}
.Heading img{
  width: clamp(300px,40%, 500px);
  box-shadow:
    inset 0 0 120px 30px var(--bodybg),  
    inset 0 0 100px 60px var(--bodybg),
    inset 0 0 140px 90px var(--lightbg); 
}

.HeadingPlate{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.scrolldown{
  width: 70px;
  position: relative;
  bottom: 10rem;
}

@media (max-width:700px) {
  .scrolldown{
    display: none;
  }
  .HeadingPlate{
    display: none;
  }
}
.display {
  width: clamp(300px, 47%, 700px);
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.recentgames {
  display: block;
  background: url(../img/cargame.webp) no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  margin: 2rem auto;
  height: 600px;
  border-radius: 3rem;
  position: relative;
  color: var(--textcolor);
}
.display a{
  width: clamp(290px, 48%, 500px);
  margin: 1rem auto;
  min-height: 290px;
  max-height: 500px;
  display: block;
  border-radius: 3rem;
  position: relative;
}
@media (max-width:1300px) {
  .display {
    width: clamp(300px, 100%, 900px);
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .recentgames {
    display: block;
    background: url(../img/cargame.webp) no-repeat;
    background-position: center;
    background-size: cover;
    width: clamp(300px, 100%, 1200px);
    margin: 2rem auto;
    height: 600px;
    border-radius: 3rem;
    position: relative;
    color: var(--textcolor);
  }
}
@media (max-width:625px) {
  .display {
    width: clamp(300px, 100%, 900px);
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .display a{
    margin: 2rem auto;
    width: clamp(290px, 100%, 500px);
    min-height: 290px;
    max-height: 500px;
    display: block;
    border-radius: 3rem;
    position: relative;
  }
}



.recentgames h2 {
  font-size: 4rem;
  font-family: var(--headfont);
  position: absolute;
  bottom: 6rem;
  left: 2rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#28f09d), to(#06abee));
  background-image: linear-gradient(#28f09d, #06abee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.recentgames p {
  font-size: 2rem;
  font-family: var(--headfont);
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.vrgames {
  background: url(../img/vrgames.webp) no-repeat;
  background-position: center;
  background-size: cover;
}

.vrgames h2 {
  font-size: 2rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#28f09d), to(#06abee));
  background-image: linear-gradient(#28f09d, #06abee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.controllergames {
  background: url(../img/controllergames.webp) no-repeat;
  background-position: center;
  background-size: cover;
}

.controllergames h2 {
  font-size: 2rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#28f09d), to(#06abee));
  background-image: linear-gradient(#28f09d, #06abee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tabletgames {
  background: url(../img/tabletgames.webp) no-repeat;
  background-position: center;
  background-size: cover;
}

.tabletgames h2 {
  font-size: 2rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#28f09d), to(#06abee));
  background-image: linear-gradient(#28f09d, #06abee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topgames {
  background: url(../img/topgame.webp) no-repeat;
  background-position: center;
  background-size: cover;
}

.topgames h2 {
  font-size: 2rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#28f09d), to(#06abee));
  background-image: linear-gradient(#28f09d, #06abee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.recentgames:hover,
.tabletgames:hover,
.topgames:hover,
.controllergames:hover,
.vrgames:hover {
  -webkit-filter: brightness(1.3);
  filter: brightness(1.3);
}

/* SECTION LATEST GAMES IN DISCOVER PAGE  */

.LatestGame h2 {
  font-size: 5rem;
  margin: 2rem 5rem;
}







/* CARD GRID CSS  */
@media (min-width:1150px) {
  .CardGrid {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 1rem 4rem; 
    margin: 2rem auto;
  }
}
@media (max-width: 1149px) and (min-width: 771px){
  .CardGrid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 1rem 1rem; 
    margin: 2rem auto;
  }
}


@media (max-width:770px) {
  .CardGrid {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
    gap: 1rem 1rem; 
    margin: 2rem auto;
  }
}


 /* GIMG CSS MEANS GOAT SECTION IMAGES  */
.gimg{
  width: clamp(200px, 95%, 500px);
  padding: 2rem;
  margin: auto;
  box-shadow:
    inset 0 0 60px 30px var(--darkbg),  
    inset 0 0 100px 60px var(--darkbg),
    inset 0 0 140px 90px var(--lightbg); 
}
.gimg2{
  width: clamp(200px, 95%, 500px);
  padding: 5rem;
  margin: auto;
  box-shadow:
    inset 0 0 60px 30px var(--bodybg),  
    inset 0 0 100px 60px var(--bodybg),
    inset 0 0 140px 90px var(--lightestbg); 
    border-radius: 5rem;
}
@media (max-width:650px) {
  .gimg{
    width: clamp(200px, 95%, 500px);
    padding: 0;
    margin: auto;
    box-shadow:
      inset 0 0 60px 30px var(--darkbg),  
      inset 0 0 100px 60px var(--darkbg),
      inset 0 0 140px 90px var(--lightbg); 
  }
  .gimg2{
    width: clamp(200px, 95%, 500px);
    padding: 0;
    margin: auto;
    box-shadow:
      inset 0 0 60px 30px var(--bodybg),  
      inset 0 0 100px 60px var(--bodybg),
      inset 0 0 140px 90px var(--lightestbg); 
  }
}












/* DELETE FORM CSS  */
.DeleteForm {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: clamp(100px, 98%, 900px);
  margin: auto;
}
.deletecard {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin: 2rem auto;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--lightbg);
}
.deletecard h1 {
  color: var(--textcolor);
}

/* ABOUT US PAGES CSS  */

.About h2 {
  font-size: clamp(4rem, 5vw, 10rem);
}
.About q{
  font-size: 1.5rem;
  color: var(--lightestbg);
}
.About p{
  font-size: 3rem;
  color: var(--textcolor);
}
.About img{
  width: 80%;
  margin: auto;
  padding: 2rem;
}








/* CONTACT FORM  */

.contactForm {
  display: flex;
  flex-direction: column;
  width: clamp(300px, 90%, 900px);
  margin: 5rem auto;
  font-size: 2rem;
  color: var(--textcolor);
}

.contactForm input,
textarea {
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
}
input:hover{
  filter: brightness(1.1);
}
input:focus{
  border-width: 0px 0px 4px;
  background-color: var(--lightestbg);
}
.contactForm label {
  text-align: left;
  font-size: 3rem;
  color: var(--textcolor);
  margin-top: 4rem;
  margin-bottom: 0.5rem;
}
.contactForm select {
  padding: 1.5rem;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
}
.contactForm button {
  margin: 5rem auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  border: none;
  padding: 1rem 5rem;
  border-radius: 1rem;
  font-size: 2rem;
  color: #1d2935;
  transition: 0.5s ease-in-out;
}
.contactForm button:hover {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.contactForm button:active {
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
.contactForm fieldset {
  border: none;
  display: flex;
  justify-content: space-evenly;
  width: 300px;
}
.contactForm p{
  color: var(--lightestbg);
  font-size: 2.2rem;
  text-align: left;
  padding: 1rem;
}




/* FOOTER CSS IS HERE  */

.Footer {
  width: clamp(300px, 95%, 1300px);
  margin: 5rem auto auto auto;
  padding: 2rem;
  background: #1d2935;
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: top;
}
.Footer a {
  color: var(--textcolor);
  font-size: 2rem;
  padding: 1rem;
  align-items: center;
}
.Footer a svg{
  fill: var(--shadeblue);
  width: 3rem;
}
.Footer a span{
  position: relative;
  bottom: 0.9rem;
}
.logoFooter {
  display: block;
  width: 100%;
  margin: auto;
  text-align: center;
}

.logoFooter h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadegreen)), to(var(--shadeblue)));
  background-image: linear-gradient(var(--shadegreen), var(--shadeblue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--headfont);
  align-items: center;
  margin: 0;
}

.logoFooter img {
  padding: 1rem;
  width: 8rem;
  height: 5.7rem;
}

.SocialMedia {
  width: clamp(200px, 40%, 300px);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 5rem;
}

.Partner {
  width: clamp(150px, 40%, 200px);
  display: flex;
  text-align: left;
  padding: 5rem;
  flex-direction: column;
}

.FooterBar {
  width: 100%;
  display: block;
  border-radius: 1rem 1rem 0rem 0rem;
  background-color: Var(--darkest);
}
.FooterBar p {
  color: var(--textcolor);
  font-size: 2rem;
  padding: 2rem;
}
.Legal {
  width: clamp(200px, 40%, 300px);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 5rem;
}








.h2page{
  background: url(../img/latestgames.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  font-size: 5rem;
  color: var(--textcolor);
  border-radius: 5rem;
  align-content: center;
  padding: 10vw 0;
  text-shadow: 5px 2px 5px #000000;
}

.h2goat{
  background: url("https://i.ibb.co/DKvDGGF/redskull.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  font-size: 5rem;
  color: var(--textcolor);
  border-radius: 5rem;
  align-content: center;
  padding: 10vw 0;
  text-shadow: 5px 2px 5px #000000;
}

.whiteh2{
  color: var(--textcolor);
  font-size: 4rem;
}
.headimg{
  width: clamp(50px, 100%, 200px);
  margin: 2rem auto;
}
.pageshead{
  background: var(--darkest);
  background-repeat: repeat;
  background-size: 8rem;
  border-radius: 2rem;
  padding: 2rem;
}



/* CONTROLLER AFFILIATE SECTION CSS  */
.affiliate{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 5rem auto;
  text-align: left;
  align-items: center;
  background-color: var(--darkbg);
  border-radius: 2rem;
  padding: 4rem;
  text-align: center;
}
@media (max-width:1000px) {
  .affiliate{
    text-align: center;
  }
}
.affiliate div{
  width: clamp(300px, 100%, 450px);
  align-items: center;
}

.affiliate h3{
  font-size: 3rem;
}
.affiliate p{
  font-size: 2rem;
  color: var(--textcolor);
  margin: 2rem auto;
}



 /* ADMIN CSS  */
 .adminaside{
   display: flex;
   justify-content: space-between;
   width: clamp(300px,100%,900px);
   margin: auto;
   background-color: var(--darkest);
   border-radius: 3rem;
 }
 .adminaside a{
   width: clamp(10px, 100%, 50px);
 }
 .adminaside img{
  width: clamp(10px, 100%, 50px);
 }

 /* SIGN IN UP CSS IS HERE  */
 .Sign{
   background-color: var(--darkbg);
   width: clamp(500px, 100%, 900px);
   margin: 4rem auto;
   padding: 2rem;
   border-radius: 2rem;
   text-align: center;
 }
 .Sign form{
   display: flex;
   flex-direction: column;
   height: 200px;
 }
 .Sign input {
  padding: 1.5rem;
  width: clamp(300px, 90%, 500px);
  margin: auto;
  border-radius: 1rem;
  border: none;
  background-color: var(--lightbg);
  font-size: 1.8rem;
  color: var(--textcolor);
}



























.theEnd{
  width: clamp(300px, 100%, 900px);
  height: 400px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  position: relative;
}


.theEnd img:last-of-type{
  width: clamp(100px, 100%, 400px);
  margin: auto;
  position: absolute;
}
.theEnd img:first-of-type{
  width: 100px;
  margin: auto;
  position: absolute;
  bottom: -5rem;
}

.QA{
  display: flex;
  flex-direction: column;
}
.QA section{
  background-color: var(--lightbg);
  border-radius: 2rem;
  width: clamp(200px, 90%, 900px);
}
.Question{
  font-size: 3rem;
  color: var(--shadeblue);
}
.Answer{
  color: var(--textcolor);
  font-size: 2rem;
  padding: 1rem;
}
.Answer a{
  color:var(--shadegreen);
}
.faqheader{
  width: 80%;
  margin: auto;
}


/* TERMS AND CONDITION CSS  */

.Terms h2{
  font-size: 4rem;
  color: var(--shadeblue);
  margin-top: 8rem;
  text-align: center;
}
.Terms h3{
  color: var(--shadeblue);
  font-size: 2rem;
}
.Terms p{
  font-size: 2rem;
  color: var(--textcolor);
  text-align: left;
}