:root{
  --outline:black;
}

img{
  max-width:100%;
}

body{
  image-rendering: pixelated;
  font-family:'igiari';
  color:white;
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline);
  background-image:url(lush2.jpg);
    margin:0;
    background-attachment:fixed;
    
}

#sidebar{
  width:30%;
  height:100%;
  border:2px solid white;
  background:url(angelbg2.jpg);
  background-size:cover;
  box-sizing: border-box;
}

everything-else{
  padding-left:2%;
  box-sizing: border-box;
  width:70%;
}

header{
  border-width: 7px; 
  border-style: solid;
  border-image: url("lace3.gif") 7  round;
  width:100%;
  height:auto;
  border-radius:10px;
  background:url('angelbg.jpg');
  background-position: center center;
  background-size:cover;
  text-align:center;
}


textarea{
  resize: none;
  width:50%;
  height:5vh;
  padding:1%;
}

.webring{
  display:inline-block;
}

nav{
  height:25vh;
  width:20vw;
  background:url(goth.png);
  background-size:contain;
  background-repeat:no-repeat;
}

#guide{
  font-family:'yoster';
  min-height:70vh;
  width:100%;
  background:url(guide.png);
  background-size:contain;
  background-repeat: no-repeat;
  position:relative;
}

.dot2 img{
  max-width:30%;
}

.dot2{
  color:seagreen;
  display:inline;
}

#dot21{
  top:8%;
  left:48%;
}

.dot, .dot2{
  position:absolute;
}

.dot:hover, .dot2:hover{
  cursor:help;
}

.dot::before, .dot2::before{
  content: '• ';
}

#dot1{
  top:10%;
  left:10%;
}

#touhou-ring, #shroom, #rabbithearted, #livingpage, #cherished, #potato{
  display:none;
}

#dot1:hover #touhou-ring, #dot2:hover #shroom, #dot3:hover #rabbithearted, #dot4:hover #livingpage, #dot5:hover #cherished, #dot21:hover #potato{
  display:block;
}

#dot2{
  text-align:right;
  top:20%;
  right:22%;
}

#dot3{
  top:50%;
  right:30%;
}

#dot4{
  top:38%;
  left:20%;
}

#dot5{
  top:80%;
  left:10%;
}

#butterflies{
  position:absolute;
  top:0;
  left:0;
}

#butterflies2{
  position:absolute;
  top:0;
  right:0;
}

aside{
  width:30%;
}

#right{
  width:70%;
  padding-left:1%;
  box-sizing: border-box;
}

article{
  position:fixed;
  top:0;
  left:0;
}

#list{
  overflow-y:auto;
  max-height:100%;
}

#content{
  height:60vh;
  display:flex;
  background-size:cover;
  image-rendering: pixelated;
  border:2px solid white;
  background-image:url(medievalpage.png);
  background-position: bottom center;
  margin-top:2vh;
}

main{
  margin:2vh auto;
  width:46vw;
  padding:1%;
  box-sizing: border-box;
}

h1{
  width:100%;
  color:white;
  margin:0;
  font-size:3rem;
  font-family:'alagard';
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline);
    animation:squiggly-anim 0.34s linear infinite;
}

section{
  padding:1%;
    box-sizing: border-box;
    width:100%;
}

@keyframes squiggly-anim{
    0% {
        filter: url("#squiggly-0");
      }
      25% {
        filter: url("#squiggly-1");
      }
      50% {
        filter: url("#squiggly-2");
      }
      75% {
        filter: url("#squiggly-3");
      }
      100% {
        filter: url("#squiggly-4");
      }
}

@font-face {
  font-family: 'igiari';
  src: url('/fonts/Igiari.ttf');
}

@font-face {
  font-family: 'yoster';
  src: url('/fonts/yoster.ttf');
}

@font-face {
  font-family: 'alagard';
  src: url('/fonts/alagard.woff');
}