/*
**
*/
div.accordion {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    30deg,
    #000000,
    #0e0e0e,
    #181818,
    #202020,
    #292929,
    #313131,
    #3b3b3b,
    #444444,
    #4d4d4d,
    #575757,
    #616161,
    #6b6b6b
  );
}

div.accordion > ul {
  position: relative;
  left: 70px;
  list-style: none;
  padding: 20px 0px;
  margin: 0;
  border-left: 60px solid MediumSpringGreen;
  padding-left: 40px;
  width: 500px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -3px 0px inset,
    rgba(0, 0, 0, 0.3) 0px 3px 0px inset;
}

div.accordion > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  color: white;
  text-transform: uppercase;
}

div.accordion > ul > li:nth-child(2) {
  --itemcolor: red;
}

div.accordion > ul > li:nth-child(4) {
  --itemcolor: orange;
}

div.accordion > ul > li:nth-child(6) {
  --itemcolor: yellow;
}

div.accordion > ul > li:nth-child(8) {
  --itemcolor: lawngreen;
}

div.accordion > ul > li:nth-child(10) {
  --itemcolor: dodgerblue;
}

div.accordion > ul > li:nth-child(12) {
  --itemcolor: violet;
}

div.accordion > ul > li::before {
  content: "";
  position: absolute;
  left: -75px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px;
  border-style: double dotted solid dashed;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

div.accordion > ul > li::after {
  color: var(--itemcolor);
  position: absolute;
  left: -75px;
  width: 60px;
  height: 60px;
  background: transparent;
  content: "#1";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.accordion > ul > li:nth-child(2)::before {
  border-color: var(--itemcolor);
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(4)::before {
  border-color: var(--itemcolor);
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(4)::after {
  content: "#2";
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(6)::before {
  border-color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(6)::after {
  content: "#3";
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(8)::before {
  border-color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(8)::after {
  content: "#4";
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(10)::before {
  border-color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(10)::after {
  content: "#5";
  color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(12)::before {
  border-color: var(--itemcolor);
}

div.accordion > ul > li:nth-child(12)::after {
  content: "#6";
  color: var(--itemcolor);
}

div.accordion > ul > li:hover::before {
  background: var(--itemcolor);
  border-color: black;
  animation: bulletspin 5s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes bulletspin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

div.accordion > ul > li:hover::after {
  color: white;
}

div.accordion > ul > li:nth-child(4):hover::after,
div.accordion > ul > li:nth-child(6):hover::after,
div.accordion > ul > li:nth-child(8):hover::after {
  color: black;
}

div.accordion > ul > li > p {
  position: relative;
  font-size: 12pt;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.1s ease-in-out;
}

div.accordion > ul > li > p::after {
  position: absolute;
  background: var(--itemcolor);
  content: "";
  bottom: 10px;
  left: -100%;
  width: 100%;
  height: 3px;
  transition: all 0.2s ease-in-out;
}

div.accordion > ul > li:hover > p::after {
  left: 0;
  transition: all 0.2s ease-in-out;
}

div.accordion > ul > li:active > p {
  transform: scale(0.95);
}

div.accordion > ul > input {
  position: absolute;
  display: none;
  z-index: 3;
}

div.accordion > ul > li > label {
  position: absolute;
  width: 120%;
  height: 100%;
  right: 0;
  z-index: 4;
}

div.accordion > ul > li > div.accordion-content {
  position: absolute;
  top: -70px;
  left: -100%;
  width: 250px;
  min-height: 200px;
  padding: 30px 20px;
  background: var(--itemcolor);
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11pt;
  color: white;
  text-align: center;
  text-transform: none;
  line-height: 16pt;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -3px 0px inset;
  transition: all 0.3s ease-in-out;
  z-index: 5;
}

div.accordion > ul > li:nth-child(2) > div.accordion-content {
  content: "Who moved my cheese smelly cheese bocconcini. Caerphilly cream cheese cheeseburger gouda cheesy grin ricotta stilton the big cheese.";
  top: 0;
}

div.accordion > ul > li:nth-child(4) > div.accordion-content {
  content: "I was having the most wonderful dream. Except you were there, and you were there, and you were there! I daresay that Fry has discovered the smelliest object in the known universe! The alien mothership is in orbit here.";
  top: -50px;
}

div.accordion > ul > li:nth-child(6) > div.accordion-content {
  content: "I'm baby copper mug chillwave shaman freegan normcore, hell of man braid marfa tacos meh. Fam tacos tbh readymade biodiesel 90's vaporware small batch swag locavore chambray DIY.";
}

div.accordion > ul > li:nth-child(4) > div.accordion-content,
div.accordion > ul > li:nth-child(6) > div.accordion-content,
div.accordion > ul > li:nth-child(8) > div.accordion-content {
  color: black;
}

div.accordion > ul > li:nth-child(8) > div.accordion-content {
  content: "But anyhoo, can you believe that the only reason the club is going under is because it's in a terrifying neighborhood? I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball!";
}

div.accordion > ul > li:nth-child(10) > div.accordion-content {
  top: -120px;
  content: "You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Wow!";
}

div.accordion > ul > li:nth-child(12) > div.accordion-content {
  top: unset;
  bottom: 0;
  content: "The Work has the right to modify or distribute the Program (or any work based on the Internet using the software, or if you distribute are governed by the Copyright Holder of the initial Agreement Steward.)";
}

div.accordion > ul > li > div.accordion-content::after {
  position: absolute;
  top: 20%;
  left: 100%;
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 30px solid var(--itemcolor);
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}

div.accordion > ul > li > label:hover {
  cursor: pointer;
}

div.accordion > ul > input:checked + li > div.accordion-content,
div.accordion > ul > input:checked + li > div.accordion-content::after {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

div.accordion > ul > input:checked + li > div.accordion-content {
  left: -100%;
}

div.accordion > ul > input:checked + li > div.accordion-content::after {
  left: 100%;
  transform: scale(1);
}

div.accordion > ul > input:checked + li > p {
  color: var(--itemcolor);
  font-weight: 700;
  font-size: 14pt;
  transition: all 0.1s ease-in-out;
}

/* Make Responsive */

@media (max-width: 990px) {
  body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  div.accordion {
    min-height: 100vh;
    padding: 20px 0px;
  }

  div.accordion > ul {
    left: 20px;
    align-self: flex-start;
  }

  div.accordion > ul > li > div.accordion-content {
    width: 300px;
    left: 100%;
    top: 100% !important;
  }

  div.accordion > ul > li > div.accordion-content::after {
    left: 0;
    top: 20%;
  }

  div.accordion > ul > input:checked + li {
    margin-bottom: 220px;
  }

  div.accordion > ul > input:checked + li > div.accordion-content {
    left: 21%;
  }

  div.accordion > ul > input:checked + li > div.accordion-content::after {
    left: -1rem;
    top: 20%;
  }
}

@media (max-width: 630px) {
  div.accordion > ul > li {
    height: 70px;
  }
  div.accordion > ul > li > p {
    font-size: 11pt;
  }
  div.accordion > ul > input:checked + li > p {
    font-size: 12pt;
  }
  div.accordion > ul > li > div.accordion-content {
    padding: 20px;
    left: 10% !important;
  }
  div.accordion > ul > li > div.accordion-content::after {
    left: -1rem !important;
    filter: drop-shadow(1px 1px 2px black);
  }
}

@media (max-width: 550px) {
  div.accordion > ul {
    width: 320px;
  }
  div.accordion > ul > li {
    white-space: normal !important;
  }
  div.accordion > ul > li > p {
    white-space: normal !important;
    line-height: 11pt;
  }
  div.accordion > ul > li > div.accordion-content {
    padding: 20px;
    left: -10% !important;
  }
  div.accordion > ul > li > div.accordion-content::after {
    left: -1rem !important;
  }
}

@media (max-width: 375px) {
  div.accordion > ul {
    width: 290px;
  }
  div.accordion > ul > li > div.accordion-content {
    width: 230px;
    min-height: 260px;
  }
  div.accordion > ul > input:checked + li {
    margin-bottom: 270px;
  }
}