/*------------------------------------------------------------------------------
  fonts
------------------------------------------------------------------------------*/
@font-face { font-family: 'Waterfall';    font-display: block; src: url('font/W.woff2')    format('woff2'); }
@font-face { font-family: 'Alegreya';      font-display: swap; src: url('font/A.woff2')    format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-display: swap; src: url('font/AS.woff2')   format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Alegreya Sans'; font-display: swap; src: url('font/ASi.woff2')  format('woff2'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Alegreya Sans'; font-display: swap; src: url('font/ASb.woff2')  format('woff2'); font-weight: bold;   font-style: normal; }
@font-face { font-family: 'Alegreya Sans'; font-display: swap; src: url('font/ASbi.woff2') format('woff2'); font-weight: bold;   font-style: italic; }
html {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #666;
}
h1, h2, h3, h4, #head {
  font-family: 'Alegreya', serif;
  font-weight: normal;
  margin: 0;
}
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
h4 { font-size: 100%;
  font-family: inherit;
  font-style: italic;
}
.note {
  font-style: italic;
}
/*------------------------------------------------------------------------------
  links & inputs
------------------------------------------------------------------------------*/
input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: #7983;
}
input:hover, a:hover, .arrow:hover {
  opacity: 50%;
}
input:focus {
  opacity: 100%;
}
a {
  text-decoration: none;
  color: #69c;
}
* { transition: all .2s ease; }
/*------------------------------------------------------------------------------
  layout
------------------------------------------------------------------------------*/
body {
  margin: 0;
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
#body {
  max-width: 36rem;
  margin: auto;
}
p {
  margin: .5rem;
}
.sec  {
  margin: 2rem 0;
}
.banner {
  max-width: 100%;
  max-height: 80vh;
}
/*------------------------------------------------------------------------------
  loader
------------------------------------------------------------------------------*/
#loader,#waiter {
  margin: 3rem auto;
  width:  .5rem;
  height: .5rem;
  border-radius: 50%;
  animation: loader 2s linear infinite;
}
@keyframes loader {
0%,100% { background: #7983; box-shadow: -2rem 0 #798f, -1rem 0 #7983, +1rem 0 #7983, +2rem 0 #7983; }
    20% { background: #7983; box-shadow: -2rem 0 #7983, -1rem 0 #798f, +1rem 0 #7983, +2rem 0 #7983; }
    40% { background: #798f; box-shadow: -2rem 0 #7983, -1rem 0 #7983, +1rem 0 #7983, +2rem 0 #7983; }
    60% { background: #7983; box-shadow: -2rem 0 #7983, -1rem 0 #7983, +1rem 0 #798f, +2rem 0 #7983; }
    80% { background: #7983; box-shadow: -2rem 0 #7983, -1rem 0 #7983, +1rem 0 #7983, +2rem 0 #798f; }
}

/*------------------------------------------------------------------------------
  head & foot
------------------------------------------------------------------------------*/
#head, #foot {
  color: #798;
}
#names {
  font-family: 'Waterfall', serif;
  font-size: 300%;
}
#nav {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: .5rem 1rem;
  margin: 1rem 0;
}
#nav a {
  font-size: 120%;
  color: #798;
}
#foot img {
  height: 4rem;
  margin: 1rem;
}
/*------------------------------------------------------------------------------
  details
------------------------------------------------------------------------------*/
#timeline {
  margin-top: 1rem;
}
#timeline .event {
  display: flex;
  justify-content: center;
  align-items: center;
}
#timeline .event .time  { width:  8rem; right: 0; text-align: right; font-size: 120%; }
#timeline .event .title { width: 16rem; left: 0;  text-align: left; }
#timeline .event .icon  { width:  3rem; margin: .25rem .75rem; }
/*------------------------------------------------------------------------------
  party
------------------------------------------------------------------------------*/
#party {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#party .member {
  flex: 50%;
  margin-top: 1rem;
}
#party .member img {
  width: 8rem;
  clip-path: circle(50%);
}
#party p {
  padding: 0 1rem;
}
/*------------------------------------------------------------------------------
  gallery
------------------------------------------------------------------------------*/
#gallery {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: .5rem;
}
#gallery img {
  flex: 1;
  object-fit: cover;
  max-height: 30vh;
  max-width: 100%;
}
#gallery img:hover {
  cursor: pointer;
  opacity: 50%;
}
#modal {
  z-index: 1;
  background: #0009;
  position: fixed;
  top:  0; height: 100%;
  left: 0; width:  100%;
}
#overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#lightbox {
  max-height: 90vh;
  max-width: 100vw;
  box-shadow: 0 0 3rem #000;
}
#caption {
  padding: .5rem;
  color: #fff;
}
.arrow {
  position: absolute;
  padding: .5rem;
  width: 1.5rem;
}
.arrow:hover {
  cursor: pointer;
}
#left  { left:  0; }
#right { right: 0; }
/*------------------------------------------------------------------------------
  rsvp
------------------------------------------------------------------------------*/
#form {
  display: grid;
  padding: 0 1rem;
  gap: .5rem;
}
#form label { grid-column: 1; text-align: right; }
#form input { grid-column: 2; }
#form .opts { grid-column: 2; text-align: left; }
#form .note { grid-column: 3; text-align: left; }
input[type=submit] {
  background: #798;
  color: #fff;
  padding: .25rem;
  min-width: 8rem;
}
input[type=submit]:hover {
  cursor: pointer;
}
input[type=submit]:active {
  transform: scale(0.95);
}
.submitted {
  opacity: 25%;
}
/*------------------------------------------------------------------------------
  mobile
------------------------------------------------------------------------------*/
@media (max-width: 600px) or (max-height: 600px) {
  html { font-size: 1.2rem; }
  #nav { flex-direction: column; }
  #timeline .event .time  { width: 4rem; }
  #party { flex-direction: column; }
  #gallery img { max-height: 50vh; }
  #form .note { grid-column: 2; }
}