* {
  margin: 0;
  padding: 0;
}
body {
  /* background-color: rgb(236, 149, 48); */
  background: #d57e12;
  color: white !important;
  margin: 0; /* Remove default body margin */
  height: 150vh;
  /* border: 2px solid red; */
}

#menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1; /* Set a higher z-index to keep the button above other elements */
}

#menu-btn-close {
  display: none;
  /* position: fixed; */
  /* z-index: 101 !important; Set a higher z-index than the opened image */
}
.menu-icon {
  width: 80px;
  height: 80px;
  z-index: +200;
  display: block;
}

#opened-image {
  /* position: absolute; */
  display: none;
  margin-left: 9%;
  z-index: +100;
  margin-top: -2%;
}

.logo-container {
  top: 10px;
  position: absolute;
  left: 5%;
  transform: translateX(-20%);
  z-index: -1; /*Set a higher z-index to keep the logo above other elements*/
}

.navbar-logo {
  width: 300px;
  height: 200px;
  border-radius: 0%;
}
#menu-btn-close {
  display: none;
}
body.active {
  overflow: hidden;
}
/* Define scrollbar styles */
body::-webkit-scrollbar {
  width: 5px; /* width of the scrollbar */
}

body::-webkit-scrollbar-thumb {
  background-color: #cf672b; /* color of the scrollbar thumb */
  border-radius: 70%; /* roundness of the scrollbar thumb */
}

body::-webkit-scrollbar-track {
  background-color: #050505; /* color of the scrollbar track */
}
/* Style for navigation text */
#navigation-text {
  display: none;
  /* border: 1px solid red; */
  border-top-right-radius: 30%;
  color: white;
  width: 100%;
  height: 100vh; /* Set height to full viewport height */
  margin: 0; /* Reset margin */
  position: fixed; /* Change position to fixed */
  font-size: 40px;
  font-weight: 900;
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  background: rgba(
    0,
    0,
    0,
    0.5
  ); /* Add background color with some transparency */
  z-index: 100;
  overflow-y: auto; /* Enable vertical scrolling if content exceeds viewport height */
  padding: 20px; /* Add padding */
  cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1160.ani),
    url(https://ani.cursors-4u.net/cursors/cur-13/cur1160.png), auto;
}

#navigation-text:hover {
  display: contents;
}
.nav_about_naruto {
  /* border: 1px solid blue; */
  margin-top: 5%;
  width: fit-content;
  margin-left: 20%;
}
.nav_anime {
  /* border: 1px silver solid; */
  margin-top: -3%;
  width: fit-content;
  margin-left: 80%;
}
.nav_manga {
  /* border: 1px solid yellow; */
  margin-top: 3%;
  width: fit-content;
  margin-left: 50%;
}
.nav_contact {
  /* border: 1px solid gainsboro; */
  margin-top: 5%;
  width: fit-content;
  margin-left: 22%;
}
.nav_link_to_back {
  /* border: 1px solid green; */
  margin-left: 67%;
  width: fit-content;
  margin-top: 190% !important;
}
.nav_makup {
  color: inherit;
}
ul {
  width: fit-content;
  color: #e6b7b7f3;
  text-shadow: 9px 1px 12px rgb(202, 69, 8);
  position: absolute;
  z-index: 1000;
  text-align: center;
  align-items: center;
  list-style-type: none !important;
}

.nav_about_naruto > ul {
  display: none;
  padding-right: 10%;
}

.nav_about_naruto:hover > ul {
  display: block;
}
ol {
  /* width: fit-content; */
  color: #a07637f3;
  text-shadow: -9px 1px 100px rgb(6, 9, 92);
  position: absolute;
  z-index: 1000;
  text-align: center;
  /* border: 1px red dotted; */
  list-style-type: none !important;
}
.nav_anime > ol {
  display: none;
  margin-left: -10%;
  width: max-content;
  padding: 0;
}
.nav_anime:hover > ol {
  display: block;
  overflow: hidden !important;
}