root {
--transparent-col: rgba(137, 222, 255, 0.425);
}

@font-face {
	font-family:'NDS12';
		src:url('fonts/NDS12.eot');
		src:url('fonts/NDS12.eot?#iefix') format('embedded-opentype'),
				url('fonts/NDS12.woff') format('woff'),
				url('fonts/NDS12.ttf') format('truetype'),
				url('fonts/NDS12.svg#NDS12') format('svg');
	font-weight: thin;
	font-style: normal;
}

* {
    scrollbar-color: rgb(198, 176, 250);
    scrollbar-width: thin;
    box-sizing: border-box;
}

p {
    color: rgb(48, 58, 105);
}

body {
    font: rgb(49, 56, 88);
    background: url(https://ifi.games/rebirth1/img/bg.jpg) top no-repeat;
    background-size: cover;
    font-family: 'NDS12', sans-serif;
    margin: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

h1 {
  color: rgb(48, 58, 105);
  position: absolute;
  left: 0.3em;
  top: 1.2em;
}

h2 {
  color: rgb(48, 58, 105);
  position: absolute;
  left: 1em;
  top: 3.4em;
}


#smaller-wrapper {
    background-color: rgba(164, 188, 255, 0.452);
    width: min-content;
    height: 870px;
    margin: auto;
    display: flex;
    position: relative;
    padding: 10px;
    gap: 10px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);

}


.nav-left {
    background-color: rgba(255, 255, 255, 0.507);
    margin-top: 150px;
    width: 200px;
    height: 700px;
    border-top: #fff solid 1px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

.directorytitle {
    color: rgba(231, 239, 247, 0.678);
    font-style: italic;
    margin-top: 5px;
  font-size: 1.3rem;
  text-transform: uppercase;
  text-align: center;
  border:2px inset #5d66e4;
  border-radius:10px;
  background:#689dffc5;
  width: 170px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0px 0px 2px #fff);
  transition: .2s;
}

#Nep {
    height: 160px;
    width: 190px;
    margin-bottom: 10px;
}

.specialp {
    margin: 5px;
}

#header {
    background-image: url(https://mahoyo-en.com/assets/img/common/menu/bg_header.jpg) repeat-x center bottom;
    background-size: cover;
    opacity: 1;
    height: 50px;
    position: fixed;
    background-color:#fff; 
    z-index: 100; 
    height: 50px; 
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 1000;
    width: 100%;
}

.main {
    background-color: rgba(255, 255, 255, 0.507);
    margin-top: 150px;
    padding: 15px;
    height: auto;
    width: 800px;
    text-align: center;
    border-top: #fff solid 1px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

.icon {
    margin-top: 15px;
    margin-left: 15px;
    display: border-box;
    float: left;
    width: 213px;
    height: 213px;
    box-sizing: border-box;
    border-color: 5px solid  rgb(109, 151, 185);
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

.desc {
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
    background-color: rgba(255, 255, 255, 0.507);
    float: right;
    padding: 10px;
    width: 500px;
    height: 213px;
    display: block;
    text-align: right;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

.slider-thingy {
    padding: 10px;
    margin-top: 250px;
    background-color: rgba(255, 255, 255, 0.507);
    height: 350px;
    width: 400px;
    margin-left: 15px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

.slider-thingy2 {
    overflow-y: scroll;
    margin-right: 15px;
    margin-top: 22px;
    float: right;
    background-color: rgba(255, 255, 255, 0.507);
    height: 350px;
    width: 300px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

#small-marquee {
    margin-left: 15px;
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.507);
    height: 45px;
    width: 400px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}

#even-smaller-div {
    margin-right: 15px;
    margin-top: 15px;
    float: right;
    background-color: rgba(255, 255, 255, 0.507);
    width:  300px;
    height: 45px;
    box-shadow: 6px 12px 18px -6px rgba(0,0,0,0.3);
}




a:hover {
    text-decoration: underline;
}

.tabs {
  margin-top: -2px;
  margin-left: 3px;
  margin-right: 3px;
  float:inline-start;
  border:#5d66e4 1px solid;
  padding-top: 2px;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 7px;
  color: #689dffc5;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #689dffc5;
  filter: none;
  background: linear-gradient(180deg, rgba(93,183,252,1) 0%, #689dffc5 100%);
}

.container {
    opacity: 0.7;
    background: #ffffff6e;
    padding: 10px;
    height: 300px;
    width: 380px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 29px;
    border: #5d66e4 solid 1px;
}

div {
    display: block;
    display: border-box;
    unicode-bidi: isolate;
    border-radius: 10px;
}

center {
    display: block;
}

footer {
    color: rgb(48, 58, 105);
    margin: 10px;
    text-align: center;
}