body {
    background-color: #080d24;
    color: #91c1fc;
    font-family: "Nixie One";
    font-size: 1.1em;
}

h1, h5 {
    text-align: center;
    font-family: Quicksand;
}

h5 {
    font-size: 1em;
}

h2 {
    text-align: center;
    font-size: 1em;
    font-family: "Nixie One";
    
}

h4 {
  text-align: center;
  font-size: 0.6em;
  font-family: "Nixie One";
  
}

/* bold */
h3 {
    text-align: center;
    font-size: 1em;
    font-family: "Nixie One";

}




/* Title font */
.p1 {
    
    /* font-family: "UnifrakturCook"; */
    font-family: "Nova Cut";
    /* font-family: "Lucida Handwriting", cursive; */
    font-size: 4em;
    color: #ffffff;
   
  }

  /* sub-title font */
.p2 {
    
    /* font-family: "UnifrakturCook"; */
    font-family: "Nova Cut";
    /* font-family: "Lucida Handwriting", cursive; */
    font-size: 1em;
    color: #ffffff;
    margin-top: 100px;
  }

    /*the official...*/
.p3 {
    
  /* font-family: "UnifrakturCook"; */
  font-family: "Nova Cut";
  /* font-family: "Lucida Handwriting", cursive; */
  font-size: 1em;
  color: #ffffff;
  margin-top: -110px;
}

#score {
    text-align: center;
    font-size: 3em;
}

#meaning {
    text-align: center;
    font-size: 1.2em;
}

.container {
    display: flex;
    justify-content: center;
  }
  

.button {
    background-color: #080d24; /* Solid background color */
    color: #7eb8ff;
    padding: 10px 53px; /* Size of the button */
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold; /* Makes the text a bit bolder */
    border-radius: 30px; /* Rounded corners for oval shape */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    transition: all 0.2s ease; /* Smooth transition for hover effects */
    position: relative; /* Required for pseudo-elements */
    overflow: hidden; /* Ensures pseudo-elements don't overflow */
    border: 2px solid #7eb8ff;
    /* border: 2px solid rgba(255, 255, 255, 0.3); Subtle border for glossy effect */
    margin: 0 10px; /* Top and bottom margins are 0, left and right margins are 10px */
    /* Fancy text shadow for depth */
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
  }
  
  .button::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    bottom: -50%; left: -50%;
    z-index: -1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: inherit; /* Follows the border-radius of the button */
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: scale(0);
  }
  
  .button:hover::before {
    opacity: 1;
    transform: scale(1);
  }
  
  .button:hover {
    box-shadow: 0 8px 15px rgba(74, 15, 141, 0.4); /* Larger shadow for hover effect */
    transform: translateY(-2px); /* Slight lift on hover */
  }
  
  .button:active {
    transform: translateY(1px); /* Mimics a button press */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Smaller shadow for press effect */
  }
  



#buttondiv {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.button:hover {
    background-color: #7eb8ff;;
}

a:link {
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    /* when a link is NOT hovered over */
    color: rgb(0, 86, 206);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    /* when a link is hovered over */
    color: rgb(36, 115, 226);
    background-color: transparent;
    text-decoration: underline;
}

/* a:active {
    color: rgb(0, 153, 255);
    background-color: transparent;
    text-decoration: underline;
} */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #0e143b;
    border-radius: 10px;
}

/* Hide the default checkbox */
/* Hide the default checkbox */
.custom-checkbox input[type="checkbox"] {
    display: none;
  }
  
  /* Create a custom box */
  .custom-checkbox .checkmark {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: white;
    position: relative;
    border: 0.1px solid #7eb8ff;
    /* Scale it to the right size if needed */
    transform: scale(1.4);
    margin-right: 3px; /* Add space between the checkmark and the text */
  }
  
  /* Add padding to the right of the checkbox and label text */
  .custom-checkbox {
    padding-right: 10px;
  }
  
  
  /* When the checkbox is checked, display a blue check mark */
  .custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><polyline points="4,10 8,15 16,4" style="fill:none;stroke:rgb(36, 115, 226);stroke-width:3;"/></svg>') center/16px 16px no-repeat;
  }
  
  /* You can add ':hover' styles and others as needed */

  



ul {
    list-style: none; /* Remove default list styling */
    padding-left: 0; /* Remove default padding */
    counter-reset: listItem; /* Create a counter for list items */
  }

  

    li {
        counter-increment: listItem; /* Increment the counter */
        position: relative; /* Needed for absolute positioning of the pseudo-element */
        padding-left: 580px; /* Provide sufficient space for the number */
        list-style-type: none; /* Removes the default list item indicator */

    }
    
      
    li::before {
        content: counter(listItem) "."; /* Display the counter and a dot */
        position: absolute; /* Position it absolutely within the `li` */
        left: 0px; /* Align to the far left of the `li` padding area */
        width: 570px; /* Width of the space reserved for the number */
        text-align: right; /* Right-align the text within the pseudo-element */
        margin-right: 0px; /* Optional: Adjust the space between the number and list item text */
  }


@media (max-width: 1500px) {
    li {
        counter-increment: listItem; /* Increment the counter */
        position: relative; /* Needed for absolute positioning of the pseudo-element */
        padding-left: 280px; /* Provide sufficient space for the number */
        list-style-type: none; /* Removes the default list item indicator */
    
    }
    
      
    li::before {
        content: counter(listItem) "."; /* Display the counter and a dot */
        position: absolute; /* Position it absolutely within the `li` */
        left: 0px; /* Align to the far left of the `li` padding area */
        width: 270px; /* Width of the space reserved for the number */
        text-align: right; /* Right-align the text within the pseudo-element */
        margin-right: 0px; /* Optional: Adjust the space between the number and list item text */
  }
}


  @media (max-width: 1300px) {
    li {
        counter-increment: listItem; /* Increment the counter */
        position: relative; /* Needed for absolute positioning of the pseudo-element */
        padding-left: 25px; /* Provide sufficient space for the number */
        list-style-type: none; /* Removes the default list item indicator */
    
    }
    
      
    li::before {
        content: counter(listItem) "."; /* Display the counter and a dot */
        position: absolute; /* Position it absolutely within the `li` */
        left: 0px; /* Align to the far left of the `li` padding area */
        width: 0px; /* Width of the space reserved for the number */
        text-align: right; /* Right-align the text within the pseudo-element */
        margin-right: 0px; /* Optional: Adjust the space between the number and list item text */
  }
}



.dot {
  position: absolute;
  border-radius: 50%;
  background-color: #91c1fc;
  animation: moveFade 4s forwards;
  z-index: 1; /* Ensure dots appear below content */
}



@keyframes moveFade {
  0% {
      transform: translate(0, 0);
      opacity: 0; /* Start fully transparent */
  }
  50% {
      opacity: 1; /* Fully visible after 1 second */
  }
  100% {
      transform: translate(var(--x), var(--y));
      opacity: 0; /* Fade out at the end */
  }
}


/* Add any additional styles for your content to ensure it's above the dots */
#content {
  position: relative;
  z-index: 2; /* Higher than the z-index of .dot */
  /* Other styles for your content */
}



.white-underline {
  width: 500px; /* Fixed width of the underline */
  border-bottom: 3px solid white; /* White underline */
  
  position: absolute; /* The element is positioned relative to its first positioned (not static) ancestor element */
  top: 55%; /* Positioned at the middle of the page vertically */
  left: 50%; /* Positioned at the center of the page horizontally */
  transform: translateX(-50%); /* Offset the element to the left by half its width to center it */
  z-index: -2;
}

.black-underline {
  width: 30px; /* Fixed width of the underline */
  border-bottom: 10px solid #080d24;; /* White underline */
  
  position: absolute; /* The element is positioned relative to its first positioned (not static) ancestor element */
  top: 54.5%; /* Positioned at the middle of the page vertically */
  left: 50%; /* Positioned at the center of the page horizontally */
  transform: translateX(236%); /* Offset the element to the left by half its width to center it */
  z-index: -1;
}