@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500&family=Poppins:wght@200&family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
html {
  animation: mainFade 3s ease-in-out;
  background-image: url('../images/lastmaningalaxymed.jpg');
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  scrollbar-gutter: stable;
  /* overflow-y: hidden; */
  overflow-x: hidden;
}

/* Start of: Scrollbars */
html::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
}

html::-webkit-scrollbar-track {
  background: rgb(78, 191, 232);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  scrollbar-gutter: stable;
  padding-left: 4px;
  /* scrollbar-gutter: stable both-edges; */

}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff3700, #e15402, #e1bf02);
  border: 2px solid rgb(235, 235, 235);
}


/* Firefox */
* {
  scrollbar-width: thick;
  scrollbar-color: #ECB730 #A5ACAD;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 23px;
  background-color: #06CFBE;
  cursor: pointer;
}

*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #A5ACAD;
  border: 7px solid #D2D2D2;
}

*::-webkit-scrollbar-track:hover {
  background-color: #DD9043;
}

*::-webkit-scrollbar-track:active {
  background-color: #9BA2A4;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ECB730;
  border: 1px solid #080808;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #DE650F;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #FC3F0B;
}

/* Start of: Space Particles */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  overflow-x: hidden;
  opacity: 0.5;
  cursor: pointer;
  /* border: 1px soild black; */
}

.refresh {
  z-index: 900;
  position: absolute;
  top: 2%;
  left: 2%;
  cursor: pointer
}

#refresh:hover {
  -webkit-animation: bounce-out 2s ease 0s 1 normal;
  -moz-animation: bounce-out 2s ease 0s 1 normal;
  -ms-animation: bounce-out 2s ease 0s 1 normal;
  animation: bounce-out 2s ease 0s 1 normal;
}

h1 {
  position: absolute;
  text-align: center;
  /* display: inline-block; */
  padding: .3em;
  font-family: 'Orbitron', 'Megrim', cursive;
  left: 50%;
  bottom: 0%;
  user-select: none;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .68);
  border: .075em solid rgba(255, 255, 255, .1);
  box-shadow: 2px 2px 7px rebeccapurple;
}

/* End of: Space Particles */
/* FireFox */
/* End of: Scrollbars */
iframe {
  z-index: 1000;
  position: absolute;
  top: 22%;
  padding: 11px;
  cursor: pointer;
}

iframe:hover {
  cursor: pointer;
  filter: drop-shadow(10px 10px 5px #000000);
  -webkit-filter: drop-shadow(10px 10px 5px #000000);
  -moz-filter: drop-shadow(10px 10px 5px #000000);
  animation-play-state: paused;
}

#soundcloud_player {
  cursor: pointer;
  border-right: 11px ridge rgb(69, 69, 69);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 3px 3px 55px #06CFBE;
  -webkitbox-shadow: 3px 3px 55px #06CFBE;
  -moz-box-shadow: 3px 3px 55px #06CFBE;
  animation: IFrameHovering 5s ease-in-out infinite;
}

#soundcloud_player:hover {
  box-shadow: 21px 8px 265px 18px rgba(222, 191, 30, 0.73);
  -webkit-box-shadow: 21px 8px 265px 18px rgba(222, 191, 30, 0.73);
  -moz-box-shadow: 21px 8px 265px 18px rgba(222, 191, 30, 0.73);
  animation-play-state: paused;
}

.control-btn {
  position: absolute;
  cursor: pointer;
  border: 1px solid black;
  color: whitesmoke;
  border: none;
  padding: 7px;
  background: #00bbff;
  border-radius: 5px;
}


#stop {
  z-index: 600;
  top: 4%;
  right: 1%;
  width: 80px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: whitesmoke;
  -webkit-text-stroke: 0.3px black;

}

#stop:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rgb(245, 89, 5);
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#play {
  z-index: 600;
  top: 11%;
  right: 1%;
  width: 80px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#play:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rebeccapurple;
  color: whitesmoke;
  -webkit-text-stroke: 0.3px rgb(242, 161, 0);
}

#particles_on {
  z-index: 600;
  top: 18%;
  right: 1%;
  width: 140px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#particles_on:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rgb(245, 89, 5);
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#particles_off {
  z-index: 600;
  top: 25%;
  right: 1%;
  width: 140px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#particles_off:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rebeccapurple;
  color: whitesmoke;
  -webkit-text-stroke: 0.3px rgb(242, 161, 0);
}

#galaxy_fx {
  z-index: 600;
  top: 32%;
  right: 1%;
  width: 180px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#galaxy_fx:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rebeccapurple;
  color: whitesmoke;
  -webkit-text-stroke: 0.3px rgb(242, 161, 0);
}

#galaxy_fx_resting {
  z-index: 600;
  top: 39%;
  right: 1%;
  width: 160px;
  font-size: 1rem;
  font-family: 'Orbitron';
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

#galaxy_fx_resting:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  border: 1.5px solid rebeccapurple;
  color: whitesmoke;
  -webkit-text-stroke: 0.3px rgb(242, 161, 0);
}

.planet {
  z-index: 600;
  position: absolute;
  top: 56px;
  left: 20%;
  opacity: 0.4;
  width: 300px;
  cursor: pointer;
  animation: planetSpin 4s infinite ease-in-out;
  animation-play-state: paused;
}

#stars {
  opacity: 0.5;
  filter: hue-rotate(216deg) opacity(18%) invert(7%);
  -webkit-filter: hue-rotate(216deg) opacity(18%) invert(7%);
  -moz-filter: hue-rotate(216deg) opacity(18%) invert(7%);
}

.stars {
  z-index: 700;
  position: absolute;
  top: 92px;
  left: 37%;
  /* opacity: 0.1; */
  width: 250px;
  animation: starPulse 4s infinite ease-in-out;
  animation-direction: alternate-reverse;
}

.shooting_star {
  z-index: 800;
  position: absolute;
  top: -3%;
  left: -3%;
  opacity: 0.8;
  width: 200px;
  animation: shootingStarLeft 0.5s infinite ease-in-out;
  animation-play-state: paused;
  animation-direction: normal;
  animation-delay: 2s
}

.shooting_star2 {
  z-index: 900;
  position: absolute;
  top: -22%;
  left: 20%;
  opacity: 0.5;
  animation: shootingStarTop 1s infinite ease-in-out;
  animation-play-state: paused;
  animation-direction: normal;
  animation-delay: 2s
}

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  z-index: 0;
  border-radius: 10px;
}

.fill:hover,
.fill:focus {
  cursor: pointer;
  color: #a972cb;
  box-shadow: inset 0 0 0 2em var(--hover);
}

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #8800ff, #ff7300, #fffb00, #227402, #00ffd5, #5a69af, #7a00ff, #ff00c8, #ff7300);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* Start of: Soundcloud Icon and Animation Control Button Effects */
#soundcloud_icon {
  z-index: 1000;
  cursor: pointer;
  position: absolute;
  bottom: 2%;
  right: 2%;
  border: 3px solid white;
  border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  animation: borderColor 2s infinite ease-in-out;
}

#soundcloud_icon:hover {
  box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -webkit-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  -moz-box-shadow: 21px 8px 311px 86px rgba(222, 191, 30, 1);
  filter: invert(100%);
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
}

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.btn-hover {
  border: 1px solid black;
  width: 56px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 20px;
  height: 40px;
  text-align: center;
  background-size: 300% 100%;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.btn-hover:hover {
  background-position: 100% 0;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}

/* Start of: Button Gradient Rollover Effect */
.btn-hover.color-1 {
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-2 {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

.btn-hover.color-3 {
  background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.btn-hover.color-4 {
  background-image: linear-gradient(to right, #fcf760, #ff9a44, #ef9d43, #e75516);
  box-shadow: 0 4px 15px 0 rgba(239, 96, 49, 0.75);
}

.btn-hover.color-5 {
  background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

.btn-hover.color-6 {
  background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
  box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.btn-hover.color-7 {
  background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

.btn-hover.color-8 {
  background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
  box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.btn-hover.color-9 {
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.btn-hover.color-10 {
  background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.btn-hover.color-11 {
  background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}

/* End of: Button Gradient Rollover Effect */
/* Start of: Animations */

@keyframes borderColor {

  0% {
    border-color: orangered
  }

  50% {
    border-color: goldenrod
  }

  100% {
    border-color: rgb(208, 178, 4);
  }
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes starPulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes IFrameHovering {
  0% {
    left: 66px;
    top: 300px;
  }

  50% {
    left: 66px;
    top: -100px;
  }

  100% {
    left: 66px;
    top: 300px;
  }
}

@keyframes shootingStarTop {
  0% {
    left: 20%;
    top: -5%;
  }

  25% {
    left: 25%;
    top: 25%;
  }

  50% {
    left: 30%;
    top: 50%;
  }

  75% {
    left: 35%;
    top: 75%;
  }

  100% {
    left: 40%;
    top: 110%;
  }
}

@keyframes shootingStarLeft {
  0% {
    left: -2%;
    top: 30%;
  }

  25% {
    left: 25%;
    top: 30%;
    transform: rotate(45deg);
  }

  50% {
    left: 50%;
    top: 33%;
  }

  75% {
    left: 75%;
    top: 35%;
  }

  100% {
    left: 105%;
    top: 37%;
  }
}





/* Start of: Animations */

/* .fromcenter {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.fromcenter:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.fromcenter:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
} */

@-moz-keyframes mainFade {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes mainFade {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mainFade {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes motionpath {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}

@keyframes motionpath {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}

@-o-keyframes motionpath {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}

@-webkit-keyframes bounce-out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.90);
    transform: scale(0.90);
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.90);
  }

  70% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes planetSpin {
  0% {
    transform: rotateZ(0deg);
    transform: rotatex(0rad);
  }

  25% {
    transform: rotateZ(90deg);
    /* transform: rotatex(90deg); */
  }

  50% {
    transform: rotateZ(180deg);
    transform: rotatex(3.142rad);
  }

  75% {
    transform: rotateZ(270deg);
    /* transform: rotatex(270deg); */
  }

  100% {
    transform: rotateZ(360deg);
    transform: rotatex(0rad);
  }
}