/* font forêt */

@font-face {
    font-family: More;
    src: url(https://fanroad.neocities.org/fonts/PS55.woff);
}

@font-face {
    font-family: "MS PGothic";
    src: url(https://fanroad.neocities.org/fonts/MS-PGothic.woff);
}

/* basics */

body, html {
  height: 100%;
  margin: 0;
  overflow:hidden;
  cursor: help;
}

.bg {
  background-image: linear-gradient(to right, #E3E7DA, #D4E5ED);
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow:hidden;
}

/* scroll that shit */

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

/* container ship */

.god {
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height:600px;
  width:950px;
  background-image: linear-gradient(to right, #D4E5ED, #E3E7DA);
  box-shadow: -10px 10px 20px #D4E5ED, 10px -10px 20px #E3E7DA;
  border-radius:10px 0px 20px 0px;
}

/* header */

.header {
  width:950px;
  margin-top:-50px;
}

.inset {
  margin: 0 auto;
  position: relative;
  height:100px;
  width:240px;
  background-image:url(https://fanroad.neocities.org/true/images/fanroad.png);
  background-size:contain;
}

.risk {
  position:absolute;
  width:20px;
  height:20px;
  margin-left:230px;
  margin-top:-30px;
}

/* font change code ripped from tfunk2 */

.change-text {
  font-size: 40pt;
  color:#E3E7DA;
  text-shadow: -1px -1px 0 #e44084, 1px -1px 0 #e44084, -1px 1px 0 #e44084, 2px 2px 0 #e44084;
  animation-name: fontChange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes fontChange {
  0% {
    font-family: 'Major Mono Display', monospace;
  }
  20% {
    font-family: 'Kaushan Script', cursive;
  }
  40% {
    font-family: 'Lobster', cursive;
  }
  60% {
    font-family: 'Ranchers', cursive;
  }
  80% {
    font-family: 'Bitter', serif;
  }
  100% {
    font-family: 'Major Mono Display', monospace;
  }
}

/* nav sidebar */

.sidebar {
  position:absolute;
  display: flex;
  margin-top:-50px;
  margin-left:-200px;
  height:100%;
  width:200px;
  flex-direction: column;
  gap:5px;
}

.navlink {
  flex: 1;
  height: 100px;
  display: flex;
  text-decoration: none;
  width:90%;
  flex-grow: 1;
  margin-left:5%;
  overflow-wrap: break-word;
  hyphens: auto;
  border-radius:2px;
  cursor: cell;
}

.navlink b {
  color:#fff;
  font-family:'More';
  font-size:40px;
  font-style:italic;
  filter: blur(2px);
  padding:5px;
}

.navlink i {
  color:#000;
  font-family:'More';
  font-size:40px;
  font-style:italic;
  opacity:.8;
  filter: blur(1px);
  padding:5px;
}

.navlink i:hover {
  filter: blur(4px);
}

.navlink b:hover {
  filter: blur(4px);
}

.navlink:nth-child(1) {
  background-image: url('https://fanroad.neocities.org/images/home/computer.png');
  background-size: cover;
}

.navlink:nth-child(2) {
  background-image: url('https://fanroad.neocities.org/images/home/books.png');
  background-size: cover;
}

.navlink:nth-child(3) {
  background-image: url('https://fanroad.neocities.org/images/home/laserdisc.png');
  background-size: cover;
}

.navlink:nth-child(4) {
  background-image: url('https://fanroad.neocities.org/images/home/typing.gif');
  background-size: cover;
}

.navaud {
  flex-grow:0;
  background-color:pink;
  width:85%;
  padding-left:5%;
  padding-right:5%;
  box-shadow: 0px 0px 20px pink, 0px 0px 20px pink, 0px 0px 20px pink, 0px 0px 20px pink;
  border-radius:10px;
}

/* music player evil little bastard fucker extreme */
        
#songTitle {
  font-family:"Verdana", sans-serif;
  font-size:10px;
}

button { 
  font-size:11px;
  font-family:"Verdana", sans-serif;
  background:transparent;
  border: 0px;
  color: #2a2f4a;
  padding:0px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-decoration:underline;
}

/* workable space ! */

#home {
  position:absolute;
  width:950px;
  height:550px;
  overflow:hidden;
}

.num {
  position:absolute;
}

.boxer {
  margin-top:10px;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.box {
  font-size: 13px;
  text-align: justify;
  width:220px;
  height:250px;
  overflow:hidden;
}

.txt {
  padding: 30px;
  font-size: 12px;
  color: black;
  line-height:20px;
}

.txt a {
  color:black;
}

.txt a:hover {
  font-style:italic;
}

/* little text stuff */

.cornertxt {
  z-index:99999;
  position:absolute;
  margin-top:510px;
  margin-left:630px;
  width:250px;
  text-align:center;
  font-size:12px;
  font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#2a2f4a;
  text-shadow: -1px -1px 0 #f8f9f4, 1px -1px 0 #f8f9f4, -1px 1px 0 #f8f9f4, 1px 1px 0 #f8f9f4;
}

.cornertxt a {
  color:#2a2f4a;
}

.cornertxt a:hover {
  color:#9157ba;
}

.cornerimg {
  z-index:9;
  position:absolute;
  width:250px;
  height:15px;
  margin-top:490px;
  margin-left:630px;
  background-image:url(https://fanroad.neocities.org/images/home/hearts.gif);
}

.cornerl {
  z-index:12;
  position:absolute;
  width:37px;
  height:49px;
  margin-top:455px;
  margin-left:630px;
  background-image:url(https://fanroad.neocities.org/images/blog_imgs/laharl.gif);
}