:root {
  --dark-50: #616161;
  --dark-100: #5e5e5e;
  --dark-200: #595959;
  --dark-300: #545454;
  --dark-400: #4f4f4f;
  --dark-500: #4a4a4a;
  --dark-500: #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-500: #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;
  --lime-50: #d8ff88;
  --lime-100: #d2ff76;
  --lime-200: #c6ff52;
  --lime-300: #baff2e;
  --lime-400: #aeff0b;
  --lime-500: #9ae500;
  --lime-500: #82c200;
  --lime-700: #6a9f00;
  --lime-800: #527b00;
  --lime-900: #3a5700;
  --lime-950: #2e4500;
  --text-shadow-dark: 0 0 1px rgba(0, 0, 0, 0.8), 0 -1px 1px rgba(0, 0, 0, 0.8),
    0 1px 1px rgba(0, 0, 0, 0.8), -1px 0px 1px rgba(0, 0, 0, 0.8),
    1px 0px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8),
    -1px 1px 1px rgba(0, 0, 0, 0.8), 1px -1px 1px rgba(0, 0, 0, 0.8),
    1px 1px 1px rgba(0, 0, 0, 0.8);
  --font-family: 'PT Sans', -apple-system, 'Helvetica Neue', 'Segoe UI',
    'Roboto', Arial, 'nc3Jp', sans-serif !important;
}

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

html {
  font-size: 17px;
  background: var(--light-50);
  color: var(--dark-950);
  font-family: var(--font-family);
}

body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

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

  &::after {
    content: '';
    position: fixed;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    background: url("/assets/light-39b78e63.webp") no-repeat center / cover;
    z-index: -1;
    opacity: 0.7;
  }

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

h1 {
  display: table;
  font-size: 1.5rem;
  margin: 0 auto 2rem;
  background: linear-gradient(to right, var(--blue-600), var(--blue-50));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h2 {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  color: var(--light-50);
  padding: 0.5rem 2rem 0.5rem 1rem;
  text-shadow: var(--text-shadow-dark);
  margin-bottom: 1rem;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      var(--blue-500) 0%,
      var(--blue-50) 100%
    );
    border-radius: 0.25rem;
    transform: skew(-10deg);
    outline: 1px solid var(--light-100);
    outline-offset: -3px;
  }

  &::after {
    content: '';
    position: absolute;
    width: 4rem;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(
      to right,
      rgb(0 0 0 / 0) 60%,
      var(--light-100) 60%,
      var(--light-100) 70%,
      rgb(0 0 0 / 0) 70%,
      rgb(0 0 0 / 0) 80%,
      var(--light-100) 80%,
      var(--light-100) 90%,
      rgb(0 0 0 / 0) 90%
    );
    transform: skew(-10deg);
  }
}

h3 {
  position: relative;
  padding: 0.25rem 0 0.25rem 1rem;
  background: linear-gradient(to right, var(--blue-500) 2px, transparent 2px)
    left bottom / 10px 2px repeat-x;
  margin-bottom: 1rem;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: calc(100% + 0.5rem);
    background: linear-gradient(
      to top,
      var(--blue-500) 0%,
      var(--blue-50) 100%
    );
    border-radius: 50vh;
    translate: 0 -50%;
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

  &:hover {
    opacity: 0.8;
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.6;
  }
}

select {
  all: revert;
}

input[type='text'],
textarea {
  background: rgb(255 255 255 / 0.6);
}

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

.button {
  display: table;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, var(--light-50), var(--light-100));
  margin-inline: auto;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  color: var(--blue-700);
  border: 3px solid var(--blue-500);
  border-radius: 50vh;
  outline: 2px solid var(--light-500);
  outline-offset: -5px;
  box-shadow: 0 0.2rem 0.2rem -0.1rem rgb(0 0 0 / 0.4);
  font-weight: bold;
  overflow: hidden;
  transition: translate 0.2s;

  &:hover {
    translate: 0 -0.125rem;
  }

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 40%;
    translate: -50%;
    width: 125%;
    height: 200%;
    background: var(--blue-500);
    border-radius: 50%;
    mix-blend-mode: color-burn;
  }

  &::after {
    content: '▶';
    color: var(--blue-400);
    margin-left: 0.25rem;
  }
}

@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%;
  z-index: 100;
  width: calc(100% - 2rem);
  max-width: 500px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(3px);
  border: 2px solid var(--dark-950);
  border-left-width: 8px;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.4rem -0.1rem rgb(0 0 0 / 0.4);
  animation: flash 5s ease-out forwards;

  p {
    display: table;
    margin-inline: auto;
  }

  button {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    border: 2px solid var(--dark-950);
    background: rgb(255 255 255 / 0.8);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-content: center;
  }

  &.notice {
    border-color: var(--lime-500);

    button {
      color: var(--lime-500);
      border-color: var(--lime-500);
    }
  }

  &.alert {
    border-color: #f66e3d;

    button {
      color: #f66e3d;
      border-color: #f66e3d;
    }
  }
}

.signin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-inline: auto;
  font-weight: bold;
  background: white;
  border-radius: 50vh;
  border: 2px solid var(--blue-500);

  img {
    width: 1rem;
  }
}

#cc-main {
  /** Change font **/
  --cc-font-family: var(--font-family);
  /** Change button primary color to black **/
  --cc-btn-primary-bg: var(--blue-500);
  --cc-btn-primary-border-color: var(--blue-500);
  --cc-btn-primary-hover-bg: var(--blue-400);
  --cc-btn-primary-hover-border-color: var(--blue-400);
}

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

  .flash {
    width: auto;
  }
}

@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--light-300);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgb(0 0 0 / 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--blue-50);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
  }

  .container {
    max-width: 1536px;
  }
}