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

* {
    font-family: 'Oswald', sans-serif;
}

body {
  background-color: #020201;
}

/* Navbar Container */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #516273;
  padding: 1rem 2rem;
  color: white;
}

/* List of Links */
.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  padding: 0 15px;
}

/* Link Styling */
.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: 0.3s;
  font-family: Oswald, sans-serif;
}

/* Hover Effect */
.nav-links a:hover {
  color: #324252; 
}

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

.image {
  height: 687px;
}

.text-overlay {
  position: absolute;
  top: 45%;
  left: 5%;
  color: white;
  font-size: 95px;
  padding: 10px;
}

#info{
  color:#a5cc9e;
  background-color:#020201;
  position: absolute; 
  top:735px;
  width: 100%;
  font-size: 12px;
}  

#info-uzi{
  float:right;
}

#info-2{
  color:#a5cc9e;
  background-color:#020201;
  position: absolute; 
  top:1100px; 
  width: 100%;
  font-size: 12px;
}

#info-N{
  float:right;
}

h1 {
  position: absolute; top:80px; right: 100px; left:50px;
}


#footer{
  position: absolute; 
  top:1530px;
  width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;
   
}
 
#footer p{
margin: 10px;
font-family: Oswald, sans-serif;
}



/* Page 2- characters */
.container-2 {
  position: relative; 
  display: inline-block; 
}

.text-overlay-2 {
  position: absolute;
  top: 45%; 
  left: 5%; 
  color: white;
  font-size: 95px;
  padding: 10px;
}

#UZI{
  margin-left: 130px;
  margin-top:40px;
  height: 250px;
  position:relative;
}

#N{
  margin-left: 130px;
  margin-top:40px;
  height: 250px;
  position:relative;
}

#V{
  margin-left: 130px;
  margin-top:40px;
  height: 250px;
  position:relative;
}

#CYN{
  margin-left: 130px;
  margin-top:40px;
  height: 250px;
  position:relative;
}

#DOLL{
  margin-left: 130px;
  margin-top:40px;
  height: 250px;
  position:relative;
}

.title-1{
  position: absolute; 
  top: 50%;
  left:46%;
  transform: translate(-50%, -50%);
}

.title-2{
  position: absolute; 
  top: 50%;
  left:45%;
  transform: translate(-50%, -50%);
}

.title-3{
  position: absolute; 
  top: 50%;
  left:46%;
  transform: translate(-50%, -50%);
}

.title-4{
  position: absolute; 
  top: 50%;
  left:45%;
  transform: translate(-50%, -50%);
}

.title-5{
  position: absolute; 
  top: 50%;
  left:45%;
  transform: translate(-50%, -50%);
}

#a1{
  color: black;
  tect-decoration: none;
  font-weight: bold;
  font-size: 48px;
  transition: 0.3s;
  font-family: Oswald, sans-serif;
  font-oprical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

#a1:hover{
  color: white;
  text-decoration: none;
}


#footer-2{
   position: absolute; 
   top:2237px;
   width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;  
}
 
#footer-2 p{
margin: 10px;
font-family: Oswald, sans-serif;
}



/* CHARACTER PROFILES */

#BACK{
  border-radius: 6px;
  background-color: #8d3ec3;
  margin-left: 48px;
  margin-top: 41px;
  height: 50px;
  width: 140px;
  position:relative;
}

.go-back{
  position: absolute; 
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

#a2{
  color: black;
  tect-decoration: none;
  font-weight: bold;
  font-size: 30px;
  transition: 0.3s;
  font-family: Oswald, sans-serif;
  font-oprical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

#a2:hover{
  color: white;
  text-decoration: none;
}

#character-profile-title{
  font-family: Oswald, sans-serif;
  text-align: center;
  font-size: 71px;
  position: absolute; 
  left: 250px;
  top: 30px;
  background-color:#f7f1e5;
  width: 60%;
  height: 75px;
  border-radius: 20px;
}

#character-profile-base{
  margin-left: 45px;
  margin-right: 45px;
  position: absolute; 
  top: 130px;
  background-color: #97419f;
  width: 92.5%;
  height: 500px;
}

#character-profile-base-img{
  float: right;
  position: absolute; 
  top: 20px;
  left: 72.4%;
  background-color: #f7f1e5;
  width: 308px;
  height: 463px;
  border-radius: 16px;
}

.center-img{
   display: block;
  margin-left: auto;
  margin-right: auto;
}

#character-profile-base-info{
  font-size: 20px;
  font-family: Oswald, sans-serif;
  margin-left: 15px;
  background-color: #f7f1e5;
  width: 70%;
  height: 463px;
  border-radius: 16px;
}

#uzi-info-text{
margin-top: 20px;
margin-left: 15px;
margin-right: 15px;
}

#footer-uzi{
  position: absolute; 
  top: 655px;
  width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;  
}
 
#footer-uzi p{
margin: 10px;
  font-family: Oswald, sans-serif;
}

#BACK-N{
  border-radius: 6px;
  background-color: #ffbf00;
  margin-left: 48px;
  margin-top: 41px;
  height: 50px;
  width: 140px;
  position:relative;
}

#character-profile-base-N{
  margin-left: 45px;
  margin-right: 45px;
  position: absolute; 
  top: 130px;
  background-color: #ffd541;
  width: 92.5%;
  height: 500px;
}

#BACK-V{
  border-radius: 6px;
  background-color: #ffbf00;
  margin-left: 48px;
  margin-top: 41px;
  height: 50px;
  width: 140px;
  position:relative;
}

#character-profile-base-V{
  margin-left: 45px;
  margin-right: 45px;
  position: absolute; 
  top: 130px;
  background-color: #ffd541;
  width: 92.5%;
  height: 500px;
}

#BACK-CYN{
  border-radius: 6px;
  background-color: #660303;
  margin-left: 48px;
  margin-top: 41px;
  height: 50px;
  width: 140px;
  position:relative;
}

#character-profile-base-CYN{
  margin-left: 45px;
  margin-right: 45px;
  position: absolute; 
  top: 130px;
  background-color: #910404;
  width: 92.5%;
  height: 500px;
}

#BACK-DOLL{
  border-radius: 6px;
  background-color: #660303;
  margin-left: 48px;
  margin-top: 41px;
  height: 50px;
  width: 140px;
  position:relative;
}

#character-profile-base-DOLL{
  margin-left: 45px;
  margin-right: 45px;
  position: absolute; 
  top: 130px;
  background-color: #910404;
  width: 92.5%;
  height: 500px;
}


/* Page 3- episodes */

.container-3 {
  position: relative; 
  display: inline-block; 
}

.text-overlay-3 {
  position: absolute;
  top: 45%; 
  left: 5%; 
  color: white;
  font-size: 95px;
  padding: 10px;
}


#episode-1-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 140%; 
  left: 4%; 
  width: 370px;
  height: 170px;
}

#episode-1-img{
  position: absolute;
  top: 148%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-1-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 168%; 
  left: 4%; 
  width: 370px;
  height: 274px;
}


#episode-2-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 240%; 
  left: 4%;
  width: 570px;
  height: 170px;
}

#episode-2-img{
  position: absolute;
  top: 248%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-2-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 268%; 
  left: 4%; 
  width: 370px;
  height: 274px;
}


#episode-3-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 340%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-3-img{
  position: absolute;
  top: 348%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-3-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 368%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}

#episode-4-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 440%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-4-img{
  position: absolute;
  top: 448%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-4-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 468%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}

#episode-5-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 540%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-5-img{
  position: absolute;
  top: 548%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-5-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 568%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}

#episode-6-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 640%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-6-img{
  position: absolute;
  top: 648%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-6-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 668%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}

#episode-7-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 740%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-7-img{
  position: absolute;
  top: 748%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-7-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 768%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}

#episode-8-title{
  background-color: black;
  color: #fff59c;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 840%; 
  left: 4%; 
  width: 570px;
  height: 170px;
}

#episode-8-img{
  position: absolute;
  top: 848%; 
  left: 43%; 
  width: 570px;
  height: 400px;
}

#episode-8-info{
  background-color: black;
  color: white;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 868%; 
  left: 4%; 
  width: 370px;
  height: 174px;
}


#footer-3{
   position: absolute; 
   top:5350px;
   width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;
   
}
 
#footer-3 p{
margin: 10px;
  font-family: Oswald, sans-serif;
}


/* Page 4- GLITCH */
.container-4 {
  position: relative; 
  display: inline-block; 
}

.text-overlay-4 {
  position: absolute;
  top: 45%; 
  left: 5%; 
  color: white;
  font-size: 95px;
  padding: 10px;
}

#glitch{
  background-color: #4a598a;
  color: #72a5d8;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 140%; 
  left: 5%; 
  width: 90%;
  height: 660px;
}

#title-glitch{
  background-color: #2c314c;
  text-align: center;
  color: #8fbdde;
  font-size: 55px;
  font-family: Oswald, sans-serif;
}

#what-is-glitch{
  border-radius: 50px;
  corner-shape: squircle;
  background-color: #2c314c;
  text-align: left;
  color: #8fbdde;
  font-size: 27px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 12%;
  left: 2%; 
  width: 95%;
  height: 270px;
}

#glitch-text1{
  margin-left: 15px;
  margin-right: 8px;
  margin-top: 10px;
}

#shows{
  border-radius: 50px;
  corner-shape: squircle;
  background-color: #2c314c;
  text-align: left;
  color: #8fbdde;
  font-size: 23px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 57%;
  left: 2%; 
  width: 400px;
  height: 266px;
}

#glitch-text2{
  margin-top: 7px;
  margin-left: 15px;
  margin-right: 6px;
}

#yt{
  text-align: left;
  color: #4a598a;
  font-size: 30px;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 61%;
  left: 39.5%; 
  width: 645px;
  height: 206px;
}

a {
  text-decoration: none;
}

a:hover img{
  border: none;
  transition: transform 0.3s ease;
  transform: scale(1.1);
}


#footer-4{
  position: absolute; 
  top:1520px;
  width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;
   
}
 
#footer-4 p{
margin: 10px;
  font-family: Oswald, sans-serif;
}


/* Page 5- GALLERY */
.container-5 {
  position: relative; 
  display: inline-block; 
}

.text-overlay-5 {
  position: absolute;
  top: 45%; 
  left: 5%; 
  color: white;
  font-size: 95px;
  padding: 10px;
}

#gallery-discription{
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff9c0;
  text-align: center;
  background-color: #983904;
  width: 100%;
  height: 100px;
  font-size: 14px;
}  


#GALLERY-IMAGES{
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  width: 100%;
  height: 100%;
}

/* Remove default bullet points */
.image-list {
  list-style: none;
  padding: 0;
}

/* Align image and text horizontally */
.image-list li {
  display: flex;
  align-items: center;
  margin-bottom: 55px;
}

/* Explicitly size the image */
.image-list img {
  margin-right: 15px;
  object-fit: cover;
}

#footer-5{
  position: absolute; 
  top:13200px;
  width:100%; 
  clear: both;
  padding: 3px;
  border-top: 1px solid #364758;
  background-image: linear-gradient(to right, #364758, #364758);
  color: #fff;
  font-size: 18px;
   
}
 
#footer-5 p{
margin: 10px;
  font-family: Oswald, sans-serif;
}