*,
*::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 {
  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:#002;
  --text-2:#acf;
  --text-3:#fff;
  --accent:#8ae;
  --border:#258;
}


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



p {
  width: min(65ch, 100%);
  text-wrap:pretty;
  font-size:1.2rem;
  line-height:2rem;
  letter-spacing:.25px;
  text-align:left;
  color:#002;
  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%; }



#network {
  display:grid; place-items:center;
  background:url(/media/network.jpg);
  background-attachment:fixed;
  background-size:cover;
  width:100%;
  height:max(400px, 40vh);
  color:#fff;
  border-radius:100vw; 
  box-shadow:inset 0 0 50px 10px #057;

  h2 {
    font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    text-align:center;
    color:#fff;
    font-size:40px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:2px 2px 5px rgba(0,0,10,1);
    text-transform:uppercase;
  }
}



main {
  background-attachment:fixed; 
  backdrop-filter:invert(1) hue-rotate(150deg) saturate(.25);

  display:grid;
  position:relative;
  gap:4rem;

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

  padding:2rem;
  padding-bottom:30vh;

  grid-auto-columns:1fr;

  border-radius:0 0 0 1rem;

  .card {
    display:grid;
    background:rgb(180,190,200,.75);
    box-shadow:5px 5px 50px rgba(0,0,40,.25);
    place-items:center;
    padding:1rem;
    border-radius:.25rem;
    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;
      display:inline-block;
      font-size:1.5rem;
      line-height:1.5;
      text-transform:uppercase;
      color:#046;
      background:#fff;
      font-weight:bold;
      text-shadow:1px 1px 3px rgba(0,0,60,.35);
      opacity:0;
      transform:translateY(-25px);
      transition:opacity 1s, transform 1s;
      padding:1rem;
      margin-left:-1rem;
      border-radius:0 .5rem .5rem 0;
      box-shadow:1px 1px 15px rgba(0,0,40,.25);
    }

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

    a {
      color:#046;
      font-weight:bold;
      text-decoration:underline;
      text-decoration-color:#068;
      text-decoration-thickness:1px;
      text-underline-offset:10px;

      &:hover { color:#30c; }
    }

  }



}



.icon {
  color:#002;
  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.25rem;
    letter-spacing:1px;
    color:var(--text-3);
    margin:1rem auto;
    background:#035;
    padding:.5em 1em;
    border-radius:.25rem;
  }

  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;
    text-shadow:2px 2px 8px rgba(0,0,60,.25);
  }

  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:bold;
    font-size:.8rem;
    letter-spacing:1px;
  }

  img {
    width:280px;
    margin:1rem 0;
    border-radius:4px;
  }

  div {
    display:block;
    position:relative;
    background:rgb(180,190,200,.75);
    padding:3rem;
    border-radius:.25rem;
    box-shadow:5px 5px 50px rgba(0,0,40,.25);
    position:sticky;
    top:0;
  }

}






footer {
  color:#fff;
  display:flex;
  width:100%;
  height:5rem;
  left:0;
  bottom:0;
  padding:4rem 1rem;
  font-size:.65rem;
  justify-content:space-between;
  align-items:center;
  z-index:50;

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

  .icon { color:#e0e8ff; vertical-align:middle; }

}












nav {
  display:grid;
  place-items:center;
  position:fixed;
  inset:0; 
  width:250px; 
  z-index:100
}


nav ul {
  list-style:none;

  width:100%;
  padding:0;

  display:flex;
  flex-direction:column;
  gap:1rem;

  text-align:center;

}


nav li {
  display:block;
}



nav a {
  display:block;
  position:relative;
  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::after {
  content:'';
  position:absolute;
  left:10px; top:0; right:0; bottom:0;
  backdrop-filter:invert(1) hue-rotate(150deg) saturate(.25);
  opacity:0;
  transition:all 1250ms;
  border-radius:100vw 0 0 100vw;
}


nav a:hover::after {
  opacity:1;
  transition:all 250ms;
}


button#open-sidebar-button, button#close-sidebar-button {
  font-size:30px;
  line-height:1;
  background:#046;
  color:#fff;
  border:none;
  border-radius:8px 0 0 0;
  padding:.5rem;
  right:0;
  bottom:0;
  cursor:pointer;
  display:none;
  z-index:100;
}


button#close-sidebar-button { border-radius: 0 8px 8px 0; }




#overlay {
    position:fixed;
    inset:0;
    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) {

  #network { 
    background-attachment:initial;
}
  main {
    gap:4rem;
    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:32px; }
    h2 { font-size:16px; }
    h4 { font-size:11px; }

    img { width:100%; }

  }


  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;
  }

  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;
  }

  footer { .icon { display:none; } }

}