html{
  height: -webkit-fill-available;
  width: -webkit-fill-available;
}

body {
    background: linear-gradient(45deg, #333333, #07294D, #006699,#E1E1E0,#FFC600, #FFC600,#FFC600);
    background-size: 300% 300%;
    animation: color 26s ease-in-out infinite; /* Added 's' for seconds */

}
@keyframes color {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.Top {
    align-items: center; /* Align items vertically */
}
h1 {
    text-align: center;
}

.colors {
  position: absolute;
  right: 0px;
  width: 300px;
  padding: 10px;
  
}

.logo {
  margin-right: 10px; /* Adjust the margin as needed */
  width: 180px;
}

/* Beginning of Search Bar */
.search-wrapper {
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  
  input {
    font-size: 1rem;
  }
  
  .user-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .25rem;
    margin-top: 1rem;
  }
  
  .card {
    border: 1px solid black;
    background-color: white;
    padding: .5rem;
  }
  
  .card > .header {
    margin-bottom: .25rem;
  }
  
  .card > .body {
    font-size: .8rem;
    color: #777;
  }
  
  .hide {
    display: none;
  }

/* End of search bar */
.slogan {
    text-align: center;
    font-family: "Allura", cursive;
    font-weight: 400;
    font-style: normal; 
}

.link {
    float: right;
}

.map {
  text-align: center; 
}

/* Start of custom sidebar*/
*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #DFE9EB;
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: #B8C0C2;
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: #B8C0C2;
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #686868;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: #686868;
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: #686868;
  }

/*start of the href button*/
.link {
    background-color: #ddd;
    border: none;
    color: black;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    transition: 0.3s;
    border-radius: 25px;
  }
  
  .link:hover {
    background-color: #3e8e41;
    color: white;
  }

.colorcode {
    float: right;
    text-align: center;
    margin-right: 140px; /* Adjust as needed */
}

.colorcode table {
    margin: 0 auto; /* This centers the table */
}

.colorcode th, .colorcode td {
    padding: 5px;
    border: 1px solid #000; /* Adding borders for better visualization */
}