*,

::after {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  position: relative;
}

 
 
body
 {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: -webkit-linear-gradient(to right, #1364c0, #7591ca, #2baa64);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1364c0, #7591ca, #24a75f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0px;
   
  padding: 0px 0px;height: 100%;
}

article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 98%;
  
  height: auto;
  background: #022938;
  padding: 15px 24px 5px 28px;
  margin: 1px 0px 0px;
  border-radius: 0px;
  color: white;
  text-transform: capitalize;
  border: #e6ebe4 1px solid;
}

article::before {
  position: absolute;
  right: 10px;
  
  font-size: 220pt;
  mix-blend-mode: luminosity;
  opacity: 0.07;
}

article::after {
  position: absolute;
  width: calc(85% + 1px);
  height: calc(85% + 1px);
  top: 1px;
  background: var(--gradientAccent);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 20px;
  z-index: -1;
  content: "";
}

article mark {
  color: black;
  background: #aaa;
  padding: 2px 6px;
  border-radius: 0px;
}

article aside {
  margin-top: 10px;
  font-size: 85%;
  color: #ccc;
  font-weight: 400;
  padding-right: 0px;
}

article h1 {
  font-size: 24px;
  line-height: 24pt;
  margin-bottom: 15px;
  font-weight: 700;
  background: var(--gradientAccent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-transform: initial !important;
}

article h2 {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

article h2 mark {
  font-size: 105%;
  margin-right: 5px;
}

article hr {
  width: 97%;
  height: 0px;
  border-bottom: 2px solid rgb(7, 156, 112);
  border-left: unset;
  border-top: unset;
  border-right: unset;
  margin: 15px 0px;
}


article ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding-left: 2rem;
}

article ul:focus {
  outline: none;
}

article > ul::after {
  position: absolute;
  left: 3px;
  width: 1px;
  height: 100%;
  background: white;
  content: "";
  border-radius: 0px;
}

article ul li {
  margin-bottom: 15px;
  border-radius: 0px;
  padding-right: 5px;
}

article ul li ul {
  margin-top: 15px;
}

.topLevel {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='position: relative; top: 4px; fill: white;' viewBox='0 0 16 16'%3E%3Cpath d='M11 13a5 5 0 1 0-4.975-5.5H4A1.5 1.5 0 0 0 2.5 6h-1A1.5 1.5 0 0 0 0 7.5v1A1.5 1.5 0 0 0 1.5 10h1A1.5 1.5 0 0 0 4 8.5h2.025A5 5 0 0 0 11 13zm.5-7.5v2h2a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2h-2a.5.5 0 0 1 0-1h2v-2a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
  font-size: 12pt;
  font-weight: 600;
  padding-right: 0;
  border-radius: 0px;
}

.childLevel {
  display: none;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='15' height='15' style='position: relative; top: 2px;' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");
  font-size: 10pt;
  font-weight: 400;
  cursor: pointer ;
  color: whitesmoke; 
  border-radius: 0px;
}

.childLevel::after {
  position: absolute;
  left: 0px;
  width: 1px;
  height: calc(100% - 10px);
 
  content: ""; border-radius: 0px;
  
}

.babyLevel {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='13' height='13' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.babyLevel::after {
  position: absolute;
  left: 0px;
  width: 1px;
  height: calc(100% - 10px);
  background: palegreen;
  content: "";
  
}

/* Functionality */

article label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

article label:hover {
  cursor: pointer;
 
}

#childOpen0:checked ~ ul > .topLevel:nth-child(1) label:focus,
#childOpen1:checked ~ ul > .topLevel:nth-child(2) label:focus,
#childOpen2:checked ~ ul > .topLevel:nth-child(3) label:focus,
#childOpen3:checked ~ ul > .topLevel:nth-child(4) label:focus,
#childOpen4:checked ~ ul > .topLevel:nth-child(5) label:focus,
#childOpen5:checked ~ ul > .topLevel:nth-child(6) label:focus,
#childOpen6:checked ~ ul > .topLevel:nth-child(7) label:focus,
#childOpen7:checked ~ ul > .topLevel:nth-child(8) label:focus,
#childOpen8:checked ~ ul > .topLevel:nth-child(9) label:focus,
#childOpen9:checked ~ ul > .topLevel:nth-child(10) label:focus,
#childOpen10:checked ~ ul > .topLevel:nth-child(11) label:focus,
#childOpen11:checked ~ ul > .topLevel:nth-child(12) label:focus,
#childOpen12:checked ~ ul > .topLevel:nth-child(13) label:focus,
#childOpen13:checked ~ ul > .topLevel:nth-child(14) label:focus,
#childOpen14:checked ~ ul > .topLevel:nth-child(15) label:focus,
#childOpen15:checked ~ ul > .topLevel:nth-child(16) label:focus,
#childOpen16:checked ~ ul > .topLevel:nth-child(17) label:focus,
#childOpen17:checked ~ ul > .topLevel:nth-child(18) label:focus,



#childOpen5:checked ~ ul > .topLevel:last-of-type label:focus {
  
  
  
  
  transition: all 0.1s linear;
  transition-delay: 0.1s;
}

article input {
  display: none;
}




#childOpen0:checked ~ ul > .topLevel:nth-child(1) .childLevel,
#childOpen1:checked ~ ul > .topLevel:nth-child(2) .childLevel,
#childOpen2:checked ~ ul > .topLevel:nth-child(3) .childLevel,
#childOpen3:checked ~ ul > .topLevel:nth-child(4) .childLevel,
#childOpen4:checked ~ ul > .topLevel:nth-child(5) .childLevel,
#childOpen5:checked ~ ul > .topLevel:nth-child(6) .childLevel,
#childOpen6:checked ~ ul > .topLevel:nth-child(7) .childLevel,
#childOpen7:checked ~ ul > .topLevel:nth-child(8) .childLevel,
#childOpen8:checked ~ ul > .topLevel:nth-child(9) .childLevel,
#childOpen9:checked ~ ul > .topLevel:nth-child(10) .childLevel,
#childOpen10:checked ~ ul > .topLevel:nth-child(11) .childLevel,
#childOpen11:checked ~ ul > .topLevel:nth-child(12) .childLevel,
#childOpen12:checked ~ ul > .topLevel:nth-child(13) .childLevel,
#childOpen13:checked ~ ul > .topLevel:nth-child(14) .childLevel,
#childOpen14:checked ~ ul > .topLevel:nth-child(15) .childLevel,
#childOpen15:checked ~ ul > .topLevel:nth-child(16) .childLevel,
#childOpen16:checked ~ ul > .topLevel:nth-child(17) .childLevel,
#childOpen17:checked ~ ul > .topLevel:nth-child(18) .childLevel,


#childOpen5:checked ~ ul > .topLevel:last-of-type .childLevel {
  display: flex;
}
#childOpen0:checked ~ ul > .topLevel:nth-child(1),
#childOpen1:checked ~ ul > .topLevel:nth-child(2),
#childOpen2:checked ~ ul > .topLevel:nth-child(3), 
#childOpen3:checked ~ ul > .topLevel:nth-child(4),
#childOpen4:checked ~ ul > .topLevel:nth-child(5),
#childOpen5:checked ~ ul > .topLevel:nth-child(6),
#childOpen6:checked ~ ul > .topLevel:nth-child(7),
#childOpen7:checked ~ ul > .topLevel:nth-child(8),
#childOpen8:checked ~ ul > .topLevel:nth-child(9),
#childOpen9:checked ~ ul > .topLevel:nth-child(10),
#childOpen10:checked ~ ul > .topLevel:nth-child(11),
#childOpen11:checked ~ ul > .topLevel:nth-child(12),
#childOpen12:checked ~ ul > .topLevel:nth-child(13),
#childOpen13:checked ~ ul > .topLevel:nth-child(14),
#childOpen14:checked ~ ul > .topLevel:nth-child(15),
#childOpen15:checked ~ ul > .topLevel:nth-child(16),
#childOpen16:checked ~ ul > .topLevel:nth-child(17),
#childOpen17:checked ~ ul > .topLevel:nth-child(18),


#childOpen5:checked ~ ul > .topLevel:last-of-type {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' style='position: relative; top: 4px;' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M16 8a5 5 0 0 1-9.975.5H4A1.5 1.5 0 0 1 2.5 10h-1A1.5 1.5 0 0 1 0 8.5v-1A1.5 1.5 0 0 1 1.5 6h1A1.5 1.5 0 0 1 4 7.5h2.025A5 5 0 0 1 16 8zm-2 0a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5A.5.5 0 0 0 14 8z'/%3E%3C/svg%3E");
}

@media (max-width: 660px) {
  article::before {
    display: none;
  }


  article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    
    height: auto;
    background: -webkit-linear-gradient(to right, #1364c0, #7591ca, #2baa64);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1364c0, #3a568f, #24a75f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   
    padding: 15px 24px 5px 28px;
    margin: 1px 0px 0px;
    border-radius: 0px;
    color: white;
    text-transform: capitalize;
    border: none;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0px;
    background: #888;
    padding: 0px 0px;
  }
}




 .switch1 {
  background-color: #1c87c9;
  -webkit-border-radius: 0px;
  border-radius: 1px;
  border: none;
  color: #eeeeee;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  
}
@keyframes glowing {
  0% {
    background-color: #2ba805;
    box-shadow: 0 0 5px #2ba805;
  }
  50% {
    background-color: #49e819;
    box-shadow: 0 0 20px #49e819;
  }
  100% {
    background-color: #2ba805;
    box-shadow: 0 0 5px #2ba805;
  }
}
 .switch1 {
  animation: glowing 1300ms infinite;
}