*,
*::before,
*::after {
  box-sizing:border-box;
}

* {
  margin:0;
  padding:0;
  outline:0;
  border:0;
  font:inherit;
}



* {
    scrollbar-width: none;
    -webkit-scrollbar-width: none;
    word-wrap: break-word;
}


*::-webkit-scrollbar {
    display: none;
}



html {
  color-scheme:dark light;
  hanging-punctuation:first last;
}



body {
  min-height:100svh;
  font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-size:1.25rem;
  font-weight:normal;
}



img,
picture,
svg,
video {
  display:block;
  max-width:100%;
}


:root {
  interpolate-size:allow-keywords;
  --bgcolor-1:#104;
  --bgcolor-2:#401;
  --bgcolor-3:#034;
  --text-1:#fff;
  --text-2:#acf;
  --text-3:#5af;
  --accent:#8ae;
  --border:#258;
}


input,
button,
select,
textarea {
  font:inherit;
}



p {
  width: min(65ch, 100%);
  text-wrap:pretty;
  font-size:1rem;
  line-height:2rem;
  letter-spacing:.25px;
  text-align:left;
  color:#fff;
  margin:2rem auto;
  text-wrap:pretty;
  text-shadow:1px 1px 3px rgba(0,0,0,.25);
  transition:opacity 1250ms, transform 1250ms;
  opacity:0;
  transform:translateY(50px);
}

p.show {
  opacity:1;
  transform:translateX(0px);
}



.title {
  font-size:5rem;
}

.subtitle {
  font-size:3rem;
}



@media (prefers-reduced-motion:no-preference) {
  :has(:target) {
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
  }

}




.sitebg { display:grid; position:fixed; inset:0; overflow:clip; width:100vw; height:100vh; z-index:-1; }
.sitebgimg { display:grid; position:absolute; background:url(/media/xpr-bg-2024.jpg); width:100%; height:100%; background-size:cover; background-position:50% 50%; }





main {
  display:grid;
  position:relative;
  gap:2rem;

  width:calc(100% - 250px);
  left:250px;

  padding:2rem;
  padding-bottom:calc(50vh - 4rem);

  grid-auto-columns:1fr;

  .card {
    display:grid;
    background:rgba(0,0,10,.35);
    place-items:center;
    padding:1rem;
    border-radius:10px;
    width:100%;
    overflow-x:clip;
    min-height:calc(75vh - 2rem);

    >div {
      position:sticky;
      top:0;
      width:100%;
    }

    h2 {
      font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
      font-size:1.5rem;
      text-transform:uppercase;
      color:#5af;
      text-decoration:underline;
      text-decoration-color:#104;
      text-decoration-thickness:2px;
      text-underline-offset:10px;
      opacity:0;
      transform:translateX(-50px);
      transition:opacity 1000ms, transform 1000ms;
    }

    h2.show {
      opacity:1;
      transform:translateX(0px);
    }

  }


  .card:nth-child(2n) {
    background:url(/media/deepcosmos.jpg);
    background-size:cover;
    background-attachment:fixed;
    h3,h4,h5,h6,p { color:#fff; }
  }

}


#standout, #howwecanhelp {
  h3,h4,h5,h6,p { color:#fff; }
}



.icon {
  color:#fff;
  font-size:60px;
  line-height:60px;
  margin:0;
  text-align:center;
  vertical-align:bottom;
}

.small {
  font-size:30px;
}




.logo {
  position:relative;
  display:grid;
  place-items:center;
  min-height:calc(100vh - 4rem);
  width:100%;

  h2 {
    font-size:1.5rem;
    letter-spacing:1px;
    color:var(--text-3);
    margin:1rem auto;
  }

  h1 {
    font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    text-align:left;
    color:#fff;
    font-size:40px;
    font-weight:bold;
    text-decoration:none;
  }

  h4 {
    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    font-weight:normal;
    font-size:.8rem;
    letter-spacing:1px;
  }

  img {
    width:250px;
    margin:1rem 0;
    filter:drop-shadow(0px 0px 5px rgba(50,50,250,.0));
  }

  div {
    display:block;
    position:relative;
    background:rgba(0,0,10,.25);
    padding:3rem;
    border-radius:1rem;
    box-shadow:0px 0px 25px rgba(32,80,250,.25);
    position:sticky;
    top:0;
  }

}






footer {
  display:flex;
  width:100%;
  height:1.5rem;
  left:0;
  bottom:0;
  padding:1rem 2rem;
  background:rgba(0,0,0,.85);
  font-size:.65rem;
  justify-content:space-between;
  align-items:center;
  z-index:50;

  a { color:var(--text-3); font-size:inherit; }

}












nav {
  display:grid;
  place-items:center;
  position:fixed;
  inset:0; 
  width:250px; 
  box-shadow:1px 0px 25px rgba(32,80,250,.25);
  z-index:100
}


nav ul {
  list-style:none;

  width:100%;
  padding:10px;

  display:flex;
  flex-direction:column;
  gap:.5rem;

  text-align:center;

}


nav li {
  display:block;
}



nav a {
  display:block;
  padding:1em 2em;

  font-weight:bold;
  font-size:.75rem;
  background-color:transparent;
  color:var(--text-3);

  letter-spacing:1px;
  text-decoration:none;
  text-transform:uppercase;


  transition:background-color 1750ms, border 1750ms, color 1750ms;
}


nav a:hover {
  background:rgba(45,30,150,.85);
  color:var(--text-2);
  transition:background-color 750ms, border 750ms, color 750ms;
  text-align:right;
}


button#open-sidebar-button, button#close-sidebar-button {
  font-size:30px;
  background:none;
  border:none;
  padding:.5rem;
  right:0;
  bottom:0;
  cursor:pointer;
  display:none;
  z-index:100;
}






#overlay {
    position:fixed;
    inset:0;
    background:rgba(5,0,30,.5);
    z-index:5;
    display:none;
}














@media (prefers-reduced-motion:no-preference) {
  :has(:target) {
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
  }

}












@media screen and (max-width:800px) {

  main {
    gap:1rem;
    width:100%;
    left:auto;
    padding:1rem;

    .card {
      min-height:calc(100dvh - 2rem);
      background-size:cover;
      background-attachment:scroll;
      h2 { opacity:1; transform:none; }
    }

  }

  p { opacity:1; transform:none; }

  .logo {
    width:100%;

    h1 { font-size:24px; }
    h2 { font-size:16px; }
    h4 { font-size:11px; color:#fff; }

  }


  button#open-sidebar-button, button#close-sidebar-button {
    display:block;
  }

  button#open-sidebar-button {
    position:fixed;
  }

  nav {
    position:fixed;
    inset:auto;
    top:0;
    right:-100%;
    height:100vh;
    width:min(15em, 50%);
    border-left:1px solid #208;
    transition:right 300ms;
    box-shadow:-1px 0px 25px rgba(32,80,250,.5);
  }

  nav.show {
    right:0;
    backdrop-filter:blur(10px);
  }

  nav.show ~ #overlay {
    display:block;
  }

  nav ul {
    width:100%;
    flex-direction:column;
  }

  nav a {
    width:100%;
    padding-left:2.5em;
  }

  nav a.active-link {
    border-bottom:none;
  }

  nav .home-li {
    margin-right:unset;
  }

}