/* Background image */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
/* Background image credit: Unsplash – photo by Emma Swoboda
  https://unsplash.com/photos/close-up-of-pink-tulip-buds-in-a-field-9vh1_MiSlGI*/ 
  /* Code adapted from W3Schools Css Background */
  background: url("img/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  /* end of adapted code */
}

     /* Center transparent box */
.login-box {
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 300px;
}

      /* Heading */
.login-box h2 {
  margin-bottom: 20px;
  color: #fff;
}

        /* Input fields */
.login-box input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

        /* Buttons */
.login-box button {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  
/* Code adapted from MDN Web Docs: CSS backdrop-filter property
   https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter */
  backdrop-filter: blur(5px);
  /* end of adapted code */
}

.login-box button:hover {
    background: #ffffff;
  background: rgba(255, 255, 255, 0.3);
}

.top-left {
  position: absolute;
  top: 20px;
  left: 20px;
}

.home-btn {
  padding: 8px 14px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.6);
}

.home-btn:hover {
    background: #ffffff;
  background: rgba(255, 255, 255, 0.3);
}

    /* Search box styling */
.search-box {
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 320px;
  margin: auto;
}

.search-box h2 {
  margin-bottom: 20px;
  color: #fff;
}

.search-box input {
  width: 70%;
  padding: 10px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-box button {
  padding: 10px 14px;
  border-radius: 5px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ccc;
  border: 1px solid rgba(255,255,255,0.6);
}

.search-box button:hover {
    background: #ffffff;
  background: rgba(255, 255, 255, 0.3);
}

    /* Welcome message */
.welcome-msg {
  text-align: center;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}

      /* Results box */
.results-box {
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  margin: 20px auto;
  padding: 20px;
  width: 80%;
  border-radius: 10px;
  max-height: 400px;
  overflow-y: auto;
 
}

.results-box h3 {
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

.results-box table {
  width: 100%;
  border-collapse: collapse;
}

.results-box th,
.results-box td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  color: #fff;
}

.results-box a {
  color: #00ffff;
  text-decoration: none;
}

.results-box button {
  padding: 6px 12px;
  border-radius: 5px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  border: 1px solid #ccc;
  border: 1px solid rgba(255,255,255,0.6);
}

.results-box button:hover {
    background: #ffffff;
  background: rgba(255, 255, 255, 0.3);
}

.badges {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
}