body{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.card {
    width: 12%;
    position: relative;
    transition: transform 0.5s;
    aspect-ratio: 0.65;
    border-radius: 9px;
    background-color: white;
    border-style: solid;
    border-color: lightgrey;
    box-shadow: 10px 10px rgb(45, 14, 80);
    padding: 6px;
    margin: 6px;
}

.card-image{
  width: 15%;
}

.card-edge{
    border-style:dashed;
    border-width: 5px;
    border-color: lightseagreen;
}

.card-small {
    width: 5%;
    position: relative;
    transition: transform 0.3s;
    border-radius: 3px;
    box-shadow: 3px 3px rgb(45, 14, 80);
}

footer{
  background-color: whitesmoke;
  color: #0c6400;
  padding: 1rem;
}

.container{
    padding-left: 7.5%;
    width: 90%;
    text-align: center;
}

.glass-button {
  background: #0c6400;
  border: 3px solid rgba(0, 0, 0, 0.3);
  color: #fbf0f0;
  border-radius: 9px;
  backdrop-filter: blur(8px);
  padding: 1%;
  margin: 1%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: xx-large; /* Desktop default */
}

.glass-button:hover {
  background: #0d7100;
  transform: scale(1.025);
}

.glass-button-wide {
  width: 33%;
}

.logo-small{
  width: 64px;
}

.invert{
  filter: invert(100%);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .glass-button {
    font-size: large;   /* Smaller text */
    padding: 8px 16px;  /* Smaller padding */
  }

  .glass-button-wide {
    width: 90%;         /* Full-ish width on mobile */
  }
}


label {
  font-weight: 600;
  margin-right: 8px;
}

select {
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: white;
  color: #333;
  cursor: pointer;
  outline: none;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23333' height='12' viewBox='0 0 20 20' width='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 20,0 10,10'%3E%3C/polygon%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color 0.2s ease;
}

select:hover {
  border-color: #888;
}

select:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 4px rgba(74, 144, 226, 0.5);
}