@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:radial-gradient(#021220 10%,black 50%);
 scrollbar-color:white #969696;
}

canvas {
    display:block;
    height:100%;
    width:100%;
}


#canvas1 {
    position:absolute;
    display:block;
  
}

a{
  text-decoration:none;
  color:transparent;
  padding:0px 50px;
}


.tallgrass{
    height:100%;
    width:100%;
    top:0;
    left:0;
}

.shortgrass{
  height:20%;
  width:100%;
  bottom:0;
  transform: scaleX(-1);
}


body::-webkit-scrollbar-thumb{
  background:  #021220,radial-gradient(white,#4d3311,#021220);
  background-size:3px 3px;
  background-position:10px 0px,0px 0px;
  border-radius:30px;
  width:6px;
}

body::-webkit-scrollbar{
  -webkit-background:#021220;;
  background:#021220;
  width:10px;
}


.left-tree{
  width:100px;
  height:100%;
   background:linear-gradient(transparent,black),linear-gradient(
90deg,rgba(88,52,36,0.4),rgba(35,19,12,0.4)),linear-gradient(
90deg,rgba(88,52,36,0.4),rgba(35,19,12,0.4)),radial-gradient(
rgb(128,84,65),#23130c);
    background-size:100% 100%,5px 5px,10px 10px,100% 100%;
  background-position:2px 5px,0px 0px,0px 0px;
}

.left-tree-container{
    position:absolute;
    max-width:500px;
    min-width:100px;
    width:50%;
    height:100%;
    min-height:500px;
    top:0px;
}

.center-tree-container{
    position:absolute;
    margin:auto;
    max-width:600px;
    min-width:100px;
    width:50%;
    height:100%;
    min-height:500px;
    top:0px;
    right:0;
    left:0;
}


.right-tree-container{
    position:absolute;
    max-width:500px;
    min-width:100px;
    width:50%;
    height:100%;
    min-height:500px;
    right:0;
}

svg{
  height:100%;
  width:100%;
}

.glow{
  width:300px;
  height:300px;
  background:radial-gradient(rgba(255,231,113,0.5),rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.2) 20%,rgba(255,255,255,0.1) 30%,rgba(255,255,255,0) 60%);
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:22%;

  border-radius:50%;
}

.pole-container{
  animation:ghostly-turn 2s;
  position:fixed;
  bottom:0;
  width:100%;
  height:80%;
  transform-style: preserve-3d;  
}

.pole{
  background:linear-gradient(transparent,black),linear-gradient(
90deg,rgba(88,52,36,0.4),rgba(35,19,12,0.4)),linear-gradient(
90deg,rgba(88,52,36,0.4),rgba(35,19,12,0.4)),radial-gradient(
rgb(128,84,65),#23130c);
  background-size:100% 100%,5px 5px,10px 10px,100% 100%;
  background-position:2px 5px,0px 0px,0px 0px;
  height:100%;
  width:20px;
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  border-radius:20% 20% 0px 0px;
}

.sign{
    background:linear-gradient(rgba(88,52,36,0.5),rgba(35,19,12,0.5)),radial-gradient(
rgb(128,84,65),#23130c,black);
  background-size:10px 10px,100% 100%;
  width:200px;
  padding:20px 0px;
  clip-path: polygon(0% 20%, 85% 20%, 100% 50%, 85% 80%, 0% 80%);
  -webkit-clip-path: polygon(0% 20%, 85% 20%, 100% 50%, 85% 80%, 0% 80%);
  position:absolute;
  margin:auto;
  left:20px;
  right:0;
  color: transparent;
  font-size: 34px;
  text-align: center;
  font-family: 'Indie Flower', cursive;
  text-shadow: 0px 0px 2px #23130c,0px 0px 1px black;
  border-radius:50px;
  backface-visibility: hidden;
}

.sign{
  cursor:pointer;
  transition:0.5s;
}

.sign-1{
  transform:rotate(-10deg);
}

.sign-1:hover{
  transform:rotate(10deg);
}

.sign-2{
  top:100px;
  transform: rotateY(50deg);
}



.sign-2:hover{
  transform: rotateY(50deg) rotate(-10deg);
}

.sign-3{
  top:200px;
}

.sign-3:hover{
   transform: rotateY(30deg);
}



@keyframes ghostly-turn{
  100%{
    transform: rotateY(360deg);
  }
}