#cyber-space{
  background-image: radial-gradient( farthest-corner at 40px 40px, rgba(240,240,240,1) 0%, rgba(80,80,80,1) 50%, rgba(18,22,18,1) 75%, rgba(0,6,0,1) 100% );
  position: absolute;
  width: 100vw;
  height: 130vh;
  top: -25vh;
  left: -16vw;
  overflow: hidden;
  border-radius:50%;
  animation:
    moveForward 5s linear infinite,
    sway 1s ease-in-out infinite alternate;
}

#cyber-space:before{
    content: "";
    background-image: radial-gradient( farthest-corner at 40px 40px, rgba(240,240,240,1) 0%, rgba(80,80,80,1) 50%, rgba(18,22,18,1) 75%, rgba(0,6,0,1) 100% );
    position: absolute;
    width: 80vw;
    height: calc(130vh * 0.8);
    border-radius:50%;
    top: 3vh;
    left: 2vw;
}

@keyframes moveForward {
  from { transform: translateX(0); }
  to   { transform: translateX(800px); }
}
@keyframes sway {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(1deg) translateY(-2px); }
  50%  { transform: rotate(0deg) translateY(0); }
  75%  { transform: rotate(-1deg) translateY(2px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@media screen and (max-width: 960px) {
    #cyber-space{
    top: -45vh;
    }
}
.upper-area{
/*  position: absolute;*/
  width: 100vw;
/*  height:20vh;*/
  top: 10vh;
  background-color:#111;
  /* border-bottom: 1px solid #DFFF62; */
  background-repeat: repeat;
  background-position: center bottom;
  background-image: linear-gradient(0deg, transparent calc(100% - 0.1px), #ccc calc(100% - 0.1px)),
linear-gradient(90deg, transparent calc(100% - 0.5px), #ccc calc(100% - 0.5px));
background-size: 5vh 10vh;
  z-index:200;
}
/*

@media screen and (max-width: 960px) {
.upper-area{
  height:30vh;
    }
}
*/

@media screen and (max-width: 560px) {
.upper-area{
  height:40vh;
    }
}


.horizontal span{
  background:#ccc;
  width: 100vw;
  height: 3px;
  position: absolute;
  animation-duration: .3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.horizontal span:first-child{
  animation-name: horzn1;
}
@keyframes horzn1 {
  from {
    top: 20.4vh;
  }
  to {
    top: 20.9vh;
  }
}
.horizontal span:nth-child(2){ 
  top: 20.9vh;
  animation-name: horzn2;
}
@keyframes horzn2 {
  from {
    top: 20.9vh;
  }
  to {
    top: 21.6vh;
}
}
.horizontal span:nth-child(3){ 
  animation-name: horzn3;
}
@keyframes horzn3 {
  from {
    top: 21.6vh;
  }
  to {
    top: 22.3vh;
}
}
.horizontal span:nth-child(4){ 
  animation-name: horzn4;
}
@keyframes horzn4 {
  from {
    top: 22.3vh;
  }
  to {
    top: 23.2vh;
}
}
.horizontal span:nth-child(5){ 
  animation-name: horzn5;
}
@keyframes horzn5 {
  from {
    top: 23.2vh;
  }
  to {
    top: 24.3vh;
}
}
.horizontal span:nth-child(6){ 
  animation-name: horzn6;
}
@keyframes horzn6 {
  from {
    top: 24.3vh;
  }
  to {
    top: 25.5vh;
}
}
.horizontal span:nth-child(7){ 
  animation-name: horzn7;
}
@keyframes horzn7 {
  from {
    top: 25.5vh;
  }
  to {
    top: 27.1vh;
}
}
.horizontal span:nth-child(8){ 
  animation-name: horzn8;
}
@keyframes horzn8 {
  from {
    top: 27.1vh;
  }
  to {
    top: 28.9vh;
}
}
.horizontal span:nth-child(9){ 
  animation-name: horzn9;
}
@keyframes horzn9 {
  from {
    top: 28.9vh;
  }
  to {
    top: 31.1vh;
}
}
.horizontal span:nth-child(10){ 
  animation-name: horzn10;
}
@keyframes horzn10 {
  from {
    top: 31.1vh;
  }
  to {
    top: 33.0vh;
}
}

.horizontal span:nth-last-child(10){ 
  animation-name: horzn11;
}
@keyframes horzn11 {
  from {
    top: 33.8vh;
  }
  to {
    top: 37.0vh;
}
}
.horizontal span:nth-last-child(9){ 
  animation-name: horzn12;
}
@keyframes horzn12 {
  from {
    top: 37.0vh;
  }
  to {
    top: 40.8vh;
}
}
.horizontal span:nth-last-child(8){ 
  animation-name: horzn13;
}
@keyframes horzn13 {
  from {
    top: 40.8vh;
  }
  to {
  top: 45.4vh;
}
}
.horizontal span:nth-last-child(7){ 
  animation-name: horzn15;
}
@keyframes horzn15 {
  from {
  top: 45.4vh;
}
  to {
  top: 50.9vh;
}
}
.horizontal span:nth-last-child(6){ 
  animation-name: horzn16;
}
@keyframes horzn16 {
  from {
  top: 50.9vh;
  }
  to {
  top: 57.5vh;
}
}
.horizontal span:nth-last-child(5){ 
  animation-name: horzn17;
}
@keyframes horzn17 {
  from {
  top: 57.5vh;
  }
  to {
    top: 65.4vh;
}
}
.horizontal span:nth-last-child(4){ 
  animation-name: horzn18;
}
@keyframes horzn18 {
  from {
    top: 65.4vh;
  }
  to {
  top: 74.9vh;
}
}
.horizontal span:nth-last-child(3){ 
  animation-name: horzn19;
}
@keyframes horzn19 {
  from {
  top: 74.9vh;
}
  to {
  top: 86.3vh;
}
}
.horizontal span:nth-last-child(2){ 
  animation-name: horzn20;
}
@keyframes horzn20 {
  from {
  top: 86.3vh;
  }
  to {
  top: 100vh;
}
}
.horizontal span:last-child{ 
  animation-name: horzn21;
}
@keyframes horzn21 {
  from {
  top: 100vh;
  }
  to {
  top: 100vh;
}
}

.vertical::before{
    content: "";
    width: 44px;
    height: 10vh;
    background: #FFBF33;
    background: linear-gradient(167deg,rgba(255, 191, 51, 1) 0%, rgba(122, 100, 51, 1) 50%, rgba(87, 72, 42, 1) 100%);
    border-radius: 50% 25% 25% 50%;
    position: absolute;
    left: 18%;
    bottom: 9vh;
}

.vertical::after{
    content: "";
    width: 44px;
    height: 10vh;
    background: #FFBF33;
    background: linear-gradient(167deg,rgba(255, 191, 51, 1) 0%, rgba(122, 100, 51, 1) 50%, rgba(87, 72, 42, 1) 100%);
    border-radius: 25% 50% 50% 25%;
    position: absolute;
    right: 18%;
    bottom: 9vh;
}

.vertical span{
  height: 100vh;
  position: absolute;
}
.vertical span:not(:first-of-type){
  background:#333;
  width: 1px;
}
.vertical span:first-child{
  left: calc(50% - 5px);
  width: 10px;
  background: #999;
  background-image: linear-gradient(135deg, rgba(240, 240, 240, 0.4) 0%, rgba(80, 80, 80, 0.4) 50%, rgba(18, 22, 18, 1) 75%, rgba(0, 6, 0, 0.6) 100%);
}
.vertical span:nth-child(2){
  left: 45vw;
  transform: skew(-10deg, 15deg);
}
.vertical span:nth-child(3){
  left: 40vw;
  transform: skew(-15deg, 15deg);
}
.vertical span:nth-child(4){
  left: 35vw;
  transform: skew(-20deg, 15deg);
}
.vertical span:nth-child(5){
  left: 30vw;
  transform: skew(-25deg, 15deg);
}
.vertical span:nth-child(6){
  left: 25vw;
transform: skew(-30deg, 15deg);
}
.vertical span:nth-child(7){
  left: 20vw;
transform: skew(-35deg, 15deg);
}
.vertical span:nth-child(8){
  left: 15vw;
transform: skew(-40deg, 15deg);
}
.vertical span:nth-child(9){
  left: 10vw;
transform: skew(-45deg, 15deg);
}
.vertical span:nth-child(10){
  left: 5vw;
transform: skew(-50deg, 15deg);
}
.vertical span:last-child{
  right: 50%;
}
.vertical span:nth-last-child(2){
  right: 45vw;
transform: skew(10deg, -15deg);
}
.vertical span:nth-last-child(3){
  right: 40vw;
transform: skew(15deg, -15deg);
}
.vertical span:nth-last-child(4){
  right: 35vw;
transform: skew(20deg, -15deg);
}
.vertical span:nth-last-child(5){
  right: 30vw;
transform: skew(25deg, -15deg);
}
.vertical span:nth-last-child(6){
  right: 25vw;
transform: skew(30deg, -15deg);
}
.vertical span:nth-last-child(7){
  right: 20vw;
transform: skew(35deg, -15deg);
}
.vertical span:nth-last-child(8){
  right: 15vw;
transform: skew(40deg, -15deg);
}
.vertical span:nth-last-child(9){
  right: 10vw;
transform: skew(45deg, -15deg);
}
.vertical span:nth-last-child(10){
  right: 5vw;
transform: skew(50deg, -15deg);
}