@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");

/* general styling */
* {
  box-sizing: border-box;
  margin: 0;
  /* padding: 0; */
  font-family: "Poiret One", cursive;
}

html {
  min-height: 600vh;
}

body {
  position: absolute;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#000 10%, #e91717, #0e62ff, #000 90%);
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.6;
}

.header p {
  position: absolute;
  top: -300px;
}

p.sticky {
  position: -webkit-sticky;
  position: sticky;
  color: white;
  font-size: 20px;
  /* width: 200px; */
  position: fixed;
  top: 5%;
  left: 14%;
  letter-spacing: 2px;
  transition: 0.3s;
  border: 2px solid #ffffff;
  padding: 10px;
  border-radius: 2px;
}

p.sticky:hover {
  letter-spacing: 8px;
}

.hexagoane {
  border: 4px solid white;
  opacity: 0.7;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 14%;
  position: fixed;
  /* position: -webkit-sticky; */
}

.ring0 {
  border: 2px solid white;
  opacity: 0.9;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 15%;
  left: 15%;
  position: fixed;
  /* position: -webkit-sticky; */
}
.ring1 {
  border: 3px solid white;
  opacity: 1;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  top: 10%;
  left: 13%;
  position: fixed;
  /* position: -webkit-sticky; */
}

.ring2 {
  border: 2px solid white;
  opacity: 0.5;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 20%;
  left: 14%;
  position: fixed;
  /* position: -webkit-sticky; */
}

.ring3 {
  border: 3px solid white;
  opacity: 1;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 43%;
  left: 12%;
  position: fixed;
  /* position: -webkit-sticky; */
}

.ring4 {
  border: 2px solid white;
  opacity: 1;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  top: 12%;
  left: 13%;
  position: fixed;
  /* position: -webkit-sticky; */
}

.planet {
  border: 2px solid white;
  padding: 5px;
  border-top: 10px;
  opacity: 0.9;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  top: 20%;
  left: 14%;
  position: fixed;
  position: -webkit-sticky;
}

.house1 {
  border: 2px solid white;
  padding: 5px;
  /* border-top: 20px; */
  opacity: 0.9;
  /* border-radius: 50%; */
  width: 200px;
  height: 200px;
  top: 80%;
  left: 14%;
  /* position: fixed; */
  position: -webkit-sticky;
}

.circular-text {
  position: fixed;
  top: 18%;
  left: 50%;
  font-size: 63px;
  letter-spacing: 3px;
  font-weight: bolder;
  transition: 0.5% ease-out;
  color: white;
  text-shadow: -1px -1px 2px rgb(216, 40, 40), 1px 1px 2px rgb(40, 216, 216);
  --webkit-text-stroke: 1px rgb(2, 53, 32);
}

.rotated {
  position: fixed;
  top: 24%;
  left: 34%;
}

.rotated p {
  letter-spacing: 20px;
}

.container {
  position: fixed;
  top: 44%;
  left: 34%;
  color: #333;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-weight: normal;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
}

ul {
  padding: 21px;
  align-items: center;
  justify-content: center;
}

li {
  display: inline-block;
  font-size: 1.1em;
  list-style-type: none;
  padding: 0.9em;
  text-transform: uppercase;
  color: white;
  text-shadow: -1px -1px 2px rgb(40, 216, 216), 2px 2px 1px rgb(216, 40, 40);
}

li span {
  display: block;
  font-size: 4.5rem;
}

#message {
  color: #fff;
  padding: 10rem;
  font-size: 5rem;
  margin-left: -3rem;
  margin-top: -3rem;
  text-shadow: 6px 6px 8px rgb(40, 216, 216);
}

.content {
  display: none;
  color: #fff;
}

.countUl {
  margin-left: -4px;
}

@media (max-width: 1200px) {
  h1 {
    font-size: 1.5rem;
  }
  .ring0 {
    top: 40%;
    left: 15%;
  }
  .ring1 {
    top: 17%;
    left: 10%;
  }
  .ring4 {
    top: 10%;
    left: 10%;
  }
  .ring3 {
    top: 47%;
    left: 10%;
  }
  .planet {
    border: 2px solid white;
    padding: 5px;
    border-top: 10px;
    opacity: 0.9;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    top: 25%;
    left: 14%;
    position: fixed;
    position: -webkit-sticky;
  }

  #message {
    padding: 4rem;
  }
}

@media (max-width: 766px) {
  .circular-text {
    font-size: 45px;
  }

  li {
    font-size: 1.125rem;
    padding: 0.6rem;
  }

  li span {
    font-size: 3.375rem;
  }

  #message {
    font-size: 3rem;
  }
}

@media (max-width: 321px) {
  ul {
    padding: 0;
  }
  .circular-text {
    font-size: 40px;
  }
}