:root {
  --dark-50: #616161;
  --dark-100: #5e5e5e;
  --dark-200: #595959;
  --dark-300: #545454;
  --dark-400: #4f4f4f;
  --dark-500: #4a4a4a;
  --dark-600: #454545;
  --dark-700: #404040;
  --dark-800: #3b3b3b;
  --dark-900: #363636;
  --dark-950: #333333;
  --light-50: #fcfcfc;
  --light-100: #f7f7f7;
  --light-200: #ededed;
  --light-300: #e3e3e3;
  --light-400: #d8d8d8;
  --light-500: #cecece;
  --light-600: #c4c4c4;
  --light-700: #bababa;
  --light-800: #b0b0b0;
  --light-900: #a5a5a5;
  --light-950: #a0a0a0;
  --blue-50: #34beed;
  --blue-100: #2dbcec;
  --blue-200: #1fb7eb;
  --blue-300: #14b1e6;
  --blue-400: #13a6d8;
  --blue-500: #129bca;
  --blue-600: #1191bc;
  --blue-700: #0f86ae;
  --blue-800: #0e7ba0;
  --blue-900: #0d7092;
  --blue-950: #0c6b8b;
}

.turbo-progress-bar {
  background: var(--blue-50);
}

html {
  font-size: 17px;
  background: var(--light-50);
  color: var(--dark-950);
  font-family:
    'PT Sans',
    -apple-system,
    'Helvetica Neue',
    'Segoe UI',
    'Roboto',
    Arial,
    'nc3Jp',
    sans-serif !important;
}

body {
  position: relative;
  z-index: 1;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: url("/assets/bg-a9b93f65.svg") no-repeat center / cover;
  z-index: -1;
  opacity: 0.25;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1;
  padding-block: 2rem;
}

h1,
h2,
h3,
dt,
dd,
li,
input,
textarea,
a,
p,
blockquote,
th,
td,
figcaption {
  word-wrap: break-word;
  word-break: break-all;
}

h1,
h2,
h3 {
  font-weight: bold;
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.125rem;
}

img {
  display: block;
  height: auto;
}

input[type='submit'],
button,
a {
  cursor: pointer;
  transition: opacity 0.2s;
}

input[type='submit']:hover,
button:hover,
a:hover {
  opacity: 0.8;
}

input[type='submit']:disabled {
  pointer-events: none;
  opacity: 0.6;
}

select {
  all: revert;
}

.container {
  width: 100%;
  max-width: 744px;
  padding-inline: 1rem;
  margin-inline: auto;
}

.button {
  background: var(--dark-950);
  color: var(--light-50);
  padding: 0.5rem 1rem;
  border-radius: 50vh;
  box-shadow: 0 0.2rem 0.2rem -0.1rem rgb(0 0 0 / 0.4);
}

@keyframes flash {
  0% {
    translate: -50% 200%;
  }
  3% {
    translate: -50% 0;
  }
  50% {
    translate: -50% 0;
  }
  97% {
    translate: -50% 0;
  }
  100% {
    translate: -50% 200%;
  }
}
.flash {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  translate: -50%;
  padding: 0.5rem 1rem;
  background: var(--light-50);
  border: 1px solid var(--dark-950);
  border-radius: 0.25rem;
  box-shadow: 0 0.2rem 0.4rem -0.1rem rgb(0 0 0 / 0.4);
  animation: flash 5s ease-out forwards;
}

.flash button {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

@media (min-width: 744px) {
  .container {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1536px;
  }
}