#theme-changer {
               position: fixed;
               top: 20px;
               right: 20px;
               z-index: 9999;
             background: rgba(255,255,255,0.5);
             backdrop-filter: blur(3px);
             border: 2px solid #d1d1d1;
             padding: 25px;
             border-radius: 20px;
             display: none;
      }

#icons {
filter: invert(1);
    width: 25px;
}
     
     
     
     #theme-changer:hover {
       color: rgba(255,255,255,0.75);
       backdrop-filter: blur(6px);
       border: 4px solid white;
     }
           .color-circle {
               display: inline-block;
               width: 30px;
               height: 30px;
               border-radius: 50%;
               margin-right: 10px;
               cursor: pointer;
           }
     
     .color-circle:hover {
       border: 2px solid white;
       box-shadow: 0 0 20px white;
     }
           #custom-color {
               display: none;
           }

           #color, #brunebot, #timetable {
           cursor: pointer; 
           }

           #color:hover {
           box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
           }


           #timetable:hover {
           box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
           }


           #brunebot:hover {
           box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
           }
     .sidebar {
         position: absolute;
         width: 45px;
       height: auto;
       border-radius: 100px;
       padding: 10px;
       color: white;
       background: #b91919;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       transition: all 0.3s ease;
       transform: translate(53vw, 0px);
       animation-duration: 0.3s;
    animation-fill-mode: forwards;
    margin-left: -30px;
     }
  
  
 
 
     .sidebar img {
         width: 25px;
         margin-top: 12.5px;
         margin-bottom: 12.5px;
     }
     .sidebar hr {
        border: 1.5px solid#d61717;
        width: 100%;
     }
     .incresize {
       width: 100%;
       height: 35%;
       background: transparent;
     }
     
     .website-layout-container {
       position: absolute;
       transform: translate(0%, -20%;)
     }
   .custom-shape-divider-bottom-1713904167 {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       overflow: hidden;
       line-height: 0;
       transform: rotate(180deg);
   }
  
  // colors
$space-blue: #000028;
$star: rgba(255,255,255,0.7);

body {  
  font-family: -apple-system,system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0; 
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* change this to your background color choice */
  background: $space-blue;
  background-image:  
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%), 
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%), 
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%);
  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 6px 6px, 4px 4px, 5px 5px, 4px 4px, 6px 6px, 3px 3px, 5px 5px, 4px 4px, 3px 3px, 6px 6px, 5px 5px, 4px 4px, 5px 5px, 6px 6px;
  background-position: 20% 10%, 5% 20%, 10% 75%, 22% 35%, 30% 30%, 40% 50%, 45% 20%, 65% 20%, 85% 30%, 98% 90%, 20% 80%, 50% 80%, 75% 80%, 89% 75%, 90% 95%, 60% 70%, 65% 40%, 90% 20% ;
  background-repeat: no-repeat;
  animation: twinkle ease-in 0.3s infinite;  
}

.container {
  margin: 100px;
}

.illo {
  cursor: move;
}

.text {
  text-align: center;
  color: #8E92A2;
}

button {
  display: block;
  margin: auto;
  background: #444857;
  color: white;
  font-size: 14px;
  font-family: inherit;
  border: none;
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25);
}

a {
  color: #EA0;
  font-weight: 700;
}

@keyframes twinkle{
  to{
  background-image:  
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%), 
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%), 
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, $star 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%),
  radial-gradient(circle, #fff 20%, transparent 30%);  }
}

   
   .custom-shape-divider-bottom-1713904167 svg {
       position: relative;
       display: block;
       width: calc(130% + 1.3px);
       height: 184px;
       transform: rotateY(180deg);
   }
   
   .custom-shape-divider-bottom-1713904167 .shape-fill {
       fill: #781721;
   }
   
   .open {
       position: absolute;
       transform: rotate(90deg);
       transform: translate(49vw, 0px) rotate(90deg);
       width: 25px;
       height: 25px;
       border-radius: 50%;
       padding: 10px;
       color: white;
       background: #b91919;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: all 0.3s ease;
       z-index: 9;
       animation-duration: 0.3s;
    animation-fill-mode: forwards;
   }
   
     body {
     display: flex;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: #DC143C;
     color: white;
     font-family: monospace;
     font-weight: 700;
   }
   
   .toggle {
     width: 25px;
     height: 25px;
     border-radius: 50%;
     padding: 10px;
     color: white;
     background: #b91919;
     display: flex;
     justify-content: center;
     align-items: center;
       margin-top: -20px;
     transition: all 0.3s ease;
     margin: 0 auto;
   }
   
   .search-icons {
       width: 25px;
     height: 25px;
     border-radius: 50%;
     padding: 10px;
     color: white;
     background: #b91919;
     display: flex;
     margin-top: 2.5px;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
     overflow: hidden;
   }
   
   input:focus {
     outline: none;
   }
   
   #iframeContainer {
     background: red;
     display: none;
     width: 80vw;
     height: 90vh;
     border-radius: 1rem;
     border: 10px solid #d1d1d1;
     position: absolute;
     left: 10%;
     top: 3.5%;
     overflow: hidden;
   }
   
   .invis {
     margin-left: 17.5px;
     background: transparent;
     border: none;
     color: white;
     font-family: monospace;
     font-size: 20px;
     highlight: none;
     width: 690px;
     height: 50px;
   }
   
   .invis::placeholder {
     color: #8d6e6e;
   }
   .toggle:hover {
     transform: scale(1.025);
     margin-top: 7.5px;
     border: 0.1px solid #d1d1d1;
     margin-bottom: 35px;
   }
   
   #Lol {
     display: none;
     color: white;
     font-family: monospace;
     border-radius: 2rem;
     padding: 5px;
     font-size: 5px;
     background: #ba1919;
     position: absolute;
   }
   
   .toggle:hover + #Lol.show {
     display: block;
   }
   
   
   #title {
     margin-top: 300px;
     margin-bottom: 50px;
     text-align: center;
     font-size: 3.5rem;
     color: white;
     font-family: monospace;
     font-weight: 700;
   }
   
   .search {
     display: flex;
     flex-direction: row;
     font-size: 20px;
     highlight: none;
     color: white;
     padding: 17.5px;
     width: 700px;
     border-radius: 12.5px;
     border: 2px solid #d1d1d1;
     background: linear-gradient(to right bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
     backdrop-filter: blur(6.5px);
     transition: all 0.35s ease;
   }
   
   .search:hover {
     box-shadow: 0 0 69px white;
     border: 3px solid white;
     background: linear-gradient(to right bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.4));
     backdrop-filter: blur(6px);
     transform: scale(1.025);
   }

   .dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #f1f1f1;
  color: black;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}




.dropdown-content ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

.dropdown-content ul li a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ccc;
}

.timetable-container {
position: fixed;
display: none;
height: 500px;
z-index: 6942069;
  border-radius: 2rem;
  border: 2px solid #d1d1d1;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.9), rgba(255,255,255,0.35));
padding: 20px;
  max-width: 696.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  backdrop-filter: blur(5px);
  overflow: hidden;
  transition: all 0.1s ease-in-out;
    color: white;
  font-family: monospace;
}

.timetable {
    color: white;
  font-family: monospace;
  transition: all 0.9s;
}

.timetable:hover {
  transform: scale(1.05);
  box-shadow: 0 0 5px white;
}

#table2 {
  display: none;
    color: #d1d1d1;
  font-family: monospace;
}

#table1 {
  display: block;
}
.horizontal-scroll-timetable {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 69px;
}


.timetable-container:hover {
  transform: scale(1.0005);
  box-shadow: 0 0 100px rgba(255,255,255,0.75);
  border: 2px solid white;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
  backdrop-filter: blur(10px);
}

  table {
  width: 100%;
  border-collapse: collapse;
    color: white;
  font-family: monospace;
}
th, td {
  border: 5px solid white;
  padding: 8px;
  text-align: left;
}

 tr td:nth-child(even) {
    background-color: #4eb0ca;
   color: white;
  font-family: monospace;
  }

  tr td:nth-child(odd) {
    background-color: #57c4e1;
   color: white;
  font-family: monospace;
  }

  th {
  background-color: #3e8ca1;
  }









.toggle-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  animation: pulse 1.5s ease alternate infinite; /* Animation */
}

.toggle-button:hover {
  background-color: #ffffff; /* White */
  color: #4CAF50; /* Dark Green */
}

.toggle-button:active {
  animation: click-effect 0.01s ease forwards;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes click-effect {
  0% {
    
  }
  100% {
    background: green;
    color: white;
  }
}

   
   h1:hover {
     transform: scale(1.015);
   }
   
   .search-icons:hover {
     transform: scale(1.01);
     border: 0.1px white solid; 
   }
   .ass {
     width: 0px;
     height: 0px;
     border-radius: 25px;
     filter: blur(12.5px);
     background: white;
     position: absolute;
   }
   .searchIcon {
     animation: searchIcon 1s ease forwards;
   }
   
   @keyframes searchIcon {
     from {
       width: 0px;
       height: 0px;
       opacity: 0;
     }
     
     to {
       width: 50px;
       height: 50px;
       opacity: 1;
     }
   }

   #pro-feature {
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   text-align: center;
   justify-content:center;
   align-items: center;
   background: rgba(255,255,255,0.5);
   backdrop-filter: blur(5px);
   position: absolute;
   z-index: 999;
   display: none;
   transition: all 0.3s ease;
   }

   #pro-feature:hover {
   transform: scale(1.025);
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   .card {
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     width: 100px;
     height: 100px;
     background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
     backdrop-filter: blur(2px);
     border-radius: 20%;
     margin: 20px;
     border: 2px solid #f5f5f5;
     transition: ease-in-out 0.15s;
     filter: blur(0.75px);
     z-index: 9;
     opacity: 0.75;
   }
   
   h4 {
     font-size: 8.5px;
   }
   
   #smol {
       margin-top: -10px;
     font-size: 20px;
     margin-bottom: -15px;
   }

   #smoler {
     margin-top: -7.5px;
     font-size: 20px;
     margin-bottom: -15px;
   }
   
   a{
     text-decoration: none;
     color: white;
     font-family: monospace;
   }
   
   .card img {
     width: 75px;
   }
   
   .card:hover {
      transform: scale(1.05);
       filter: blur(0px);
     border: 2.5px solid white;
     background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
     box-shadow: 0 0 100px rgba(255, 255, 255, 1);
     opacity: 1;
   }
   
   #gpt, #gc {
     width: 50px;
     margin-bottom: 10px;
     margin-top: 15px;
   }
   
   .bento {
     display: grid;
       grid-template-columns: repeat(auto-fit, minmax(123px, 2fr));
       width: 750px;
     height: 150px;
     margin: 0 auto;
     z-index: -10;
   }

   #dcr {
   width: 50%;
   margin-bottom: 7.5px;
   }
   
   .website-layout-container {
     display: none;
     margin: 0 auto;
   }
   
   .toggle:hover + .website-layout-container,
   .website-layout-container.show {
     display: block;
   }
   
   
   section {
   transform: translate(0%, -30%);
   text-align: center;
   position: relative;
   }

   #update {
   position: absolute;
   z-index: 9;
   bottom: 0;
   right: 0;
   margin: 15px;
   }

   ery {
   display: flex;
   flex-direction: row;
   gap: 5px;
   position: absolute; 
   z-index: 90;
   top: 0;
   left: 0;
   margin: 10px;
   }

   .breh {
   border: 0px solid transparent;
   background: transparent;
   transition: all 0.3s;
   }


.breh:hover {
scale: 2;
}
   .timesoftables {
   border: 0px solid transparent;
   background: transparent;
   }

   .toggle-button, dropdown {
  position: relative;
  z-index: 9999999;
  }



.container {
  position: fixed;
  width: 620px;
  margin: 0 auto;
  height: 320px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.75), rgba(255,255,255,0.25));
  text-align: center;
  border-radius: 2rem;
  border: 1px solid white;
  backdrop-filter: blur(2px);
  z-index: 999999999999;
  display: none;
}

.container:hover {
  box-shadow: 0 0 25px rgba(255,255,255,0.75);
  transform: scale(1.0005);
  border: 2px solid white;
  backdrop-filter: blur(5px);
  background: linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
}

.shop-item {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.shop-item:hover {
  background-color: #f0f0f0;
}