body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.header{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);display:flex;height:5rem;justify-content:space-between;left:0;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:2}.header,body{font-family:Yusei Magic,sans-serif}.headerContainer{left:0;opacity:0;position:fixed;top:0;transition:opacity 1s ease-in-out;width:100%}.headerContainer.visible{opacity:1}.mainTitleContainer{color:#fff;display:flex;flex-direction:column;font-size:4rem;justify-content:center;margin-top:15rem;opacity:1;transition:opacity 1s ease-in-out}.mainTitleContainer.notVisible{opacity:0}#mainTitle{font-size:5rem}.dot{-webkit-text-fill-color:#0000;background:linear-gradient(270deg,#a50026,#bc002d);-webkit-background-clip:text;background-clip:text;font-family:Georgia,serif;font-size:1.4em;line-height:0}.scrollDownIcon{align-self:center;filter:invert(1);height:1.5rem;margin-top:5rem;transform:rotate(90deg);width:1.5rem}.restContainer{margin-bottom:10rem;margin-top:20rem}.infoBox{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:1.5rem;font-size:1rem;justify-content:center;margin-bottom:.2rem;margin-top:0;opacity:0;padding:20px;transition:opacity .75s ease-in-out;width:calc(33rem + 10px)}.infoBox.visible{opacity:1}.headerHiragana{align-items:center;background:#000;display:flex;font-family:Yusei Magic,sans-serif;font-weight:700;gap:2rem;height:2rem;justify-content:center;left:0;position:-webkit-sticky;position:sticky;top:5rem;width:100%;z-index:1}#headerTitle{color:#e6e6e6;font-size:3.5rem;font-weight:700;margin:0 auto 0 20%}#links{display:flex;flex-direction:row;font-size:1rem;margin-right:10%}#links,a{color:#e6e6e6}a{text-decoration:none}body{background-attachment:fixed;background-blend-mode:screen;background-color:#000;background-image:linear-gradient(135deg,#ffffff1a,#0000),linear-gradient(315deg,#fff0,#0003);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;color:#fff;height:100vh;margin:0}.gojuonContainer{align-items:start;display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:5rem;scroll-margin-top:7rem;width:100%}.gojuonDisplay{flex-direction:column;font-family:Arial,Helvetica,sans-serif;grid-column:2;overflow:hidden}.gojuonDisplay,.romajiButton{align-items:center;display:flex}.romajiButton{gap:.75rem;margin-bottom:-1rem;margin-left:15%;width:-webkit-fit-content;width:fit-content}.romajiButton h3{font-size:1rem;margin:0;white-space:nowrap}.infoButtonGojuon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;font-family:Yusei Magic,sans-serif;grid-column:2;height:2rem;justify-content:space-between;margin-top:-4.9rem;padding-left:1rem;width:calc(33rem + 10px)}.infoButtonGojuon.active{border:none}.buttonIconGojuon{filter:invert(1);height:1.5rem;margin-right:.5rem;transform:rotate(90deg);width:1.5rem}.infoButtonGojuon.active .buttonIconGojuon{transform:rotate(270deg)}.infoButtonDakuten{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;font-family:Yusei Magic,sans-serif;grid-column:2;height:2rem;justify-content:space-between;margin-top:-4.9rem;padding-left:1rem;width:calc(33rem + 10px)}.infoButtonDakuten.active{border:none}.buttonIconDakuten{filter:invert(1);height:1.5rem;margin-right:.5rem;transform:rotate(90deg);width:1.5rem}.infoButtonDakuten.active .buttonIconDakuten{transform:rotate(270deg)}.infoButtonYoon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;font-family:Yusei Magic,sans-serif;grid-column:2;height:2rem;justify-content:space-between;margin-top:-4.9rem;padding-left:1rem;width:calc(33rem + 10px)}.infoButtonYoon.active{border:none}.buttonIconYoon{filter:invert(1);height:1.5rem;margin-right:.5rem;transform:rotate(90deg);width:1.5rem}.infoButtonYoon.active .buttonIconYoon{transform:rotate(270deg)}.infoBoxGojuon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:.8rem;grid-column:1;justify-content:center;max-height:0;overflow:hidden;padding-left:1rem;padding-right:1rem;transition:max-height .5s ease;width:calc(33rem + 10px)}.infoBoxGojuon h2{opacity:0;transition:opacity .1s ease 0s}.infoBoxGojuon.open{max-height:25rem}.infoBoxGojuon.open h2{opacity:1;transition:opacity .2s ease .3s}.infoBoxDakuten{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:.8rem;grid-column:1;justify-content:center;max-height:0;overflow:hidden;padding-left:1rem;padding-right:1rem;transition:max-height .5s ease;width:calc(33rem + 10px)}.infoBoxDakuten h2{opacity:0;transition:opacity .1s ease 0s}.infoBoxDakuten.open{max-height:25rem}.infoBoxDakuten.open h2{opacity:1;transition:opacity .2s ease .3s}.infoBoxYoon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:.8rem;grid-column:1;justify-content:center;max-height:0;overflow:hidden;padding-left:1rem;padding-right:1rem;transition:max-height .5s ease;width:calc(33rem + 10px)}.infoBoxYoon h2{opacity:0;transition:opacity .1s ease 0s}.infoBoxYoon.open{max-height:25rem}.infoBoxYoon.open h2{opacity:1;transition:opacity .2s ease .3s}.singleKeyRomaji{align-items:center;background-color:#000;color:#e6e6e6;display:flex;height:5.5rem;justify-content:center;margin:0;position:relative;width:5.5rem}.hiraganaDisplay{column-gap:2px;display:inline-grid;grid-template-columns:repeat(6,5.5rem);margin-bottom:5rem;margin-top:2rem;row-gap:2px}.singleHiragana{background:linear-gradient(270deg,#a50026,#bc002d);height:5.5rem;margin:0;width:5.5rem}.romajiKeyDisplay,.singleHiragana{align-items:center;color:#e6e6e6;display:flex;justify-content:center}.romajiKeyDisplay{background:#000;border-radius:50%;bottom:2px;font-size:.9rem;height:1.7rem;position:absolute;right:2px;width:1.7rem}.firstHiragana{align-items:center;background-color:#000;color:#e6e6e6;display:flex;justify-content:center}.emptySlotHiragana,.firstHiragana{height:5.5rem;margin:0;position:relative;width:5.5rem}.emptySlotHiragana{background-color:#86001f}.infoTitle{align-items:center;display:flex;font-family:Yusei Magic,sans-serif;font-size:2rem;justify-content:center;margin-bottom:2rem}.specialFont{font-family:Arial}.switch{display:inline-block;height:1rem;position:relative;width:2rem}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;border-radius:1rem;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:50%;bottom:.125rem;content:"";height:.75rem;left:.125rem;width:.75rem}input:checked+.slider{background-color:#bc002d}input:checked+.slider:before{transform:translateX(1rem)}.converterBox{align-items:center;display:flex;flex-direction:row;justify-content:center}#inputDisplay textarea{background:linear-gradient(270deg,#a50026,#bc002d);border:none;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;height:20rem;margin:.1rem;overflow-wrap:break-word;overflow-y:auto;padding:20px;resize:none;vertical-align:top;white-space:normal;width:20rem;word-break:break-word}#inputDisplay textarea,.inputDisplay::placeholder{color:#e6e6e6;font-size:1.5rem}.contContainer{margin-top:5rem}.contContainer,.converterDisplay{align-items:center;display:flex;flex-direction:column;justify-content:center}.converterDisplay{background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;font-family:Yusei Magic,sans-serif;font-size:1.5rem;height:8rem;margin-bottom:.2rem;margin-top:0;padding:20px;width:40.2rem}
/*# sourceMappingURL=main.84c6545e.css.map*/