/* BOILERPLATE -------------------------------------------------- */

  @font-face {
    font-family: "OpenSans";
    src: url(../fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf);
  }

  @font-face {
    font-family: "NotoSerifDisplay";
    src: url(../fonts/Noto_Serif_Display/NotoSerifDisplay-Italic-VariableFont_wdth\,wght.ttf);
    font-weight: 400;
  }

  @font-face {
    font-family: "NotoSansKR";
    src: url(../fonts/Noto_Sans_KR/NotoSansKR-VariableFont_wght.ttf);
  }

  @font-face {
    font-family: "NotoSansJP";
    src: url(../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf);
  }

/* BODY -------------------------------------------------- */

  /** CURSORS
    cursor: url("/cursors/win_mouse.cur"), auto;
    cursor: url("/cursors/win_help.cur"), help;
    cursor: url("/cursors/win_pointer.cur"), pointer;
    cursor: url("/cursors/win_notallowed.cur"), not-allowed;

  **/

  body {
    background-color: #008080;
    cursor: url("/cursors/win_mouse.cur"), auto;
    font: 14px "OpenSans";
    min-height: 100vh;
    margin: 0;
  }

  body p, a {
    font-family: "Times New Roman", Times, serif;
  }

  a {
    cursor: url("/cursors/win_pointer.cur"), pointer;
    color: #000000;
  }

  ul, hr {
    margin: 0;
    padding: 0;
  }

  .degauss {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: -1;

    animation: degauss 0.75s;
  }

  @keyframes degauss {
    0% {
      background-color: #000000;
      z-index: 999;
    }
    100% {
      background-color: transparent;
      z-index: -1;
    }
  }

/* BACKGROUND -------------------------------------------------- */
  /* Washed out teal: #80A0A0 */

  .background_dark {
    background-color: #0d2626;

    animation: background_fadein 4s;
  }

  @keyframes background_fadein {
    0%, 20% {background-color: #008080;}
    100% {background-color: #0d2626;}
  }

/* HEADER TEXT -------------------------------------------------- */

  .title {
    background-image: linear-gradient(#008080, transparent 90%);
    color: transparent;
    background-clip: text;
    font-size: 4rem;
    font-weight: bold;
    text-indent: -10px;
    letter-spacing: -10px;
    box-sizing: border-box;
    margin: -1rem;
    user-select: none;
  }

  .subtext {
    background-image: linear-gradient(#008080, transparent 90%);
    color: #008080;
    background-clip: text;
    font-size: 1rem;
    text-indent: 22px;
    letter-spacing: 40px;
    margin: 0.25rem 0 -1rem 0;
    user-select: none;
  }

  .subtitle {
    font-family: "NotoSerifDisplay";
    background-image: linear-gradient(transparent, #2c2c2c 60%);
    color: transparent;
    background-clip: text;
    font-size: 3rem;
    font-weight: normal;
    text-indent: -4px;
    letter-spacing: 3px;
    box-sizing: border-box;
    margin: 0 0 -1rem 0;
    user-select: none;
  }

  /* WAVE TEXT -------------------------------------------------- */

  .wave-text-kr span, .wave-text-jp span {
      display: inline-block;
      animation: wave 4s ease-in-out infinite;
      text-shadow: 1px 1px rgba(256, 192, 202, 0.5);
  }

  .wave-text-kr {
    font-family: "NotoSansKR";
  }

  .wave-text-jp {
    font-family: "NotoSansJP";
  }

  .wave-text-kr span:nth-child(1) {
      animation-delay: 0s;
  }
  .wave-text-kr span:nth-child(2) {
      animation-delay: 0.5s;
  }
  .wave-text-kr span:nth-child(3) {
      animation-delay: 1s;
  }
  .wave-text-jp span:nth-child(1) {
      animation-delay: 0.25s;
  }
  .wave-text-jp span:nth-child(2) {
      animation-delay: 0.75s;
  }

  @keyframes wave {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-4px);
      }
  }

/* INDEX -------------------------------------------------- */

  .index {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3rem 0rem 0rem 0rem;
    width: 90vw;
    max-width: 40rem;
    z-index: 10;
    transition-duration: 300ms;
  }

  .index_full {
    text-align: center;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    margin: 1rem 0 1rem 0;
    padding: 3rem 0rem 0rem 0rem;
    width: 90vw;
    max-width: 80rem;
    transition-duration: 300ms;
  }

  .index_image {
    position: absolute;
    width: 10rem;
    opacity: 0.1;
    top: 5.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    user-select: none;
  }

  .navigation {
    text-align: center;
  }
  
  .navigation li {
    display: inline-block;
  }

/* WINDOW -------------------------------------------------- */

  .window {
    background-color: #C3C3C3;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #000000;
    border-top: 2px solid #FFFFFF;
    border-bottom: 2px solid #000000;
  }

  .windown {
    border-left: 2px solid #333333;
    border-right: 2px solid #DFDFDF;
    border-top: 2px solid #333333;
    border-bottom: 2px solid #DFDFDF;
  }

  .window_dark {
    background-color: #B3B3B3;
    border-left: 2px solid #DFDFDF;
    border-right: 2px solid #000000;
    border-top: 2px solid #DFDFDF;
    border-bottom: 2px solid #000000;

    animation: window_dark_fadein 4s;
  }

  .windown_dark {
    border-left: 2px solid #000000;
    border-right: 2px solid #C0C0C0;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #C0C0C0;

    animation: windown_dark_fadein 4s;
  }

  @keyframes window_dark_fadein {
    0%, 40% {
      background-color: #C3C3C3;
      border-left: 2px solid #FFFFFF;
      border-top: 2px solid #FFFFFF;
    }
    100% {
      background-color: #B3B3B3;
      border-left: 2px solid #DFDFDF;
      border-top: 2px solid #DFDFDF;
    }
  }

  @keyframes windown_dark_fadein {
    0%, 40% {
      border-right: 2px solid #DFDFDF;
      border-bottom: 2px solid #DFDFDF;
    }
    100% {
      border-right: 2px solid #BFBFBF;
      border-bottom: 2px solid #BFBFBF;
    }
  }

/* TOPBAR -------------------------------------------------- */

  .topbar {
    position: absolute;
    top: 4.5%;
    left: 50%;
    transform: translate( -50%, -50%);
    background-image: linear-gradient(to right, #2300c0, #00b7ff 98%) !important;
    width: 99.6%;
    height: 2rem;
    z-index: -1;
  }

  .topbar p {
    text-align: left;
    font-size: 1.5rem;
    font-style: italic;
    color: #FFFFFF;
    margin: 0.2rem 0 0 0.2rem;
  }

/* BUTTON -------------------------------------------------- */

  .button {
    display: inline-block;
    text-decoration: none;
    width: 3rem;
    margin: 1rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    background-color: transparent;
    transition-duration: 300ms;
  }

  .button:hover {
    cursor: url("/cursors/win_help.cur"), help;
    background-color: #B3B3B3;
    border-left: 2px solid #000000;
    border-right: 2px solid #DFDFDF;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #DFDFDF;
    transition-duration: 300ms;
  }

/* INPUT -------------------------------------------------- */

  input {
    cursor: text;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    background-color: #FFFFFF;

    box-sizing: border-box;
    min-width: 10rem;
    max-width: 90%;
    margin: 1rem 0 1rem 0;
    padding: 2px 2rem 2px 4px;
    field-sizing: content;
    appearance: none;
    -webkit-appearance: none;
  }

  input:disabled {
    cursor: url("/cursors/win_notallowed.cur"), not-allowed;
    color: #333333;
    background-color: #C3C3C3;
  }

  input:focus, focus-visible {
    outline: none;
  }

/* ALBUM -------------------------------------------------- */

  .album {
    margin: 0.5rem 0 0 0;
    padding: 0;
  }

  .album_element {
    display: inline-block;
    list-style-type: none;
    margin: 0.5rem;
    padding: 0;
  }

  .album_image {
    width: 20em;
    box-sizing: border-box;
    transition-duration: 300ms;
  }

  .album_text {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 5vw 0 5vw;
    padding: 1rem;
    text-align: justify;
  }

/* SCREEN SIZING -------------------------------------------------- */

  @media only screen and (max-width: 660px) {
    .index {
      top: 0%;
      left: 50%;
      transform: translate(-50%, 0%);
      margin: 1rem 0 1rem 0;
      transition-duration: 300ms;
    }

    .album_image {
      width: 90%;
      transition-duration: 300ms;
    }

    .album_text {
      width: 90%;
      margin: 0 0 0 0;
    }
  }

/* WEBKIT -------------------------------------------------- */

  input, textarea, button, select, a {
    -webkit-tap-highlight-color: transparent;
  }