@font-face { font-family: Eponymous; src: url('/fonts/Eponymous-Regular.otf'); }
@font-face { font-family: Nexa; src: url('/fonts/NexaDemo-Light.otf'); }
@font-face { font-family: SouthRose; src: url('/fonts/SouthRose.ttf'); }

:root {
  --cur-main: url('/assets/FaustNormal1.png'), auto;
  --cur-point: url('/assets/FaustVertical1.png'), auto;
  --gradient:#1d125f, #81007d;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
  animation: cursor 0.7s linear infinite;
}
@keyframes cursor {
    0% { 
        cursor: url(/assets/FaustNormal1.png), auto;
    }
    50% { 
        cursor: url(/assets/FaustNormal2.png), auto;
    }
    100% { 
        cursor: url(/assets/FaustNormal1.png), auto;
    }
}

body {
  background:url('/imgs/thearcanabg.png');
  color:white;
  width:100vw;
  height:100vh;
}

a {
  cursor:var(--cur-point);
  animation: pointer 0.5s linear infinite;
}
@keyframes pointer {
    0% { 
        cursor: url(/assets/FaustVertical1.png), auto;
    }
    25% { 
        cursor: url(/assets/FaustVertical2.png), auto;
    }
    50% { 
        cursor: url(/assets/FaustVertical3.png), auto;
    }
    75% { 
        cursor: url(/assets/FaustVertical4.png), auto;
    }
    100% { 
        cursor: url(/assets/FaustVertical1.png), auto;
    }
}





#logo {
  position:fixed;
  left:5%;
  top:50%;
  transform:translateY(-50%);
}

#border {
  position:fixed;
  left:38.5%;
  width:800px;
  height:100vh;
  background:linear-gradient(0deg, var(--gradient));
}

#container {
  left:0;
  right:0;
  margin:0 8px;
  background:#09020d;
  height:100vh;
  overflow-y:auto;
}

#content {
  margin:20px;
  text-align:justify;
}





#nav {
  position:fixed;
  left:35%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:30px;
  z-index:99999;
}
#nav a {
  border-radius:100%;
  display:inline-block;
  text-align:center;
  text-decoration:none;
  position:relative;
  width:40px;
  height:40px;
  margin:0;
}

#nav a.home {
  background:url('/assets/tahome.png') center/20px no-repeat, linear-gradient(0deg, var(--gradient));
  background-blend-mode:normal;
}
#nav a.home:hover {
  background-blend-mode:overlay, normal;
}
#nav a.shrine {
  background:url('/assets/tashrine.png') center/20px no-repeat, linear-gradient(0deg, var(--gradient));
  background-blend-mode:normal;
}
#nav a.shrine:hover {
  background-blend-mode:overlay, normal;
}
#nav a.faves {
  background:url('/assets/tafaves.png') center/20px no-repeat, linear-gradient(0deg, var(--gradient));
  background-blend-mode:normal;
}
#nav a.faves:hover {
  background-blend-mode:overlay, normal;
}
#nav a.links {
  background:url('/assets/talinks.png') center/20px no-repeat, linear-gradient(0deg, var(--gradient));
  background-blend-mode:normal;
}
#nav a.links:hover {
  background-blend-mode:overlay, normal;
}

#nav a span {
  font-family:'Eponymous';
  font-size:17px;
  letter-spacing:1px;
  position:absolute;
  left:-25px;
  bottom:5px;
  padding:5px 10px;
  opacity:0;
  transition:all 0.3s ease-in;
    -webkit-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    -o-transition:all 0.3s ease-in;
}
#nav a:hover span {
  left:50px;
  color:white;
  opacity:1;
  background:linear-gradient(0deg, var(--gradient));
  border-radius:10px;
}





h1 {
  font-family:'SouthRose';
  font-size:60px;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(255, 255, 255, 0.7);
  margin-bottom:10px;
}

p {
  font-family:'Nexa';
  margin-bottom:20px;
}