/* -- LAYOUT -- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #0f0f0f !important;
  overflow-x: hidden;
  font-family: "Beth Ellen", "VT323", "Cedarville Cursive", "Dawning of a New Day", monospace;
}

header, main {
  position: relative;
  z-index: 1;
}

/* THE STAR FIELD */
#starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;  /* add this */

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}


/* YOUR ENTIRE SITE */
#site {
  position: relative;
  z-index: 1;

  min-height: 100vh;
  width: 100%;
  transform: translateZ(0);
}

#site::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.4) 70%,
    rgba(0,0,0,0.7) 100%
  );
  pointer-events: none;
  z-index: -2;
}


/* -- PARTICLES -- */
 /* #particles-js {
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url("");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat; } */

/*
.particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
} 
*/

/* -- Liberosis Title -- */
#titleCard {
  color: darkgoldenrod; 
  font-family: "Beth Ellen", monospace;
  letter-spacing: 0.1em;
  height: 2em;
}

.main-nav a {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: goldenrod;
  text-decoration: none;
  font-family: "Beth Ellen", monospace;
  text-transform: lowercase;
}

ul h3 {
  margin: 0;
  padding: 0;
  text-align: center;
  display: none;
  font-size: 115%;
}

.titleDiv, .buttonDiv {
  display: inline-block;
}

/* -- titlecard rainbow effect -- 

.rainbow-1:hover{
   background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
   animation:slidebg 10s linear infinite;
}

@keyframes slidebg {
  to {
    background-position:20vw;
  }
}


/* -- BUTTON -- */
#menuButton {
  background: linear-gradient(to bottom, darkgoldenrod 5%, black 100%);
  background-color: #b8870b;
  border-radius: 42px;
  color: black;
  font-size: 24px;
  padding: 15px 20px;
  text-decoration: none;
  font-family: "Beth Ellen", monospace;
  border: none;
  text-transform: lowercase;
}

#menuButton:hover {
  background: linear-gradient(to bottom, #2b2a28 5%, #b8870b 100%);
  background-color: #2b2a28;
}

#menuButton:active {
  top: 1px;
}

div .button {
  margin-top: 1%;
}

.circle-container {
  position: relative;
  /* 1 */
  width: 25em;
  height: 25em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  /* 2 */
  box-sizing: content-box;
  /* 3 */
  margin: 5em auto 0;
  border: none 3px black;
  box-sizing: border-box;
  display: grid;
  /* background-image: radial-gradient(darkgoldenrod, rgba(255, 0, 0, 0) 70%, rgba(255, 0, 0, 0));*/
}
.circle-container > * {
  /* 4 */
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8em;
  height: 8em;
  margin: -4em;
}
.circle-container > :nth-of-type(1) {
  transform: rotate(0deg) translate(12.5em) rotate(0deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(51.4285714286deg) translate(12.5em) rotate(-51.4285714286deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(102.8571428571deg) translate(12.5em) rotate(-102.8571428571deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(154.2857142857deg) translate(12.5em) rotate(-154.2857142857deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(205.7142857143deg) translate(12.5em) rotate(-205.7142857143deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(257.1428571429deg) translate(12.5em) rotate(-257.1428571429deg);
}
.circle-container > :nth-of-type(7) {
  transform: rotate(308.5714285714deg) translate(12.5em) rotate(-308.5714285714deg);
}

.circle-container img {
  display: block;
  text-align: center;
  width: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
  -webkit-transition: all 5s linear;
  -moz-transition: all 5s linear;
  -ms-transition: all 5s linear;
  transition: all 5s linear;
}
.circle-container img:hover {
  filter: grayscale(0);
  transform: rotate(-11650deg) scale(1.8);
}

.circle-container img.spinning {
  filter: grayscale(0);
  transform: rotate(-11650deg) scale(1.8);
  transition: all 5s linear;
}

/* -- ANIMATIONS: index -- */
@keyframes colorful {
  from {
    filter: hue-rotate();
    transform: scale(1);
  }
  to {
    filter: hue-rotate(1440deg);
    transform: scale(3);
  }
}
@keyframes colorNav {
  from {
    filter: hue-rotate();
  }
  to {
    filter: hue-rotate(-90deg);
  }
}


/* -- TAROT CARD IMG -- */
#myFortune {
  display: block;
  margin: auto;
  animation: colorShadow 10s linear infinite;
  z-index: 2;
  box-shadow: 0px 0px 70px 0px yellow;
  height: 526px;
  width: 300px;
}

/* -- ANIMATIONS: tarot --*/
@keyframes colorShadow {
  from {
    filter: hue-rotate();
  }
  to {
    filter: hue-rotate(1440deg);
  }
}
/* TITLE: tarot */
#tarotTitle {
  font-family: "IM Fell English", serif;
  text-align: center;
  text-transform: uppercase;
  color: darkgoldenrod;
}

/* Words for Card Descriptions */
#words {
  border: 5px inset goldenrod;
  color: darkgoldenrod;
  font-family: "IM Fell English", serif;
  margin: 2% 20%;
  text-align: center;
}

/*-- TAO stuff --*/
#taoText {
  color: white;
}

.taoBody {
  font-family: "Sirin Stencil", cursive;
  color: darkgoldenrod;
  margin: 3% 0;
  font-size: 150%;
}

/* -- MUSIC PAGE -- */

#musicBody {
  background-color: black;
  font-family: "Space Mono", monospace;
  color: aliceblue;
  animation: colorShadow 10s linear infinite alternate;
  border-style:dotted;
}

.myAlbum {
  padding: 1%;
  margin-top: 5%;
  animation: colorShadow 30s linear infinite;
  box-shadow: 0px 0px 30px 0px yellow;
}

#musicTitle, #musicTitle2 {
  color: darkgoldenrod;
}

/* -- Music ANIMATIONS -- */

.animate-charcter
{
  background-image: linear-gradient(
    -225deg,
    #00C0FF 0%,
    #FFCF00 29%,
    #FC4F4F 67%,
    #00C0FF 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 300% auto; 
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      /*font-size: 190px;*/
}

@keyframes textclip {
  to {
    background-position: 300% center;
  }
}


/*=== Media Queries | INDEX.HTML === */
@media (min-width: 1000px) {
  .tarotBody {
    margin: 5% auto;
  }
}
@media (max-width: 700px) {
  .circle-container {
    position: relative;
    /* 1 */
    width: 19em;
    height: 19em;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    /* 2 */
    box-sizing: content-box;
    /* 3 */
  }
  .circle-container > * {
    /* 4 */
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6em;
    height: 6em;
    margin: -3em;
  }
  .circle-container > :nth-of-type(1) {
    transform: rotate(0deg) translate(9.5em) rotate(0deg);
  }
  .circle-container > :nth-of-type(2) {
    transform: rotate(51.4285714286deg) translate(9.5em) rotate(-51.4285714286deg);
  }
  .circle-container > :nth-of-type(3) {
    transform: rotate(102.8571428571deg) translate(9.5em) rotate(-102.8571428571deg);
  }
  .circle-container > :nth-of-type(4) {
    transform: rotate(154.2857142857deg) translate(9.5em) rotate(-154.2857142857deg);
  }
  .circle-container > :nth-of-type(5) {
    transform: rotate(205.7142857143deg) translate(9.5em) rotate(-205.7142857143deg);
  }
  .circle-container > :nth-of-type(6) {
    transform: rotate(257.1428571429deg) translate(9.5em) rotate(-257.1428571429deg);
  }
  .circle-container > :nth-of-type(7) {
    transform: rotate(308.5714285714deg) translate(9.5em) rotate(-308.5714285714deg);
  }
}
@media (max-width: 420px) {
  .circle-container {
    position: relative;
    /* 1 */
    width: 17em;
    height: 17em;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    /* 2 */
    box-sizing: content-box;
    /* 3 */
  }
  .circle-container > * {
    /* 4 */
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5em;
    height: 5em;
    margin: -2.5em;
  }
  .circle-container > :nth-of-type(1) {
    transform: rotate(0deg) translate(8.5em) rotate(0deg);
  }
  .circle-container > :nth-of-type(2) {
    transform: rotate(51.4285714286deg) translate(8.5em) rotate(-51.4285714286deg);
  }
  .circle-container > :nth-of-type(3) {
    transform: rotate(102.8571428571deg) translate(8.5em) rotate(-102.8571428571deg);
  }
  .circle-container > :nth-of-type(4) {
    transform: rotate(154.2857142857deg) translate(8.5em) rotate(-154.2857142857deg);
  }
  .circle-container > :nth-of-type(5) {
    transform: rotate(205.7142857143deg) translate(8.5em) rotate(-205.7142857143deg);
  }
  .circle-container > :nth-of-type(6) {
    transform: rotate(257.1428571429deg) translate(8.5em) rotate(-257.1428571429deg);
  }
  .circle-container > :nth-of-type(7) {
    transform: rotate(308.5714285714deg) translate(8.5em) rotate(-308.5714285714deg);
  }

  #words {
    margin: 0 3%;
  }

  #myFortune {
    height: 391px;
    width: 223px;
    margin: 0 auto;
  }
}
@media (max-width: 350px) {
  .circle-container {
    position: relative;
    /* 1 */
    width: 13em;
    height: 13em;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    /* 2 */
    box-sizing: content-box;
    /* 3 */
  }
  .circle-container > * {
    /* 4 */
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
  }
  .circle-container > :nth-of-type(1) {
    transform: rotate(0deg) translate(6.5em) rotate(0deg);
  }
  .circle-container > :nth-of-type(2) {
    transform: rotate(51.4285714286deg) translate(6.5em) rotate(-51.4285714286deg);
  }
  .circle-container > :nth-of-type(3) {
    transform: rotate(102.8571428571deg) translate(6.5em) rotate(-102.8571428571deg);
  }
  .circle-container > :nth-of-type(4) {
    transform: rotate(154.2857142857deg) translate(6.5em) rotate(-154.2857142857deg);
  }
  .circle-container > :nth-of-type(5) {
    transform: rotate(205.7142857143deg) translate(6.5em) rotate(-205.7142857143deg);
  }
  .circle-container > :nth-of-type(6) {
    transform: rotate(257.1428571429deg) translate(6.5em) rotate(-257.1428571429deg);
  }
  .circle-container > :nth-of-type(7) {
    transform: rotate(308.5714285714deg) translate(6.5em) rotate(-308.5714285714deg);
  }
}
@media (max-width: 200px) {
  .circle-container {
    position: relative;
    /* 1 */
    width: 8em;
    height: 8em;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    /* 2 */
    box-sizing: content-box;
    /* 3 */
  }
  .circle-container > * {
    /* 4 */
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em;
  }
  .circle-container > :nth-of-type(1) {
    transform: rotate(0deg) translate(4em) rotate(0deg);
  }
  .circle-container > :nth-of-type(2) {
    transform: rotate(51.4285714286deg) translate(4em) rotate(-51.4285714286deg);
  }
  .circle-container > :nth-of-type(3) {
    transform: rotate(102.8571428571deg) translate(4em) rotate(-102.8571428571deg);
  }
  .circle-container > :nth-of-type(4) {
    transform: rotate(154.2857142857deg) translate(4em) rotate(-154.2857142857deg);
  }
  .circle-container > :nth-of-type(5) {
    transform: rotate(205.7142857143deg) translate(4em) rotate(-205.7142857143deg);
  }
  .circle-container > :nth-of-type(6) {
    transform: rotate(257.1428571429deg) translate(4em) rotate(-257.1428571429deg);
  }
  .circle-container > :nth-of-type(7) {
    transform: rotate(308.5714285714deg) translate(4em) rotate(-308.5714285714deg);
  }
}
/* -- BREAKPOINTS -- */

/*# sourceMappingURL=style.css.map */