*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
}

body{
    font-family:Lucida Sans Unicode;
    width: 100%;
    background-image: url('../img/background.jpg');
    background-attachment: fixed;
    background-position: center;
    margin: auto;
}
h6{
    color: white;
}
/* youtube Video CSS style 

.banner{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(/img/Ace1.png);
    background-size: cover;
    background-position: center;
}

.navbar{
    width: 85%;
    margin:auto;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width:50px;
    cursor: pointer;
}


.navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    position: relative;
}

.navbar ul li a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}

.navbar ul li::after{
    content: '';
    height: 3px;
    width:0;         
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}

.navbar ul li:hover:after{
width: 100%;
}

.content{
    width: 100%;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}

.content h1{
    font-size: 70px;
    margin-top: 80px;
}

.content p{
    margin: 20px auto;
    font-weight: 100;
    line-height: 25px;
}

button{
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #009688;
    background: transparent;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

span{
    background:#009688;
    height: 100%;
    width: 0;
    border-radius: 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: 0.5s;
}

button:hover span{
    width:100%;

}

button:hover{
    border: none;
}
*/

.page-container {
    margin-bottom: 20px;
    padding: 30px;
}
  
.page-number {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #333;
  }

.nextpage{
    align-items: center;
}  

.nextpage a {
    display: inline-block;
}

.social{
    width: 50%;
    text-align:end;
    display: inline-block;
}

nav ul.footerNav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

nav ul.footerNav li {
    display: inline-block;
    margin-right: 10px; /* Adjust as needed for spacing between items */
}

nav div.social {
    display: inline-block;
}

.a{
    color: white;
}


/* announcements Sylye */
.announcements{
    color: white;
    text-align: center;
    margin: 1em;
    margin-left: 5em;
    border-radius: 2em;
}

ul.custom-arrow {
    list-style-type: none; /* Remove default styles */
    padding-left: 0; /* Remove default padding */
  }

ul.custom-arrow li::before {
    content: '\2192'; /* Unicode character for a right arrow */
    margin-right: 0.5em;
  }
 /* Finish */


/* header */
header{
    display: flex;
    flex-direction: column;
}

.headerTop{
    display: flex;
    flex-direction: row;
    justify-content:center;
    background-color: transparent;
}

.search{
    text-align: center;
    margin: 1em;
    margin-left: 5em;
    border-radius: 2em;
}

.searchText{
    padding: 0.5em;
    font-size: 1em;
    border: 0.1em solid #000000;
    background: #ffffff;
    border-radius: 2em ;
}
  
.searchButton{
    padding: 0.5em;
    background: #ffffff;
    color: #000000;
    font-size: 1em;
    border: 0.1em solid #000000;
    cursor: pointer;
    border-radius: 2em;
  }
  
.searchButton:hover{
    background-color: #000000;
    color: #ffffff;
    border: 0.1em solid #fffcfc;
    transition: 0.2s;
    border-radius: 2em;
}

/* Facebook Stickers */
.fab{
    color:#ffffff;
    padding: 0.5rem;
    border-radius: 2em;
}

.fab:hover{
   color: #000000;
   transform: scale(1.1);
   transition: 0.3s;
   border-radius: 2em;
}

.dropdown{
    margin-top: 0.5em;
    margin-left: 17em;
}

.dropButton{
    background-color: #ffffff;
    color:#000000;
    padding: 1em;
    font-size: 1rem;
    border: 0.1em solid #000000;
    cursor: pointer;
}



.dropNav{
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 8.6em;
}

.dropNav a{
    color: rgb(255, 255, 255);
    padding: 1em;
    text-decoration: none;
}

.dropNav a:hover:not(.active){
    background-color: #b3f4ff;
    color:#000000;
}

.dropdown:hover .dropButton{
    background-color: #000000;
    color: white;
}

.dropdown:hover .dropNav{
    display: flex;
    flex-direction: column;
}

.headerMid{
    background-color: #00aaff;
    padding: 0.5em;
}

.titleTop{
    font-family: Impact, sans-serif;
    font-size: 5rem;
    
}

.titleTop a{
    text-decoration: none;
    color: white;
}
.titleBot{
    font-family: "Times New Roman", Times, serif;
    font-size: 2.5rem;
    font-style: italic;
    color: #000000;  
}
.headerNav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    background-color:transparent;
}
  
.headerNav li{
    float: left;
}

.headerNav li:nth-child(2){
    display:none;
}

.headerNav li a{
    display: block;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 0.7em 1em;
    text-decoration: none;
}
  
.headerNav li a:hover:not(.active){
    background-color: #b3f4ff;
    color: #000000;
    transition: 0.3s;
}

.active{
    background-color: #00eaff;
}

/* 
.gojo1920-icon {
  position: relative;
  width: 1300.01px;
  height: 433.57px;
  object-fit: cover;
} 

.gojo1920-parent {
  align-items: center;
  gap: 12.45px;
} 

.add,
.gojo1920-parent,
.search-parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.add {
  height: 473px;
  align-items: flex-start;
}
*/


/* slideshow */
.slideshow{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* Adjust the width as needed */
        height: auto;
        border: 2px solid #000; /* Add a border with 2px width and black color */
     /* border-radius: 10px;  Adjust the border-radius as needed */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        -webkit-animation: fade 2s infinite;
        -moz-animation: fade 2s infinite;
        -ms-animation: fade 2s infinite;
        -o-animation: fade 2s infinite;
        animation: fade 2s infinite;
        
    
    /*
    align-items: center;
    width: 100%;
    height: auto;
    -webkit-animation: fade 2s infinite;
    -moz-animation: fade 2s infinite;
    -ms-animation: fade 2s infinite;
    -o-animation: fade 2s infinite;
    animation: fade 2s infinite;
    */
}

.container{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Adjust the width as needed */
    height: auto;
    border-radius: 10px; /* Adjust the border-radius as needed */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.slide1.png{
    position: relative;
  width: 300px;
  height: 300px;
  object-fit: cover;

}

@keyframes fade{
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}

@-moz-keyframes fade{
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}

@-webkit-keyframes fade{
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}

@-ms-keyframes fade{
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}

@-o-keyframes fade{
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}

/* index.html */
.highlight{
    display: flex;
    flex-direction: column;
}

.highlightTop{
    background-color: #00aaff;
    margin: 0.5em 1em;
}
 
.highlightText{
    font-family: "Times New Roman", Times, serif;
    font-size: 2rem;
    font-style: italic;
    color: #000000;
    margin-top: 0.2em;
}

.highlightButton{
    border: 0.2em solid #000000;
    margin: 0.5em 1em;
    border-radius: 2em;
    padding: 0.5em 3em;
    font-size: 1rem;
    align-items: center;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    font-weight: bolder;
    cursor: pointer;
}

.highlightButton:hover{
    transition: 0.4s;
    color:#000000;
    background-color: #b3f4ff;
}

.highlightBot{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0.5em 1em;
    border-radius: 2em;
    background-color: rgba(0, 0, 0, 0.7)
}

.manga{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    margin: 1em;
}

/* Onepiece Page Style */
.onepiecemangaImg{
    width: 50mm;
    height: auto;
}

.onepiecemangaImg:hover{
    transform: scale(1.05);
    transition: 0.4s;
}

.executiveslideimage{
    width: 80%;
    height: auto;
}

.executiveslideimage:hover{
    transform: scale(1.05);
    transition: 0.4s;
}

/* Finish */



/* Common Manga Style */
.commonmangaImage{
    width: 80%;
    height: 80%;
}

.commonmangaImage:hover{
    transform: scale(1.05);
    transition: 0.4s;
}
/* Finish */
.mangaImg{
    width: 75px;
    height: auto;
}

.mangaImg:hover{
    transform: scale(1.05);
    transition: 0.4s;
}

.mangadisplayImage{
    width: 50%;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 2em;
    padding: 1em;
}

.mangaTitle{
    width: 100%;
    padding: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    height: auto;
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
}

.manga a{
    text-decoration: none;
}

/* terms, cookies, about, privacy */
.middle{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middleImg{
    width: 75%;
    height: auto;
    margin-top: 1em;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}

.text{
    width: 75%;
    height: auto;
    margin-bottom: 1em;
    padding: 0.5em;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    background-color: rgba(0, 0, 0, 0.7);
    word-wrap: break-word;
    color: #ffffff;
}

/* manga* */
.mangaImage{
    width: 90%;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 2em;
}

.mangaText{
    width: 90%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.7);
    word-wrap: break-word;
    color: #ffffff;
    border-radius: 2em;
    margin-bottom: 1em;
    padding: 1em;
}

.mangaForm{
    width: 50%;
    background-color: rgb(255, 255, 255);
    border-radius: 2em;
    padding: 1em;
    margin-bottom: 1em;
}

.mangaButton{
    border: 0.2em solid #000000;
    padding: 0.5em 3em;
    margin: 1em;
    font-size: 1rem;
    align-items: center;
    background-color: rgb(255, 255, 255);
    color:#000000;
    font-weight: bolder;
    cursor: pointer;
    border-radius: 2em;
}

.mangaButton:hover{
    transition: 0.4s;
    color: #ffffff;
    background-color: #000000;
}

.suggest{
    width: 70%;
    height: auto;
    background-color: rgb(255, 255, 255);
    font-family: "Times New Roman", Times, serif;
    font-size: 2rem;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    font-style: italic;
    color:#000000;
}

.mangaSuggest{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-bottom: 1em;
    border-radius: 2em;
    background-color: rgb(0, 0, 0);
}
/* Manga Chapters */
.chapters{
    width: 90%;
    height: auto;
    margin-bottom: 1em;
    border-radius: 2em;
    background-color: rgb(0, 0, 0);
}

/* Manga Chapters Tap Code To open Manga CHapter */
.chapters ul{
    list-style-type: none;
    overflow: hidden;
}

.chapters ul li:nth-of-type(even){
    background-color: rgb(0, 0, 0);
}

.chapters ul li{
    padding: 0.5em;
}

.chapters ul li a{
    text-align: center;
    padding: 0.5em 0.7em;
    text-decoration: none;
    color:#ffffff;
}

/* contact Us & request  Manga Page */
.question{
    width: 75%;
    height: auto;
    background-color: rgb(255, 255, 255);
    font-family: "Times New Roman", Times, serif;
    font-size: 2rem;
    font-style: italic;
    color:#000000;
}

.form{
    background-color: rgba(255, 0, 0, 0);
    width: 75%;
    height: auto;
    padding: 2em;
    margin-bottom: 1em;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}

.label{
    font-style: italic;
    color:#ffffff;
}

#name{
    border: 0.2em solid #ffffff;
    border-radius: 1em;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
}

#email{
    border: 0.2em solid rgb(255, 255, 255);
    border-radius: 1em;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
}

#textArea{
    border: 0.2em solid #ffffff;
    border-radius: 1em;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    resize: none;
}

#contactButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
}

/* Contact Us */
#contactButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

#nameSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#emailSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#textAreaSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 4.5em;
}

/* request */
#manga{
    border: 0.2em solid #000000;
    border-radius: 1em;
    padding: 0.5em;
    background-color: #ffffff;
}

#url{
    border: 0.2em solid #000000;
    border-radius: 1em;
    padding: 0.5em;
    background-color: #ffffff;
}

#mangaSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#urlSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#requestButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#requestButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

/* login */
#username{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#password{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#usernameSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#passwordSpan{
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.9rem;
    margin-top: 0.4em;
}

#loginButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#loginButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

#regButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#regButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

/* register */
#logButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}


#logButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

#registerButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#registerButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}

.error{
    color: red;
    position: absolute;
    margin-left: 0.5em;
    font-size: 0.8rem;
    margin-top: 0.4em;
}
#signupButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#signupButton:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}
/* dictionary */
.mangaDictionary{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 2em;
    background-color: rgb(0, 0, 0);
}

.formDictionary{
    background-color: rgba(0, 0, 0, 0);
    width: 90%;
    height: auto;
    padding: 2em;
    margin-top: 1em;
    border-radius: 2em;
}

.labelDictionaryTitle{
    font-weight: bold;
    color:#00aaff;
    font-size: 1.5rem;
}

.labelDictionary{
    font-style: italic;
    color:#ffffff;
    font-size: 1rem;
}

#dictionaryButton{
    border: 0.2em solid rgb(0, 0, 0);
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 0.5em;
    background-color: rgb(255, 255, 255);
    margin-top: 1em;
}

#dictionaryButton:hover{
    color:#000000;
    background-color: #b3f4ff;
    transition: 0.3s;
}

.radio{
    margin-left: 1em;
}

.checkbox{
    margin-left: 1em;
}

/* Submit Request & Contact Style */
.submittext{
    color: white;
    text-align: center;
}

#returntowebsite{
    border: 0.2em solid #000000;
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: rgb(255, 255, 255);
}

#returntowebsite:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}




/* php */
/*
.bodyPhp{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-right: 2em;
    margin-left: 5.5em;
    background-color: rgb(255, 255, 255)
}

.titlePhp{
    padding: 0.2em;
    margin-bottom: 1em;
    font-size: 4rem;
    font-weight: bold;
    word-wrap: break-word;
    color: #591b98; 
}

.textPhp{
    padding: 0.2em;
    font-size: 2rem;
    font-weight: bold;
    word-wrap: break-word;
    color: #591b98;
}

.varPhp{
    padding: 0.2em;
    font-size: 1.5rem;
    word-wrap: break-word;
    color: #591b98; 
}

#buttonPhp{
    border: 0.2em solid #000000;
    color: #000000;
    border-radius: 0.7em;
    font-size: 1rem;
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: rgb(255, 255, 255);
}

#buttonPhp:hover{
    border: 0.2em solid rgb(255, 255, 255);
    color:#ffffff;
    background-color: #000000;
    transition: 0.3s;
}
*/

/* Pagination CSS */
nav {
    text-align: center;
}

.pagination {
    display: inline-block;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */

}

.pagination li {
    display: inline;
    list-style: none;
    margin-right: 5px; /* Adjust as needed for spacing between items */
}

.pagination a {
    text-decoration: none;
    padding: 8px 16px;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: transparent;
}


/* footer */
footer{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #00aaff;
    text-align: center;
}

.footerNav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 1em;
    margin-right: 3em;
}

.footerNav li{
    float: inline-start;
}
  
.footerNav li a{
    display: block;
    text-align: center;
    padding: 0.5em 0.7em;
    text-decoration: none;
    color:#ffffff;
/* border: 0.2em solid #000000; */ 
}
/* border: 0.2em solid #000000; */ 
.footerNav li a:hover:not(.active){
    background-color: #b3f4ff;
    color: #000000;
    transition: 0.3s;
}

.copyright{
    margin: 1em;
    color: #ffffff;
}

footer a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

/*Responsive
@media only screen and (max-width: 900px){
    body{
        width: 100%;
        margin: auto;
    }

    .headerTop{
        flex-direction: column;
    }
    
    .search{
        margin-left: initial;
    }

    .searchText{
        width: 80%;
        height: auto;
    }

    .searchButton{
        width: 10%;
        height: auto;
    }

    .headerNav li{
        float: none;
        text-align: center; 
    }

    .footerNav{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #00aaff;
    }
      
    .footerNav li{
        float: none;
    }
      
    .footerNav li a{
        display: block;
        color: white;
        text-align: center;
        padding: 0.7em 1em;
        text-decoration: none;
        border: none;
    }
      
    .FooterNav li a:hover:not(.active){
        background-color: #00aaff;
        color: #591b98;
        transition: 0.3s;
    }

    .copyright{
        margin: auto;
    }

    .dropButton{
        display: none;
    }

    .headerNav li:nth-child(2){
        display: initial;
    }

    #name{
        width: 60%;
    }

    #email{
        width: 60%;
    }
    
    #textArea{
        width: 80%;
    }

    #url{
        width: 60%;
    }

    #manga{
        width: 60%;
    }

    #username{
        width: 60%;
    }

    #password{
        width: 60%;
    }

    #passwordConfirm{
        width: 60%;
    }

    .bodyPhp{
        margin-left: 1.5em;
    }
}
*/


/*
@media only screen and (max-width: 900px) {
    body {
        width: 100%;
        margin: auto;
    }

    .headerTop {
        flex-direction: column;
    }

    .search {
        margin-left: initial;
    }

    .searchText {
        width: 80%; /* Adjust as needed */
        /*
        height: auto;
    }

    .searchButton {
        width: 20%; /* Adjust as needed */
        /*
        height: auto;
    }

    .headerNav li {
        float: none;
        text-align: center;
    }

    .footerNav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #00aaff;
    }

    .footerNav li {
        float: none;
    }

    .footerNav li a {
        display: block;
        color: white;
        text-align: center;
        padding: 0.7em 1em;
        text-decoration: none;
        border: none;
    }

    .footerNav li a:hover:not(.active) {
        background-color: #00aaff;
        color: #000000;
        transition: 0.3s;
    }

    .copyright {
        margin: auto;
    }

    .dropButton {
        display: none;
    }

    .headerNav li:nth-child(2) {
        display: initial;
    }

    #name,
    #email,
    #url,
    #manga,
    #username,
    #password,
    #passwordConfirm {
        width: 60%; /* Adjust as needed */
        /*
    }

    #textArea {
        width: 80%; /* Adjust as needed */
        /*
    }

    .bodyPhp {
        margin-left: 1.5em;
    }
}
*/

/* Responsive Styles */

@media screen and (max-width: 1920px) {
    .search{
        text-align: center;
        margin: 1em;
        margin-left: 5em;
        border-radius: 2em;
    }
    .searchText{
        padding: 0.5em;
        font-size: 1em;
        border: 0.1em solid #000000;
        background: #ffffff;
        border-radius: 2em ;
    }
    .searchButton{
        padding: 0.5em;
        background: #ffffff;
        color: #000000;
        font-size: 1em;
        border: 0.1em solid #000000;
        cursor: pointer;
        border-radius: 2em;
      }
      .highlightText{
        font-family: "Times New Roman", Times, serif;
        font-size: 2rem;
        font-style: italic;
        color: #000000;
        margin-top: 0.2em;
    }
    .highlightButton{
        border: 0.2em solid #000000;
        margin: 0.5em 1em;
        border-radius: 2em;
        padding: 0.5em 3em;
        font-size: 1rem;
        align-items: center;
        background-color: rgb(0, 0, 0);
        color: #ffffff;
        font-weight: bolder;
        cursor: pointer;
    }
    .highlightBot{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0.5em 1em;
        border-radius: 2em;
        background-color: rgba(0, 0, 0, 0.7)
    }
    .mangaImg{
        width: 75px;
        height: auto;
    }
    .titleTop{
        font-family: Impact, sans-serif;
        font-size: 5rem;
    }
    .titleBot{
        font-family: "Times New Roman", Times, serif;
        font-size: 2.5rem;
        font-style: italic;
        color: #000000;  
    }
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 1rem;
    }
    .search {
    margin: 16px; /* 1em */
    margin-left: 80px; /* 5em */
    border-radius: 32px; /* 2em */
}

.searchText {
    padding: 8px; /* 0.5em */
    font-size: 16px; /* 1em */
    border: 1.6px solid #000000; /* 0.1em */
    border-radius: 32px; /* 2em */
}

.searchButton {
    padding: 8px; /* 0.5em */
    font-size: 16px; /* 1em */
    border: 1.6px solid #000000; /* 0.1em */
    border-radius: 32px; /* 2em */
}

}


  @media screen and (max-width: 1620px) {
    .search{
        text-align: center;
        margin: 1em;
        margin-left: 5em;
        border-radius: 2em;
    }
    
    .searchText{
        padding: 0.5em;
        font-size: 1em;
        border: 0.1em solid #000000;
        background: #ffffff;
        border-radius: 2em ;
    }
      
    .searchButton{
        padding: 0.5em;
        background: #ffffff;
        color: #000000;
        font-size: 1em;
        border: 0.1em solid #000000;
        cursor: pointer;
        border-radius: 2em;
      }
    .highlightButton {
        padding: 0.5em 2.5em;
        font-size: 0.8rem;
    }
    .highlightText {
        font-size: 1.5rem;
    }
    .highlightBot {
        margin: 0.5em 0.5em; /* Adjust margin as needed */
    }
    .mangaImg{
        width: 70px;
        height: auto;
    }
    .titleTop {
        font-size: 3.5rem;
    }

    .titleBot {
        font-size: 1.5rem;
    }  
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.8rem;
}
.search {
    margin: 14px; /* 1em */
    margin-left: 75px; /* 5em */
    border-radius: 30px; /* 2em */
}

.searchText {
    padding: 7px; /* 0.5em */
    font-size: 14px; /* 1em */
    border: 1.4px solid #000000; /* 0.1em */
    border-radius: 30px; /* 2em */
}

.searchButton {
    padding: 7px; /* 0.5em */
    font-size: 14px; /* 1em */
    border: 1.4px solid #000000; /* 0.1em */
    border-radius: 30px; /* 2em */
}

}



@media screen and (max-width: 1440px) {
    .highlightButton {
        padding: 0.5em 2.5em;
        font-size: 0.8rem;
    }
    .highlightText {
        font-size: 1.5rem;
    }
    .highlightBot {
        margin: 0.5em 0.5em; /* Adjust margin as needed */
    }
    .mangaImg{
        width: 70px;
        height: auto;
    }
    .titleTop {
        font-size: 3.5rem;
    }

    .titleBot {
        font-size: 1.5rem;
    }  
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.8rem;
}
.search {
    margin: 12px; /* 1em */
    margin-left: 70px; /* 5em */
    border-radius: 28px; /* 2em */
}

.searchText {
    padding: 6px; /* 0.5em */
    font-size: 12px; /* 1em */
    border: 1.2px solid #000000; /* 0.1em */
    border-radius: 28px; /* 2em */
}

.searchButton {
    padding: 6px; /* 0.5em */
    font-size: 12px; /* 1em */
    border: 1.2px solid #000000; /* 0.1em */
    border-radius: 28px; /* 2em */
}

}

@media screen and (max-width: 1280px) {
    .highlightButton {
        padding: 0.5em 2.5em;
        font-size: 0.8rem;
    }
    .highlightText {
        font-size: 1.5rem;
    }
    .highlightBot {
        margin: 0.5em 0.5em; /* Adjust margin as needed */
    }
    .mangaImg{
        width: 60px;
        height: auto;
    }
    .titleTop {
        font-size: 3.5rem;
    }

    .titleBot {
        font-size: 1.5rem;
    }  
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.8rem;
}
.search {
    margin: 10px; /* 1em */
    margin-left: 65px; /* 5em */
    border-radius: 26px; /* 2em */
}

.searchText {
    padding: 5px; /* 0.5em */
    font-size: 10px; /* 1em */
    border: 1px solid #000000; /* 0.1em */
    border-radius: 26px; /* 2em */
}

.searchButton {
    padding: 5px; /* 0.5em */
    font-size: 10px; /* 1em */
    border: 1px solid #000000; /* 0.1em */
    border-radius: 26px; /* 2em */
}
}


/* Adjust styles for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
    .highlightButton {
        padding: 0.5em 2.5em;
        font-size: 0.8rem;
    }
    .highlightText {
        font-size: 1.5rem;
    }
    .highlightBot {
        margin: 0.5em 0.5em; /* Adjust margin as needed */
    }
    .mangaImg{
        width: 50px;
        height: auto;
    }
    .titleTop {
        font-size: 3.5rem;
    }

    .titleBot {
        font-size: 1.5rem;
    }  
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.8rem;
}
.search {
    margin: 8px; /* 1em */
    margin-left: 60px; /* 5em */
    border-radius: 24px; /* 2em */
}

.searchText {
    padding: 4px; /* 0.5em */
    font-size: 8px; /* 1em */
    border: 0.8px solid #000000; /* 0.1em */
    border-radius: 24px; /* 2em */
}

.searchButton {
    padding: 4px; /* 0.5em */
    font-size: 8px; /* 1em */
    border: 0.8px solid #000000; /* 0.1em */
    border-radius: 24px; /* 2em */
}

}

@media screen and (max-width: 610px) {
    .highlightButton {
        padding: 0.5em 2em;
        font-size: 0.6rem;
    }
    .highlightText {
        font-size: 1rem;
    }
    .highlightBot {
        margin: 0.3em 0.3em; /* Adjust margin as needed */
    }
    .titleTop {
        font-size: 3rem;
    }
    .titleBot {
        font-size: 1rem;
    }
    .mangaImg{
        width: 40px;
        height: auto;
    }
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.6rem;
    }
.search {
    margin: 7px; /* 1em */
    margin-left: 70px; /* 5em */
    border-radius: 26px; /* 2em */
}

.searchText {
    padding: 4px; /* 0.5em */
    font-size: 6px; /* 1em */
    border: 0.6px solid #000000; /* 0.1em */
    border-radius: 22px; /* 2em */
}

.searchButton {
    padding: 2px; /* 0.5em */
    font-size: 6px; /* 1em */
    border: 0.6px solid #000000; /* 0.1em */
    border-radius: 22px; /* 2em */
}
}
/* Adjust styles for screens with a maximum width of 480px */
@media screen and (max-width: 480px) {
    .highlightButton {
        padding: 0.5em 1em;
        font-size: 0.4rem;
    }
    .highlightText {
        font-size: 0.5rem;
    }
    .highlightBot {
        margin: 0.5em 0.1em; /* Adjust margin as needed */
    }
    .titleTop {
        font-size: 2.5rem;
    }
    .titleBot {
        font-size: 1rem;
    }
    .mangaImg{
        width: 35px;
        height: auto;
    }
    .mangaTitle{
        width: 100%;
        padding: 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: auto;
        color: #ffffff;
        text-align: center;
        font-size: 0.4rem;
}
.search {
    margin: 6px; /* 1em */
    margin-left: 60px; /* 5em */
    border-radius: 24px; /* 2em */
}

.searchText {
    padding: 4px; /* 0.5em */
    font-size: 4px; /* 1em */
    border: 0.4px solid #000000; /* 0.1em */
    border-radius: 20px; /* 2em */
}

.searchButton {
    padding: 4px; /* 0.5em */
    font-size: 4px; /* 1em */
    border: 0.4px solid #000000; /* 0.1em */
    border-radius: 20px; /* 2em */
}

/* For Webkit browsers (e.g., Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #333; /* Dark color for the thumb */
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #222; /* Dark color for the track */
  }
  
  /* For Firefox */
  scrollbar-color: #333 #222; /* Dark color for the thumb and track in Firefox */