Spider CSS

@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css?family=Unica+One');

body {
background-color: #070707;
background-image: url("https://www.transparenttextures.com/patterns/brilliant.png");
background-size: 0.24%;
}

.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
height: 10vw;
width: 10vw;
outline: 0.1vw solid #F8F8F8;
}

.spider{
position: absolute;
left: 0;
top: 0;
height: 10vw;
width: 10vw;
background-image: url("https://i.imgur.com/jbVozWD.gif");
background-size: cover;
}

.panel {
position: absolute;
left: 0;
top: 0;
height: 10vw;
width: 10vw;
opacity: 0;
z-index: -1;
background-color: #070707;
}

.panel:target {
position: absolute;
left: 0;
top: 0;
height: 10vw;
width: 10vw;
opacity: 1;
z-index: 99;

}

.text {
font-family: 'Abel', sans-serif;
font-size: 0.9vw;
padding: 6%;
color: #F8F8F8;
text-align: justify;
text-justify: inter-word;
}

.star{
position: absolute;
left: 0;
top: 0;
height: 10vw;
width: 10vw;
outline: 0.1vw solid #F8F8F8;
background-color: #070707;
z-index: -1;
transform: rotate(-45deg);
}

.righttab {
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 3vw solid #070707;
border-left: 3vw solid transparent;
transition: 0.5s;
}

.righttab:hover {
border-bottom: 3vw solid #F8F8F8;
}

.bottab {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom: 3vw solid #070707;
border-right: 3vw solid transparent;
transition: 0.5s;
}

.bottab:hover {
border-bottom: 3vw solid #F8F8F8;
}

.toptab {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 3vw solid #070707;
border-left: 3vw solid transparent;
transition: 0.5s;
}

.toptab:hover {
border-top: 3vw solid #F8F8F8;
}

.lefttab {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 3vw solid #070707;
border-right: 3vw solid transparent;
transition: 0.5s;
}

.lefttab:hover {
border-top: 3vw solid #F8F8F8;
}

.rightline {
position: absolute;
left: 100%;
top: 50%;
width: 0vw;
background-color: #F8F8F8;
height: 0.05vw;
z-index: -2;
animation: extendh 1.75s;
animation-fill-mode: forwards;
}

.topline {
position: absolute;
left: 50%;
bottom: 100%;
width: 0.05vw;
background-color: #F8F8F8;
height: 0vw;
z-index: -2;
animation: extendv 1.75s;
animation-fill-mode: forwards;
}

.botline {
position: absolute;
left: 50%;
top: 100%;
width: 0.05vw;
background-color: #F8F8F8;
height: 0vw;
z-index: -2;
animation: extendv 1.75s;
animation-fill-mode: forwards;
}

.leftline{
position: absolute;
right: 100%;
top: 50%;
width:0vw;
background-color: #F8F8F8;
height: 0.05vw;
z-index: -2;
animation: extendh 1.75s;
animation-fill-mode: forwards;
}

@keyframes extendv {
from {height: 0vw;}
to {height: 6vw;}
}

@keyframes extendh {
from {width: 0vw;}
to {width: 6vw;}
}

.tablabelt {
position: absolute;
left: 0%;
top: 0%;
transform: translate(-50%, -100%);
height: 2vw;
width: 4vw;
opacity: 0;
animation: reveal 0.5s 1.85s;
animation-fill-mode: forwards;
font-family: 'Unica One', cursive;
font-size: 1.75vw;
color: #F8F8F8;

}


.tablabelr {
position: absolute;
right: 0%;
top: 50%;
transform: translate(107.5%, -50%);
height: 2vw;
width: 4vw;
opacity: 0;
animation: reveal 0.5s 1.85s;
animation-fill-mode: forwards;
font-family: 'Unica One', cursive;
font-size: 1.75vw;
color: #F8F8F8;
}

.tablabelb {
position: absolute;
left: 0%;
bottom: 0%;
transform: translate(-50%, 100%);
height: 2vw;
width: 9vw;
opacity: 0;
animation: reveal 0.5s 1.85s;
animation-fill-mode: forwards;
font-family: 'Unica One', cursive;
font-size: 1.75vw;
color: #F8F8F8;
}

.tablabell {
position: absolute;
left: 0%;
top: 50%;
transform: translate(-107.5%, -50%);
height: 2vw;
width: 4vw;
opacity: 0;
animation: reveal 0.5s 1.85s;
animation-fill-mode: forwards;
font-family: 'Unica One', cursive;
font-size: 1.75vw;
color: #F8F8F8;
}

@keyframes reveal {
from {opacity: 0;}
to {opacity: 1;}
}