.sps {

background-image: linear-gradient(to left,black, yellow);
width:2%;
height: 100vh;
transition: 0.5s;
overflow:hidden;
z-index: 1; /* Stay on top */
position: fixed; /* Stay in place */

}


* The side navigation menu */
.spsidenav {
  height: 100%; /* 100% Full-height */
  width: 25%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #fef621; /* Black111*/
 <!-- overflow-x: hidden; /* Disable horizontal scroll */-->
   padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}

/* The navigation menu links */
.spsidenav a {
  padding: 8px 8px 8px 32px;
   text-decoration: none;
  font-size: 25px;
  color: #111;
  display: flex;
  transition: 0.3s;
 white-space: normal;

}

/* When you mouse over the navigation links, change their color */
.spsidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.spsidenav .closebtn {
  position: absolute;
  top: 20;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
   padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .spsidenav {padding-top: 15px;}
  .spsidenav a {font-size: 18px;}
} 

#FOOTER{height:15%;width:100%;margin: 70vh 0%;column-count: 3;position:fixed;background-color:black;}





.spcyrcle {position:absolute;background: #FCF114;top:8vw;left:11vw; width:8vw; height:8vw; border-radius: 50%; border-color:black; border-bottom-style:solid; -webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;transition: all 500ms ease;overflow: hidden;font-size: 2VW;text-align: center;word-wrap: break-word;
  		display:inline-block; margin:10% auto;max-height:100vh;}
.play{animation-play-state:running;-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running; }
.pause{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;}
.enlarge{z-index:999;background:#E04000;width:40vw;height:40vw;border-radius: 20%;}
.enlarge .innertext{visibility:visible;}
.spsquare { width: 3vw;  height: 3vw;  background: #E30B50; -webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;
		  transition: all 500ms ease; font-size: 2VW; color: BLACK; overflow: hidden; text-align: center; text-justify:inter-word; border:2px yellow solid; word-wrap: break-word;}
 #spcenter_img{width:100%; height:100%;}
.spcyr_img{max-height:50%;margin-top:5%}
.innertext{font-size:80%;margin-left:3.5vw;margin-right:1.5vw ;text-align:left;visibility:hidden;}
.innertextitle{font-size:60%; font-weight:800;margin-top:0;width:100%;text-align:center;color:black;}
.spcontainer{margin:5vh 31vw;width:30vw;height:30vw;border:0px red solid;border-radius: 50%;position:absolute;}

@keyframes rot0 {from {transform:  rotate(  0deg) translate(-10vw) rotate(   0deg);} to {transform: rotate(360deg) translate(-10vw) rotate(-360deg);}}
@keyframes rot1 {from {	transform: rotate( 60deg) translate(-10vw) rotate( -60deg);} to {transform: rotate(420deg) translate(-10vw) rotate(-420deg);}}
@keyframes rot2 {from {	transform: rotate(120deg) translate(-10vw) rotate(-120deg);}	to {transform: rotate(480deg) translate(-10vw) rotate(-480deg);}}
@keyframes rot3 {from {	transform: rotate(180deg) translate(-10vw) rotate(-180deg);}	to {transform: rotate(540deg) translate(-10vw) rotate(-540deg);}}
@keyframes rot4 {from {	transform: rotate(240deg) translate(-10vw) rotate(-240deg);} to {transform: rotate(600deg) translate(-10vw) rotate(-600deg);}}
@keyframes rot5 {from {	transform: rotate(300deg) translate(-10vw) rotate(-300deg);}	to {transform: rotate(660deg) translate(-10vw) rotate(-660deg);}}
@keyframes rot6 {from {	transform: rotate(360deg) translate(-10vw) rotate(-360deg);}	to {transform: rotate(720deg) translate(-10vw) rotate(-720deg);}}


/*Button*/

:root {
  --text-color: Black;

  --btn-color: #fef621;
  --bg-color: Gray;

}



.SPbutton {
  position:relative;
 /* padding: 10px 20px;*/
  width:100% ;height:100%; 
  border: none;
  background: none;
  cursor: pointer;
  
  font-family: "Source Code Pro";
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;  
  color: var(--text-color);
  
  background-color:var(--btn-color);
  overflow: hidden;   
}



.right::after {
/*border:3px blue solid;*/
  content: var(--content);
  display: block;
  position: absolute;
  white-space: nowrap;
  padding: 40px 60px;
  pointer-events:none;
  opacity:0.6;
  background-color:black;
}
/*.SPbutton::after{border:1px red solid;font-weight: 200;top: -10px; left: -20px;} */

.right, .left {
/*border:1px red solid;*/
  position: absolute;
width:100%;
height:100%; 
 top: 10px;
}
.right {
  left: 66%;
}
.left {
  right:66%;
}
.right::after {
  top: 22px;
  left: -74.8%;
  width:120%;
  height:100%;
background-image: linear-gradient(to left,black, yellow);
  background-color: var(--bg-color);
  color:transparent;
  transition: transform .4s ease-out;
  transform: translate(0, -90%) rotate(0deg)
}

button:hover .right::after {
  transform: translate(0, -47%) rotate(0deg)
}

button .right:hover::after {
  transform: translate(0, -50%) rotate(-7deg)
}

button .left:hover ~ .right::after {
  transform: translate(0, -50%) rotate(7deg)
}

/* bubbles */
button::before {
  content: '';
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(circle at 20% 35%,  transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 75% 44%, transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
  from {
    transform: translate();
  }
  to {
    transform: translate(0, -66.666%);
  }
}