.bgimg {
  background-color:#9abef2;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-image:url("asstest/poster.jpeg");
  min-height:100%;
}

.w3-button.nav-button {
  background-color:rgba(128,128,128,0.55);
  color:white;
  transition:background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.w3-button.nav-button:hover {
  background-color:rgba(128,128,128,0.75);
  color:white;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.w3-button.nav-button:active {
  transform:scale(0.96);
  box-shadow:none;
}

html {
  scroll-behavior:smooth;
}

.nav-surface {
  background-color:#6386b8;
}

.page-content {
  background-color:#6386b8;
  color:white;
}

.site-tag {
  display:inline-block;
  padding:2px 8px;
  background-color:rgba(30,55,85,0.65);
  color:white;
}

.header-credit {
  color:white;
}

.info-panel {
  background-color:#dce7f7;
  color:#222;
}

.footer-surface {
  position:relative;
  background-color:#45668f;
  color:white;
  text-align:right;
  padding-right:64px;
}

.footer-surface p {
  margin:8px 0;
}

.instagram-link {
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin-left:20%;
  margin-right:auto;
  text-align:left;
}

.footer-feedback {
  position:absolute;
  top:24px;
  right:64px;
  margin:0;
}

.instagram-link img {
  width:24px;
  height:24px;
  object-fit:contain;
}

.tablink {
  color:white;
  cursor:pointer;
  padding:8px 16px;
}

.tablink:hover,
.tablink.active-tab {
  background-color:#45668f;
  color:white;
}




.member-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.sponsor-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  animation:table-appear 500ms ease-out both;
}

.sponsor-table th,
.sponsor-table td {
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.25);
}

.sponsor-table th {
  background-color:#45668f;
  color:white;
}

.sponsor-table tbody tr:nth-child(even) {
  background-color:rgba(255,255,255,0.08);
}

#membri .member-card {
  animation:table-appear 500ms ease-out both;
}

@keyframes table-appear {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.member-card {
  padding:16px;
  background-color:rgb(123, 173, 238);
  color:#222;
}

.location-content {
  width:100%;
}

.location-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:24px;
}

.location-layout iframe {
  width:100%;
}

@media (max-width: 600px) {
  .location-layout {
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px) {
  .bgimg {
    min-height:75vh;
    min-height:75svh;
    background-attachment:scroll;
    background-size:contain;
  }

  .nav-surface {
    flex-wrap:wrap;
    gap:4px;
    padding:4px !important;
  }

  .nav-surface .nav-button {
    box-sizing:border-box;
    flex:1 1 calc(50% - 4px) !important;
    min-width:0;
    padding:8px 4px;
    font-size:12px;
    line-height:1.3;
  }

  html {
    scroll-padding-top:88px;
  }

  .w3-padding-48 {
    padding-top:24px !important;
    padding-bottom:24px !important;
  }

  .w3-content,
  .w3-auto {
    max-width:100%;
  }

  .member-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .member-card {
    min-width:0;
    padding:12px;
    overflow-wrap:anywhere;
  }

  .w3-flex.w3-card.w3-padding {
    flex-wrap:wrap;
    padding:8px !important;
  }

  .w3-flex.w3-card.w3-padding .tablink {
    box-sizing:border-box;
    flex:1 1 30% !important;
    min-width:0;
    padding:8px 4px;
    font-size:14px;
    line-height:1.3;
  }

  .sponsor-table th,
  .sponsor-table td {
    padding:8px;
    overflow-wrap:anywhere;
  }

  .location-layout iframe {
    height:clamp(240px, 70vw, 380px);
  }

  .footer-surface {
    padding:12px 16px;
    text-align:left;
  }

  .instagram-link {
    margin-left:0;
  }

  .footer-feedback {
    position:static;
    width:fit-content;
    margin:8px 0 8px auto;
    text-align:right;
  }

  #app {
    width:calc(100% - 24px);
    margin:20px auto;
  }

  #app .member-card {
    padding:16px;
  }
}

@media (max-width: 420px) {
  .member-grid {
    grid-template-columns:1fr;
  }

  .w3-flex.w3-card.w3-padding .tablink {
    flex-basis:100% !important;
  }

  #app .registration-controls {
    gap:8px;
  }

  #app .registration-controls button {
    padding:10px 12px;
  }
}





#app {
  max-width:700px;
  margin:32px auto;
}

#app .registration-step {
  scroll-margin-top:80px;
}

#app .registration-controls {
  display:flex;
  justify-content:space-between;
  margin-top:16px;
}

#app .member-card {
  background-color:#6386b8;
  color:rgb(255, 255, 255);
}

#app .registration-card {
  border-radius:12px;
  box-shadow:0 6px 20px rgba(20,50,90,0.16);
  transition:box-shadow 180ms ease, transform 180ms ease;
}

#app .registration-card:hover {
  box-shadow:0 10px 26px rgba(20,50,90,0.22);
  transform:translateY(-2px);
}

#app .registration-form > p {
  margin:18px 0;
}

#app .registration-form > p > label {
  display:block;
  font-weight:600;
}

#app input[type="text"],
#app input[type="email"] {
  box-sizing:border-box;
  width:100%;
  padding:12px;
  border:1px solid #1e4b86;
  border-radius:6px;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}

#app input[type="text"]:focus,
#app input[type="email"]:focus {
  border-color:#3978c5;
  box-shadow:0 0 0 3px rgba(57,120,197,0.2);
  outline:none;
}

#app input[type="checkbox"],
#app input[type="radio"] {
  accent-color:#3978c5;
}

#app fieldset {
  margin:16px 0;
  padding:14px;
  border:1px solid #739cd6;
  border-radius:8px;
  transition:border-color 160ms ease, background-color 160ms ease;
}

#app fieldset:focus-within {
  border-color:#3978c5;
  background-color:#5c75a1;
}

#app .registration-option {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:6px;
  cursor:pointer;
  transition:background-color 140ms ease, color 140ms ease;
}

#app .registration-option:hover {
  background-color:#a3bfe4;
}

#app .registration-option.is-selected {
  background-color:#90b3e4;
  color:#174b85;
}

#app button {
  padding:10px 16px;
  border:0;
  border-radius:6px;
  background-color:#3978c5;
  color:rgb(255, 255, 255);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:background-color 160ms ease, transform 160ms ease;
}

#app button:hover {
  background-color:#245a99;
  transform:translateY(-1px);
}

#app button:focus-visible {
  outline:3px solid rgba(57,120,197,0.35);
  outline-offset:3px;
}

#app .registration-result:not([hidden]) {
  margin-top:20px;
  padding:14px;
  border-left:4px solid #3978c5;
  border-radius:4px;
  background-color:#6e9bd4;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior:auto;
  }

  .w3-button.nav-button,
  #app .registration-card,
  #app input,
  #app fieldset,
  #app .registration-option,
  #app button {
    transition:none;
  }

  .sponsor-table,
  #membri .member-card {
    animation:none;
  }
}

html, body {
  height:100%;
  margin:0;
  font-family:"Poppins",sans-serif;
}

html {
  scroll-padding-top:88px;
}

[hidden] {
  display:none !important;
}

.w3-flex {
  display:flex;
}

button.tablink {
  flex:1;
  font:inherit;
  border:0;
  background:transparent;
}

button.tablink.active-tab,
button.tablink:hover {
  background-color:#45668f;
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:10;
  padding:12px;
  background:#45668f;
  color:#fff;
  transform:translateY(-200%);
}

.skip-link:focus {
  transform:translateY(0);
}

#app {
  font-size:15px;
}

#app input[type="file"] {
  max-width:100%;
}

.feedback-page #app > form {
  padding:24px;
  border-radius:12px;
  background-color:#9abef2;
  background-image:linear-gradient(rgba(99,134,184,0.78),rgba(99,134,184,0.78)),url("asstest/poster.jpeg");
  background-position:center,center;
  background-size:auto,contain;
  background-repeat:no-repeat,no-repeat;
  background-attachment:scroll,fixed;
}

.feedback-page #app input[type="email"],
.feedback-page #app input:not([type]),
.feedback-page #app textarea {
  background-color:rgba(255,255,255,0.75);
}

.feedback-page #app input[type="email"],
.feedback-page #app textarea {
  box-sizing:border-box;
  width:50%;
}

.feedback-page #app input[type="email"],
.feedback-page #app textarea {
  display:block;
}

.feedback-page #app textarea {
  resize:none;
}

@media (max-width:600px) {
  .feedback-page #app input[type="email"],
  .feedback-page #app textarea {
    width:100%;
  }
}

.page-navigation {
  padding:24px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}