@font-face { font-family: Heaters; src: url('/fonts/Heaters.otf'); }
@font-face { font-family: ReggaeOne; src: url('/fonts/ReggaeOne-Regular.ttf'); }
@font-face { font-family: NinKage Reg; src: url('/fonts/NinjaKageDemoRegular.otf'); }

:root {
  --cur-main: url('/assets/NarutoMain.png'), auto;
  --cur-point: url('/assets/NarutoSelect.png'), auto;
  --dark:#0d1217;
  --accent:#A33252;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background-color:black;
  background-image:url('/imgs/narutobg.png');
  background-size:repeat;
  color:white;
  width:100vw;
  height:100vh;
  font-family:'ReggaeOne';
}

a {
  text-decoration:none;
  cursor:var(--cur-point);
}

#page {
  position:absolute;
  width:100vw;
  height:100vh;
}

#main {
  display:block;
  width:1200px;
  height:100vh;
  margin:0 auto;
  background-color:var(--dark);
  text-align:justify;
  border-right:10px solid var(--accent);
  border-left:10px solid var(--accent);
}

#banner {
  margin:0 auto;
  width:1200px;
  height:100px;
}
.upperban {
  position:fixed;
  top:0;
  background-image:url('/imgs/naruto_top.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:100%;
  border-bottom:10px solid var(--accent);
}
.lowerban {
  position:fixed;
  bottom:0;
  background-image:url('/imgs/naruto_bottom.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:100%;
  border-top:10px solid var(--accent);
}

#container {
  width:100%;
  overflow-y:auto;
}

#content {
  margin:130px 20px 20px 20px;
}

#header {
  display:flex;
  justify-content:center;
  align-items:center;
}
#header img {
  width:auto;
  height:100px;
}

#menu {
  position:fixed;
  right:170px;
  top:120px;
  width:420px;
  text-align:center;
  transform:skewY(-5deg);
  z-index:99999;
}
#menu a {
  font-family:'NinKage Reg';
  font-size:50px;
  font-style:italic;
  letter-spacing:-5px;
  line-height:70px;
  color:transparent;
  padding:0 10px;
  filter:drop-shadow(0 0 3px black);
  background-clip:text;
  -background-clip:border-box;
  -webkit-text-stroke-width:2px;
  -webkit-text-stroke-color:white;
  transition:all 0.2s;
    -webkit-transition:all 0.2s;
    -moz-transition:all 0.2s;
    -o-transition:all 0.2s;
}
#menu a:hover {
  font-size:60px;
  transition:all 0.2s;
    -webkit-transition:all 0.2s;
    -moz-transition:all 0.2s;
    -o-transition:all 0.2s;
}
#menu a::before {
  content:'༄';
  padding-right:10px;
  -webkit-text-stroke-width:0;
}
.orange { 
  background-image:linear-gradient(0deg, #e7863f 30%, #c11746 70%);
}
.yellow {
  background-image:linear-gradient(0deg, #f5dc6c 30%, #d49804 70%);
}
.green {
  background-image:linear-gradient(0deg, #eafc6c 30%, #008a00 70%);
}
.blue {
  background-image:linear-gradient(0deg, #81d7d6 30%, #0288df 70%);
}
.purple {
  background-image:linear-gradient(0deg, #bb84b9 30%, #5e43b4 70%);
}
.pink {
  background-image:linear-gradient(0deg, #f4b4d3 30%, #7d1e6b 70%);
}





h1 {
  font-family:'Heaters';
  font-size:100px;
  font-weight:normal;
  line-height:70px;
  margin-bottom:20px;
}