/*navigation*/
.occult_nature_nav > input,
.occult_nature_nav section > div {
  display: none;
}

#above:checked ~ section .above
{
  display: block;
  animation-name:display1;
  animation-duration:1s;
  animation-play-state:running;
}

#below:checked ~ section .below{/*section below & section above split for styling purposes*/

  display: block;
  animation-name:display2;
  animation-duration:1s;
  animation-play-state:running;
}
/*navigation*/

label{
  font-size:300%;
}

@keyframes display1{
  0% {  
    opacity:0.2;
    background-color:rgb(107, 5, 5);
  }
  
  100% { 
    opacity:1;
    background-color:rgb(1, 87, 1);
  }
}

@keyframes display2{
  0% {  
    opacity:0.2;
    background-color:rgb(1, 87, 1);
  }
  
  100% { 
    opacity:1;
    background-color:rgb(107, 5, 5);
  }
}

.occult_nature_nav label:hover{
cursor:pointer;
animation-name:hovershow;
animation-duration:1s;
animation-fill-mode: forwards; 
animation-play-state:running;
}


@keyframes hovershow{
0%{
  color:black;
  font-size:300%;
}
100%{
  color:aliceblue;
  font-size:330%;
}
}

.occult_nature_nav label:not(:hover){
animation-name:hovergo;
animation-duration:1s;
animation-play-state:running;
animation-fill-mode: forwards; 
}

@keyframes hovergo{
  0%{
    color:aliceblue;
    font-size:330%;
  }
  100%{
    color:black;
    font-size:300%;
  }
}

nav ul{
list-style-type:none;
}

nav{
  position:absolute;
  z-index:4;
}

section .above .below{
position:absolute;
z-index:5;
}

section .above{
background-color:rgb(1, 87, 1);
width:100vw;
height:100vh;
}

section .below{
background-color:rgb(107, 5, 5);
width:100vw;
height:100vh;
}

.abovenav{
  position:absolute;
  z-index:6;
  height:600px;
  margin-top:19vh;
  margin-left:10vh;
  width:90%;
  border-radius:10%;
  border:5px double rgb(0, 59, 0);
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(151, 228, 151);
}

.abovebox1, .abovebox2, .abovebox3{
height:500px;
width:300px;
display:flex;
align-content:center;
align-items:center;
justify-content:start;
flex-direction: column;
background-color:rgb(1, 87, 1);
border: 5px solid rgb(0, 51, 0);
color:gainsboro;
border-radius:5%;
margin-left:50px;
margin-right:50px;
overflow-y:scroll;
}




.belownav{
  position:absolute;
  z-index:7;
  height:600px;
  margin-top:19vh;
  margin-left:10vh;
  width:90%;
  border-radius:10%;
  border:5px double red;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:black;
}

.belowbox1, .belowbox2, .belowbox3{
height:500px;
width:300px;
display:flex;
align-content:center;
align-items:center;
justify-content:start;
flex-direction: column;
background-color:red;
border: 5px solid darkred;
border-radius:5%;
margin-left:50px;
margin-right:50px;
overflow-y:scroll;
}



/*Below basic format*/

.belowsubpage_bg{
height:101vh;
width:50vw;
left:50%;
margin-left:-25vw;
margin-top:-1vh;
background-color:black;
border-left:5px double red;
border-right:5px double red;
position:absolute;
z-index:-2;
}

.belowsubpage_top{
height:101vh;
width:42vw;
margin:auto;
margin-top:-1vh;
background-color:rgb(109, 0, 0);
border-left:10px double red;
border-right:10px double red;
overflow-y:scroll;
}
.belowsubpage_top p{
margin-left:50px;
margin-right:50px;
text-align:center;
font-size:115%;
line-height:170%;
word-spacing:70%;
letter-spacing:-7%;
color:whitesmoke;
}
#pop1, #pop2{
color:black;
}

#left{
position:absolute;
z-index:-1;
text-align:left;
margin-top:-5vh;
margin-left:15vw;
text-decoration:none;
color:red;
}

#right{
position:absolute;
z-index:-1;
right:50%;
margin-right:-36vw;
margin-top:-5vh;
text-decoration:none;
color:red;
}

.belowsubpage_dec1{
width: 0;
height: 0;
border-left: 1000px solid transparent;
border-right: 1000px solid transparent;
border-top: 1100px solid black;
left:50%;
margin-left:-1000px;
position:absolute;
z-index:-3;
}

.belowsubpage_dec2{
width: 0;
height: 0;
border-left: 1300px solid transparent;
border-right: 1300px solid transparent;
border-top: 1400px solid darkred;
left:50%;
margin-left:-1300px;
position:absolute;
z-index:-4;
}




[data-title]:focus:after {
    display:block;
    animation-name:hoverspan;
    animation-duration:2.5s;
  }

[data-title]:after {
    content:attr(data-title);
   background-color:black;
    margin:20px;
    padding:40px;
    border-radius:10px;
    word-wrap:break-word;
    white-space: pre-wrap;
    font-size: 105%;
    padding-bottom:6px;
    display:none;
  }
 [data-title]{
color:aliceblue;
 }
 [data-title]:focus{
  text-decoration:none;
  font-style:italic;
}

@keyframes hoverspan{
  from{opacity:0%;}
  to{opacity:100%;}
}
/*Below basic format*/