style.css

html {
  overflow: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 0px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}
body {
  background-image: url(img/bg.svg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
}

.theme-font {
  font-family: 'Poiret One', cursive;
} 

svg {
  width: 70%;
}

.nav {
  border-radius: 100px 100px 6px 100px; 
  color: white; 
  background-color:#2F2E41;
  transition: transform 0.5s;
}

.nav:hover {
  background: #2F2E41;
  color: white;
  transform:translatey(-10px);
  /* transform:translatex(-10px); */
}

.nav-shadow {
  /* -webkit-box-shadow: 8px 8px 12px -6px rgba(122,114,255,1);
  -moz-box-shadow: 8px 8px 12px -6px rgba(122,114,255,1);
  box-shadow: 8px 8px 12px -6px rgba(122,114,255,1); */
  -webkit-box-shadow: 6px 6px 12px -6px rgba(122,114,255,1);
  -moz-box-shadow: 6px 6px 12px -6px rgba(122,114,255,1);
  box-shadow: 6px 6px 12px -6px rgba(122,114,255,1);  
}

/* .nav-shadow {
  -webkit-box-shadow: 10px 10px 10px -6px rgba(122,105,138,1);
  -moz-box-shadow: 10px 10px 10px -6px rgba(122,105,138,1);
  box-shadow: 10px 10px 10px -6px rgba(122,105,138,1);
} */

.cd {
  transition: all 400ms ease-in-out;
}

.cd:hover {
  transition: all 400ms ease-in-out;
  transform: translateX(1.0em);
}

.rotate {
  transition: transform 0.6s;
}

.rotate:hover {
 transform: rotateZ(360deg);
}

button:hover {
  background-color: white;
}

.btnx:hover {
  background-color: black;
}



.go {
  -webkit-box-shadow: 4px 3px 12px -2px rgba(227,224,227,1);
  -moz-box-shadow: 4px 3px 12px -2px rgba(227,224,227,1);
  box-shadow: 4px 3px 12px -2px rgba(227,224,227,1);
  transition: all 400ms ease-in-out;
}
.go:hover
{
  -webkit-box-shadow: -5px 6px 13px 0px rgba(214,210,214,1);
  -moz-box-shadow: -5px 6px 13px 0px rgba(214,210,214,1);
  box-shadow: -5px 6px 13px 0px rgba(214,210,214,1);
  
  transition: all 200ms ease-in-out;
  transform: translateX(1.0em);
}

#live {
  background: white;
  transition: transform 0.5s;
}

#live:hover {
  background: #2F2E41;
  color: white;
  transform: scale(1.25,1);
}

.live:hover {
  transform: scale(1.1,1);
}

/* #bigGear {
  animation: spin 5s ease-in-out infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

#smallGear {
  animation: spin 5s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

#board {
  animation: anim 3s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
} */

#tab {
  animation: anim1 4s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
}

/* #ssb {
  animation: anim2 3s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
} */

#circle {
  animation: anim2 2s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
}



#inner {
  opacity: 1;
  animation: fade 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

#middle {
  opacity: 1;
  animation: fade 6s ease-in-out infinite;
  animation-delay: 2s;
  transform-origin: center;
  transform-box: fill-box;
}

#outer {
  opacity: 1;
  animation: fade 6s ease-in-out infinite;
  animation-delay: 4s;
  transform-origin: center;
  transform-box: fill-box;
}


@keyframes spin {
  form {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}

@keyframes wow {
  form {
    transform: scale(-1, -1);
  }

  to {
    transform: scale(1.5, 1.5);
  }
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

@keyframes fade {
  form {
    transform: scale(0, 0);
  }

  to {
    transform: scale(1.5, 1.5);
  }
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

@keyframes anim {
  form {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(30deg);
  }
}

@keyframes anim1 {
  form {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(15deg);
  }
}

@keyframes anim2 {
  form {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}


/* @keyframes anim1 {
  form {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(20deg);
  }
} */


/* Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
*/

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
#blink {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

@charset "UTF-8";
:root {
  --star-size: 25px;
  --star-color: lightgrey;
  --star-background: #fc0;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 0.5;
}
.Stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

* {
  position: relative;
  box-sizing: border-box;
}