* {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}



body {
  padding: 0px;
  justify-items: center;

  text-align: center;

  /* Text positioning */

  /* No Text select or image dragging */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  -moz-user-select: none;
  -webkit-user-drag: none;
  margin: 0px;
  
  background-color: rgb(45, 44, 44);
}
#title {
  padding-top: 2vw;
  font-size: 5vw;
  font-weight: bold; 
  text-align: center;
  width: 100%;
  color: rgb(246 244 240);
  transition: background-color 0.6s;
}

#settings {
  position: absolute; 
  top: 2vw; 
  right: 2vw; 
  width: 3vw;
  transition: scale 0.4s;
  filter: invert(0.7)
}

#settings:hover {
  scale: 1.2;
}

#home {
  text-decoration:line-through; 
  text-decoration-color: rgb(215, 106, 106); 
  text-decoration-thickness: 5px; 
  text-shadow: 0px 0px 0px #00000000 !important; 
  color: rgb(168 166 162) !important;
}

#nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 3vw;
  background-color: rgba(31 30 30 0); /* Fully opaque */
  transition: background-color 0.5s;
  position: sticky;
  top: 0; 
  z-index: 1;
}



#nav-elements {
  width: 100%;
  font-size: 2vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: rgb(168 166 162);
  text-shadow: rgb(168 166 162);
    
}

#cursor {
  position: fixed; /* Essential for following the mouse across the viewport */
  top: 0;
  left: 0;
  pointer-events: none; /* Crucial: Ensures your custom cursor doesn't block clicks on elements underneath it */
  width: 100px;
  height: 100px;
  z-index: 2;
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  background-color: rgba(168, 166, 162, 0.06);
  box-shadow: 0px 0px 100px 5px rgba(168, 166, 162, 0.2);
  border-radius: 50%; /* For a circular cursor */
}

#nav-elements > div:hover{
  color: rgba(246, 244, 240, 0.823);
  text-shadow: 0px 0px 100px rgba(81, 81, 255, 0.4);
}
#nav-elements > div {
  display: flex;
  align-items: center;
  transition: scale 0.4s, text-shadow 0.4s, color 0.4s;
}
#nav-elements .redirect:hover {
  scale: 1.2;
}

.dropdown {
  position: relative;
  
}


.dropdown text {
  display: flex;
  transition: scale 0.4s;
}

.drop {
  width: 60%;
  position: absolute;
  left: 85%;
  scale: 0;
  transform: rotate(-90deg);
  transition: transform 0.4s, scale 0.4s;
}


.list {
  display: flex;
  position: absolute;
  overflow: hidden;
  color: rgba(246, 244, 240, 0.692);
  border-collapse: collapse;
  width: 115%;
  border-radius: 0px 0px 1vw 1vw;
  top: 100%;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(31, 30, 30, 0), rgb(31, 30, 30));
  max-height: 0px;
  overflow-y:hidden;
  transition: max-height 0.8s;
}



tr {
  border-bottom: 4px groove rgba(255, 255, 255, 0.2);
}

tr:last-child{
  border: none;
}

th {
    font-size: 1.3vw;
    padding: 0.3vw;
    text-shadow: 0px 0px 2px black;
    font-weight: bold;
    width: 1000px;
    transition: scale 0.4s;
    scale: 1;
}
th:hover {
    scale: 1.15;
}

#home {
    scale: 1 !important;
}

a {
  display: inline-block;
  color: rgb(81 81 255);
}
a:hover {
  animation: shake 0.5s; 
  animation-iteration-count: infinite;
}