@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');


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

:root {
  --light: white;
  --grey: #494949;
  --dark: #3a3a3a;
  --gold: rgba(255, 187, 0, 0.828);
  --blue: #2eb1c2;
  --green: #04a126;
  --lakegreen: #01871e;
  --purple: #6807c2;
  --orange: #ed490e;
  --red: #e51106;
  --dark: black;

}

body {

  background-size: auto 100vh;
  background: url("./images/cosmicsky.jpg");
  background-size: cover;
  background-position: 50% 60%;
  background-attachment: fixed;
  overflow: hidden;
  /* animation: animateBg 24s linear infinite; */
}

h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 3px;
  font-weight: 500;
  font-style: normal;
  color: white;
}

p {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
  margin-top: -34px;
  height: 400px;
  top: 0px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
}

.card {
  width: 80px;
  border-radius: .75rem;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  border-radius: 2rem;
  margin: 0 10px;
  display: flex;
  align-items: flex-end;
  transition: .6s cubic-bezier(.28, -0.03, 0, .99);
  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
}

.card>.row {
  color: white;
  display: flex;
  flex-wrap: nowrap;
}

.card>.row>.icon {
  background: #223;
  color: white;
  border-radius: 50%;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
}

.card>.row>.description {
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  height: 80px;
  width: 520px;
  opacity: 0;
  transform: translateY(30px);
  transition-delay: .3s;
  transition: all .3s ease;
}

.description p {
  color: #b0b0ba;
  padding-top: 5px;
}

.description h4 {
  text-transform: uppercase;
}

input {
  display: none;
}

input:checked+label {
  width: 600px;
}

input:checked+label .description {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.card[for="c1"] {
  background-image: url('images/space1.jpg');
}

.card[for="c1"]:hover {
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 3px black;
}

.card[for="c2"] {
  background-image: url('images/space2.jpg');
}

.card[for="c2"]:hover {
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 3px black;
}

.card[for="c3"] {
  background-image: url('images/space3.jpg');
}

.card[for="c3"]:hover {
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 3px black;
}

.card[for="c4"] {
  background-image: url('images/space4.jpg');
}

.card[for="c4"]:hover {
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 3px black;
}

/* Start of: Music */

.music_toggle {
  position: absolute;
  bottom: 2%;
  right: 1%;
}

#music {
  position: absolute;
  cursor: pointer;
  bottom: 2%;
  right: 2%;
  width: 100px;
}

#music:hover {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

/* End of: Music */

/* Start of: Background Thumbnails */
.bgImageThumbnails {
  display: flex;
  justify-content: space-evenly;
  z-index: 10;
  position: absolute;
  bottom: 1.5%;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  padding: 2px;
  width: 100px;
  box-shadow: inset;
  /* box-shadow: 1px 1px 2px inset; */

}

#lastman,
#cosmic1,
#cosmic2,
#invert {
  z-index: -1;
  cursor: pointer;
  width: auto;
  height: 70px;
}

#lastman:hover {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

#cosmic1:hover {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

#cosmic2:hover {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}


#invert:hover {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

/* End of: Background Thumbnail  */

/* Start of: Shooting Stars */

section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* background: url("images/earthandstars.jpg"); */
  /*   background-color:black; */
  background-size: cover;
  /* animation: animateBg 50s linear infinite; */
}

@keyframes animateBg {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}



span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
  animation: animate 3s linear infinite;
}

span::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
}

@keyframes animate {
  0% {
    transform: rotate(315deg) translateX(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: rotate(315deg) translateX(-1000px);
    opacity: 0;
  }
}

span:nth-child(1) {
  top: 0;
  right: 0;
  left: initial;
  animation-delay: 0s;
  animation-duration: 1s;
}

span:nth-child(2) {
  top: 0;
  right: 80px;
  left: initial;
  animation-delay: 0.2s;
  animation-duration: 3s;
}

span:nth-child(3) {
  top: 80;
  right: 0px;
  left: initial;
  animation-delay: 0.4s;
  animation-duration: 2s;
}

span:nth-child(4) {
  top: 0;
  right: 180px;
  left: initial;
  animation-delay: 0.6s;
  animation-duration: 1.5s;
}

span:nth-child(5) {
  top: 0;
  right: 400px;
  left: initial;
  animation-delay: 0.8s;
  animation-duration: 2.5s;
}

span:nth-child(6) {
  top: 0;
  right: 600px;
  left: initial;
  animation-delay: 1s;
  animation-duration: 3s;
}

span:nth-child(7) {
  top: 300px;
  right: 0px;
  left: initial;
  animation-delay: 1.2s;
  animation-duration: 1.75s;
}

span:nth-child(8) {
  top: 0px;
  right: 700px;
  left: initial;
  animation-delay: 1.4s;
  animation-duration: 1.25s;
}

span:nth-child(9) {
  top: 0px;
  right: 1000px;
  left: initial;
  animation-delay: 0.75s;
  animation-duration: 2.25s;
}

span:nth-child(9) {
  top: 0px;
  right: 450px;
  left: initial;
  animation-delay: 2.75s;
  animation-duration: 2.75s;
}

/* End of: Shooting Stars */

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

/* End of: Space Particles*/

/* Start of: Animation Control Button Controllers */
.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);
}


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

#galaxy_fx {
  z-index: 600;
  top: 32%;
  right: 1%;
  width: 150px;
  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);
}

.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;
  }
}

.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;
}

@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);
  }
}

/* End of: Animation Controls Button Controllers */