@charset "utf-8";
html, body {
 margin: 0px;
 padding: 0px;
}

.top-bar {
  position: fixed;       
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #000000;
  color: white;
  display: flex;
  }       

body {
   font-family: "DotGothic16", serif;
   font-size: 1em;
   color: #ffffff;
   line-height:1.8em;
   background-color: #000000;
   background-image: url(background.png);
   }

   



 .wrapper {
  position: absolute;  
  top: 80px;          
  left: 130px;
}

.a {
  position: relative;  
  display: inline-block; 
}

.a .text {
  position: absolute;  
  top: 0.3px;           
  left: 25px;          
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0 0 5px black; 
  
}
   
.b-wrapper {
  position: absolute;
  top: 150px;  
  left: 50px;
}

.b-wrapper img {
  display: block;
  width: 300px;
}

.b-wrapper .text {
  position: absolute;
  top: 11%;
  left: 27%;
  transform: translate(-50%, -50%);
  font-family: 'DotGothic16', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  white-space: nowrap; 
}

.c {
    img {
  position: absolute;
  top: 60px;
  right: 270px;
}
   }

.d-wrapper {
  position: absolute;
  top: 250px;  
  left: 50px;
}

.d-wrapper img {
  display: block;
  width: 300px;
}

.d-wrapper .text {
  position: absolute;
  top: 5%;              
  left: 36%;
  transform: translate(-50%, 0);
  font-family: 'DotGothic16', sans-serif;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px black;
}


.text .title {
  font-size: 22px;
  color: rgb(255, 255, 255);
  margin-bottom: 30px;
}


.text .info {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}


.text .switch {
  color: #ffffff;
}

.text .ps5 {
  color: #ffffff;
}

.text .xbox {
  color: rgb(255, 255, 255);
}

.text .multi {
  color: #ff88f3;
}

.text .genre {
  color: #ffffff;
}



.e-wrapper {
  position: absolute;
  top: 500px;  
  left: 50px;
}

.e-wrapper img {
  display: block;
  width: 180px;
}

.e-wrapper .text {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DotGothic16', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  white-space: nowrap; 
}
.f-wrapper {
  position: absolute;
  top: 540px;
  left: 50px;
}


.f-wrapper .background {
  display: block;
  width: 300px;
}

.f-wrapper .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;          
  height: 100%;
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  padding: 10px 15px;
  box-sizing: border-box;
}

.f-wrapper .text {
  color: white;
  font-family: 'DotGothic16', sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: left;   
}

.f-wrapper .text .title {
  font-size: 16px;
  margin: 0 0 5px;
}

.f-wrapper .text .desc {
  font-size: 13px;
  margin: 0;
}

.g-wrapper {
  position: absolute;
  top: 700px;  
  left: 110px;
}

.g-wrapper img {
  display: block;
  width: 180px;
}

.g-wrapper .text {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DotGothic16', sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #ff88f3;
  white-space: nowrap; 
}


  
   

.banner1 {
   font-family: 'DotGothic16', sans-serif; 
  background-color: rgb(0, 0, 0);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around; 
  align-items: center; 
  padding: 5px 0;
  box-sizing: border-box;
  text-align: center;
}

.banner-item {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  justify-content: center; 


  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
}

.banner-item img {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  object-fit: contain;
  
}
.banner-item p {
  line-height: 1;
  margin: 0;
}

.banner1 span {
  color: #ffffff;
}