/* ==================== */
/* Global Reset and Basic Styles */
/* ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background: linear-gradient(to right, #2b3a3e, #3f5b5d);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: white;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  z-index: 2; /* Higher than the grid container */
  position: relative; /* Ensure proper stacking context */
  overflow: visible !important;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(5, 120px);
  gap: 20px;
  padding: 20px;
  position: relative; /* Required for backdrop positioning */
  z-index: 0; /* Lower than buttons */
  transition: opacity 2s ease-in-out;
}

/* First Row */
.substack-button     { grid-area: 1 / 1; }
.twitter             { grid-area: 1 / 2; }
.duolingo            { grid-area: 1 / 3; }

/* Second Row */
.dropkickd-button    { grid-area: 2 / 1; }
.letterboxd          { grid-area: 2 / 2; }
.statsfm             { grid-area: 2 / 3; }
.spotify             { grid-area: 2 / 3; }

/* Third Row */
.backlog-button      { grid-area: 3 / 1; }
.news-button         { display: none !important; }
.kiss-button         { grid-area: 3 / 2; }
.games-like-button   { grid-area: 3 / 3; }

/* Fourth Row */
.propaganda-link     { grid-area: 4 / 1; }
.photo               { grid-area: 4 / 2; }
.vinyl               { grid-area: 4 / 3; }

/* Fifth Row */
.wip                 { grid-area: 5 / 1; }
#themeButton         { grid-area: 5 / 2; }
.secret-button       { grid-area: 5 / 3; }

/* Backdrop Element */
.grid-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* Apply backdrop-filter here */
  background: rgba(43, 58, 62, 0.8); /* Background color for classic theme */
  border-radius: 20px; /* Match the grid container's border radius */
  z-index: -1; /* Place it behind the grid container's content */
}

* {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}

/* Optional: Override for specific elements (if needed) */
.allow-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}