:root {
  /* Fonts */
  --font: 'Nikumaru';
  --font-latin: 'Gabarito';

  /* Colors */
  --color-gray: #dfdfdf;
  --color-white: #fafafa;
  --color-black: #1e1e1e;
  --color-red: #f55c42;


  /* ... */
  --cursor-size: 64px;

  --header-height: 5vh;
  --header-min-height: 40px;
  --footer-height: 5vh;
  --footer-min-height: 40px;

  --transition-duration: 0.22s;

  --moras-gap: 16px;
  --border-radius: 8px;
}

body {
  background-color: var(--color-gray);
  color: var(--color-black);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1;
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
}

/**
 * 
 * Cursor
 * 
 */

.cursor {
  display: none;
  transition: opacity var(--transition-duration) ease-in;
}

@media (min-width: 768px) {
  .cursor {
    position: absolute;
    position:fixed;
    z-index: 4000;
    top: calc(-1 * var(--cursor-size) / 2);
    left: calc(-1 * var(--cursor-size) / 2);
    width: var(--cursor-size);
    height: var(--cursor-size);
    border-radius: var(--cursor-size);
    pointer-events: none;
    backdrop-filter: invert(1) grayscale(1);
    opacity: 1;
    display: block;
    /*
      background-color: var(--color-red);
      mix-blend-mode: multiply;
    */
  }
  .cursor.hidden {
    opacity: 0;
  }
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
}

.welcome {
  display: grid;
  place-items: center;
  height: calc(100vh - 99px);
}

.welcome img {
  margin: 10vh 0;
}

.header {
  position: sticky;
  top: 0px;
  background-color: var(--color-gray);
  border-bottom: 1px solid var(--color-black);
  align-items: baseline;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index: 500;
}

.header h1 {
  font-size: 1rem;
}

.header--left {
  text-align: left;
  align-self: end;
}

.header--center {
  display: grid;
  place-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header--right {
  align-self: end;
  display: inline-flex;
  justify-content: right;
}

.header--right > span:first-child {
  margin-right: 10px;
}

.header--right > span:last-child {
  margin-left: 10px;
}

@media (max-width: 790px) {
  .header--right > span {
    display: none;
  }
}

.footer {
  height: 120px;
  border-top: 1px solid var(--color-black);
  width: 400px;
  position: absolute;
  right: 0;
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-gray);
}

.footer .logos{
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 8px;
}

.footer .logos span {
  font-family: var(--font-latin);
  font-size: 2rem;
}

main {
  margin-top: 100px;
  margin-bottom: 100px;
}

section.wrap {
  padding: 0 40px;
  margin-top: 240px;
}

/**
 * 
 * Group
 * 
 */

.group {
  text-align: center;
}

.group h2 {
  display: none;
}

.group .dots {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 60px;
}

.group .dots img {
  transition: all var(--transition-duration) ease-in-out;
  transform: scale(.6);
}

.group:has(.mora:nth-child(1):hover) .dots img:nth-child(1) {
  transform: scale(1);
}
.group:has(.mora:nth-child(1):hover) .dots img:not(:nth-child(1)) {
  filter: blur(4px) opacity(0.6);
  transform: scale(.4);
}
.group:has(.mora:nth-child(2):hover) .dots img:nth-child(2) {
  transform: scale(1);
}
.group:has(.mora:nth-child(2):hover) .dots img:not(:nth-child(2)) {
  filter: blur(4px) opacity(0.6);
  transform: scale(.4);
}
.group:has(.mora:nth-child(3):hover) .dots img:nth-child(3) {
  transform: scale(1);
}
.group:has(.mora:nth-child(3):hover) .dots img:not(:nth-child(3)) {
  filter: blur(4px) opacity(0.6);
  transform: scale(.4);
}
.group:has(.mora:nth-child(4):hover) .dots img:nth-child(4) {
  transform: scale(1);
}
.group:has(.mora:nth-child(4):hover) .dots img:not(:nth-child(4)) {
  filter: blur(4px) opacity(0.6);
  transform: scale(.4);
}
.group:has(.mora:nth-child(5):hover) .dots img:nth-child(5) {
  transform: scale(1);
}
.group:has(.mora:nth-child(5):hover) .dots img:not(:nth-child(5)) {
  filter: blur(4px) opacity(0.6);
  transform: scale(.4);
}

/**
 * 
 * Moras
 * 
 */

.moras {
  margin-bottom: calc(2 * var(--moras-gap));
}

.moras {
  display: grid;
  grid-template-rows: auto;
  gap: var(--moras-gap);
}

.moras--5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: 'mora-1 mora-2 mora-3 mora-4 mora-5';
}

.moras--3 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
  grid-template-areas: '. mora-1 mora-2 mora-3 .';
}

.moras--2 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: '. . . mora-1 mora-1 mora-2 mora-2 . . .';
}

.moras--1 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: '. . mora-1 . .';
}

@media screen and (max-width: 1024px) {
  .moras--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      'mora-1 mora-1 mora-2 mora-2 mora-3 mora-3'
      '. mora-4 mora-4 mora-5 mora-5 .';
  }
  .moras--3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'mora-1 mora-2 mora-3';
  }
  .moras--2 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: '. mora-1 mora-1 mora-2 mora-2 .';
  }
  .moras--1 {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: '. mora-1 .';
  }
}

@media screen and (max-width: 640px) {
  .moras--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      'mora-1 mora-1 mora-2 mora-2'
       'mora-3 mora-3  mora-4 mora-4'
      '. mora-5 mora-5 .';
  }
  .moras--3 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      'mora-1 mora-1 mora-2 mora-2'
      '. mora-3 mora-3 .';
  }
  .moras--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'mora-1 mora-2';
  }
  .moras--1 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: '. mora-1 mora-1 .';
  }
}

.moras .moras-item:nth-child(1) { grid-area: mora-1; }
.moras .moras-item:nth-child(2) { grid-area: mora-2; }
.moras .moras-item:nth-child(3) { grid-area: mora-3; }
.moras .moras-item:nth-child(4) { grid-area: mora-4; }
.moras .moras-item:nth-child(5) { grid-area: mora-5; }

/**
 * 
 * Mora
 * 
 */

.mora {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  transition: background-color var(--transition-duration) ease-in;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
}

.mora:hover {
  background-color: var(--color-red);
}

.mora-hiragana,
.mora-katakana {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity var(--transition-duration) ease-in-out;
}
.mora-hiragana {
  pointer-events: all;
}
.mora-katakana {
  opacity: 0;
  pointer-events: none;
}
.mora.show-katakana .mora-hiragana {
  opacity: 0;
  pointer-events: none;
}
.mora.show-katakana .mora-katakana {
  opacity: 1;
  pointer-events: all;
}

/* img */

.mora img {
  width: 100%;
  position: absolute;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center center;
  transition: filter var(--transition-duration) ease-in-out;
  filter: opacity(0.8);
}
.mora:hover img {
  filter: opacity(0.22) blur(5px);
}

/* svg */

.mora svg {
  opacity: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  /*
  width: 52%;
  height: 39%;
  */
  display: block;
  transform: translate(-50%, -50%);
  transition: all var(--transition-duration) ease-in-out;
}

#mora-a:not(:hover) .mora-hiragana svg { top: 30%; }
#mora-a:not(:hover) .mora-katakana svg { left: 43%; top: 29%; }
#mora-i:not(:hover) .mora-hiragana svg { left: 64%; }
#mora-i:not(:hover) .mora-katakana svg { left: 64%; top: 30%; }
#mora-u:not(:hover) .mora-hiragana svg { top: 52%; }
#mora-u:not(:hover) .mora-katakana svg { left: 60%; top: 66%; }
#mora-e:not(:hover) .mora-hiragana svg { left: 40%; top: 75%; }
#mora-e:not(:hover) .mora-katakana svg { top: 24%; }
#mora-o:not(:hover) .mora-hiragana svg { left: 36%; top: 45%; }
#mora-o:not(:hover) .mora-katakana svg { left: 69%; top: 38%; }

#mora-ka:not(:hover) .mora-hiragana svg { left: 29%; top: 59%; }
#mora-ka:not(:hover) .mora-katakana svg { left: 58%; top: 56%; }
#mora-ki:not(:hover) .mora-katakana svg { left: 37%; top: 30%; }
#mora-ku:not(:hover) .mora-hiragana svg { left: 26%; }
#mora-ku:not(:hover) .mora-katakana svg { top: 38%; }
#mora-ke:not(:hover) .mora-hiragana svg { top: 74%; }
#mora-ke:not(:hover) .mora-katakana svg { top: 24%; }
#mora-ko:not(:hover) .mora-hiragana svg { top: 30%; }
#mora-ko:not(:hover) .mora-katakana svg { left: 60%; top: 31%; }

#mora-sa:not(:hover) .mora-hiragana svg { left: 59%; top: 30%; }
#mora-sa:not(:hover) .mora-katakana svg { left: 44%; top: 31%; }
#mora-shi:not(:hover) .mora-hiragana svg { left: 35%; top: 72%; }
#mora-shi:not(:hover) .mora-katakana svg { left: 35%; top: 22%; }
#mora-su:not(:hover) .mora-hiragana svg { left: 33%; top: 26%; }
#mora-su:not(:hover) .mora-katakana svg { top: 27%; }
#mora-se:not(:hover) .mora-hiragana svg { left: 30%; top: 40%; }
#mora-se:not(:hover) .mora-katakana svg { left: 44%; top: 32%; }
#mora-so:not(:hover) .mora-hiragana svg { top: 64%; }
#mora-so:not(:hover) .mora-katakana svg { top: 75%; }

#mora-ta:not(:hover) .mora-hiragana svg { left: 40%; top: 71%; }
#mora-ta:not(:hover) .mora-katakana svg { top: 36%; }
#mora-chi:not(:hover) .mora-hiragana svg { left: 72%; top: 78%; }
#mora-chi:not(:hover) .mora-katakana svg { left: 60%; top: 36%; }
#mora-tsu:not(:hover) .mora-hiragana svg { top: 35%; }
#mora-tsu:not(:hover) .mora-katakana svg { left: 65%; top: 23%; }
#mora-te:not(:hover) .mora-hiragana svg { left: 30%; top: 47%; }
#mora-te:not(:hover) .mora-katakana svg { top: 43%; }
#mora-to:not(:hover) .mora-hiragana svg { left: 34%; top: 53%; }
#mora-to:not(:hover) .mora-katakana svg { left: 66%; }

#mora-na:not(:hover) .mora-hiragana svg { top: 77%; }
#mora-na:not(:hover) .mora-katakana svg { left: 44%; top: 40%; }
#mora-ni:not(:hover) .mora-hiragana svg { left: 35%; top: 45%; }
#mora-ni:not(:hover) .mora-katakana svg { top: 37%; }
#mora-nu:not(:hover) .mora-hiragana svg { top: 33%; }
#mora-nu:not(:hover) .mora-katakana svg { top: 28%; }
#mora-ne:not(:hover) .mora-hiragana svg { left: 57%; top: 31%; }
#mora-ne:not(:hover) .mora-katakana svg { left: 71%; top: 43%; }
#mora-no:not(:hover) .mora-katakana svg { top: 34%; }

#mora-ha:not(:hover) .mora-hiragana svg { top: 27%; }
#mora-ha:not(:hover) .mora-katakana svg { left: 56%; top: 27%; }
#mora-hi:not(:hover) .mora-hiragana svg { top: 28%; }
#mora-hi:not(:hover) .mora-katakana svg { top: 27%; }
#mora-fu:not(:hover) .mora-hiragana svg { left: 69%; top: 60%; }
#mora-fu:not(:hover) .mora-katakana svg { top: 63%; }
#mora-he:not(:hover) .mora-katakana svg { top: 37%; }
#mora-ho:not(:hover) .mora-hiragana svg { top: 35%; }
#mora-ho:not(:hover) .mora-katakana svg { left: 64%; top: 23%; }

#mora-ma:not(:hover) .mora-hiragana svg { top: 40%; }
#mora-ma:not(:hover) .mora-katakana svg { top: 28%; }
#mora-mi:not(:hover) .mora-hiragana svg { left: 43%; top: 26%; }
#mora-mi:not(:hover) .mora-katakana svg { top: 40%; }
#mora-mu:not(:hover) .mora-hiragana svg { left: 63%; top: 47%; }
#mora-mu:not(:hover) .mora-katakana svg { top: 27%; }
#mora-me:not(:hover) .mora-hiragana svg { top: 31%; }
#mora-me:not(:hover) .mora-katakana svg { left: 59%;top: 77%; }
#mora-mo:not(:hover) .mora-hiragana svg { top: 59%; }
#mora-mo:not(:hover) .mora-katakana svg { left: 69%;top: 55%; }

#mora-ya:not(:hover) .mora-hiragana svg { top: 31%; }
#mora-ya:not(:hover) .mora-katakana svg { left: 42%; top: 33%; }
#mora-yu:not(:hover) .mora-hiragana svg { left: 66%; top: 27%; }
#mora-yu:not(:hover) .mora-katakana svg { top: 30%; }
#mora-yo:not(:hover) .mora-hiragana svg { left: 30%; top: 77%; }
#mora-yo:not(:hover) .mora-katakana svg { left: 61%; top: 22%; }

#mora-ra:not(:hover) .mora-hiragana svg { left: 30%; top: 63%; }
#mora-ra:not(:hover) .mora-katakana svg { top: 37%; }
#mora-ri:not(:hover) .mora-hiragana svg { left: 30%; top: 75%; }
#mora-ri:not(:hover) .mora-katakana svg { left: 65%; top: 69%; }
#mora-ru:not(:hover) .mora-hiragana svg { left: 39%; top: 55%; }
#mora-ru:not(:hover) .mora-katakana svg { top: 40%; }
#mora-re:not(:hover) .mora-katakana svg { left: 45%; top: 30%; }
#mora-ro:not(:hover) .mora-hiragana svg { top: 26%; }
#mora-ro:not(:hover) .mora-katakana svg { left: 28%; }

#mora-wa:not(:hover) .mora-hiragana svg { left: 66%; top: 28%; }
#mora-wa:not(:hover) .mora-katakana svg { left: 75% }
#mora-wo:not(:hover) .mora-hiragana svg { top: 28%; }

.mora path {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 90;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 0;
  stroke-opacity: 1;
  stroke-dasharray: none;
  transition: stroke 0.22s;
}

.mora:hover path {
  stroke: var(--color-black);
}
.mora .anime path {
  stroke-width: 98;
  stroke-opacity: 1;
  stroke-dasharray: 10000;
  stroke-dashoffset: 10000;
}
.mora:hover .anime path {
  stroke: var(--color-white);
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


.mora .label {
  position: absolute;
  text-transform: uppercase;
  left: 0;
  right: 0;
  height: 20%;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--transition-duration) ease-in;
}

.mora:hover .label {
  opacity: 1;

}

.mora .label--name {
  font-size: clamp(2rem, -1.55rem + 5.55vw, 4rem);
  font-size: 3rem;
  top: 5%;
}

.mora .label--kana {
  font-size: clamp(0.6rem, -0.28rem + 1.38vw, 1.1rem);
  font-size: 1.375rem;
  bottom: 5%;
}

@media screen and (max-width: 1024px) {
  .mora-name {
    font-size: clamp(2rem, -1.33rem + 8.33vw, 4rem);
  }
  .mora-kana {
    font-size: clamp(0.6rem, -0.39rem + 2.5vw, 1.2rem);
  }
  .mora-translation {
    font-size: clamp(0.7rem, -0.30rem + 2.50vw, 1.3rem);
  }
  .mora-romaji {
    font-size: clamp(0.5rem, -0.33rem + 2.08vw, 1rem);
  }
}
@media screen and (max-width: 640px) {
  .mora-name {
    font-size: clamp(2rem, -1.33rem + 13.33vw, 4rem);
  }
  .mora-kana {
    font-size: clamp(0.6rem, -0.23rem + 3.33vw, 1.1rem);
  }
  .mora-translation {
    font-size: clamp(0.5rem, -0.66rem + 4.66vw, 1.2rem);
  }
  .mora-romaji {
    font-size: clamp(0.4rem, -0.26rem + 2.66vw, 0.8rem);
  }
}





.switch {
  pointer-events: all;
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
  width:70px;

}
.switch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.switch input:checked ~ span:after {
  left: 58px;
}
.switch span {
  /*position: absolute;*/
      display: inline-block;
  top: -8px;
  height: 16px;
  width: 70px;
  left:0;
  border-radius: 4px;
  background-color: var(--color-black);
}
.switch span:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-white);
  transition: left var(--transition-duration) ease-in;
}