/* ===========================
   TF2 Dark Theme + Variables
   =========================== */
:root {
  --tf2-red: #b8383b;
  --tf2-blue: #5885a2;
  --gold: #e0c36c;
  --panel: #242424;
  --ink: #ece8e1;

  /* Slot machine layout */
  --row-h: 160px;
  --gap: 8px;
}

/* Optional: darker Bulma box contrast on dark bg */
.box {
  background-color: #191919;
  color: var(--ink);
}
.navbar-burger {
  color: #fff;
}

html {
  height: 100%; /* full viewport baseline */
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* This makes the content area grow to fill space */
}

/*Join Group Card Styles */
.group-content{
  position: relative;
  overflow: hidden; 
  }
.group-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius:0.75rem;
  backdrop-filter: blur(10px); /* Apply blur to the overlay */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease; /* Add transition for smooth effect */  
}
.group-content:hover .group-overlay{
  opacity: 1;
  transition-duration: 0.5s;
  }
.group-button{
  opacity: 0;
  visibility: hidden;
  display: none;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-top:53px;
  transform: translate(-50%,-50%);
  z-index: 100;
  width: 125px;
}
.group-content:hover .group-button {
  visibility: visible;
  opacity: 1;
  display:inline-block;
}