/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
@layer properties;
.mx-auto {
  margin-inline: auto;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.inline-block {
  display: inline-block;
}
.h-full {
  height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
.flex-1 {
  flex: 1;
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-4 {
  border-style: var(--tw-border-style);
  border-width: 4px;
}
.text-center {
  text-align: center;
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
@layer theme {
  :root {
    --font-heading: "Quantico", sans-serif;
    --font-body: "Roboto", sans-serif;
    --poseidon-navy: #012030;
    --poseidon-blue: #13678A;
    --poseidon-teal: #45C4B0;
    --poseidon-seafoam: #9AEBA3;
    --poseidon-light-green: #DAFDBA;
    --poseidon-dark-teal: #0A4C63;
    --poseidon-aqua: #62D9C7;
  }
}
@layer base {
  body {
    font-family: var(--font-body);
    background-color: var(--poseidon-navy);
    color: var(--poseidon-light-green);
    padding: 1rem;
  }
  h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--poseidon-seafoam);
    text-align: center;
    margin-top: 1rem;
    text-transform: uppercase;
  }
  p {
    color: var(--poseidon-light-green);
    text-align: center;
  }
}
@layer components {
  .nav-header {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .nav-links a {
    color: var(--poseidon-light-green);
    text-decoration: none;
    margin: 0 1rem;
    font-weight: 500;
    transition: color 0.2s, transform 0.25s;
  }
  .nav-links a:hover {
    color: var(--poseidon-teal);
    transform: translateY(-2px);
  }
  .nav-links a.active {
    color: var(--poseidon-aqua);
    font-weight: 700;
    border-bottom: 2px solid var(--poseidon-teal);
    padding-bottom: 0.2rem;
  }
  .page-title {
    color: var(--poseidon-seafoam);
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
    gap: 1.5rem;
    margin: 0 auto;
    padding: 1rem;
  }
  .level-card {
    font-family: var(--font-body);
    background-color: var(--poseidon-blue);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.2s;
  }
  .level-card:hover {
    background-color: var(--poseidon-teal);
    transform: translateY(-5px);
  }
  .level-card h3 {
    color: var(--poseidon-light-green);
    margin-bottom: 0.5rem;
  }
  .level-card p {
    color: var(--poseidon-light-green);
    font-size: 0.9rem;
  }
  .level-card button {
    background-color: var(--poseidon-seafoam);
    color: var(--poseidon-navy);
    margin-top: 0.75rem;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: var(--font-heading);
    box-shadow: 0 4px 0 var(--poseidon-light-green);
  }
  .level-card button:hover {
    background-color: var(--poseidon-light-green);
  }
  #builder-title {
    text-align: center;
  }
  button {
    font-family: var(--font-heading);
    background-color: var(--poseidon-teal);
    color: var(--poseidon-navy);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  button:hover {
    background-color: var(--poseidon-seafoam);
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .community-levels, .board {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .GUI {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  .bg-main {
    background-color: var(--poseidon-navy);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-outline-style: solid;
    }
  }
}