@charset "UTF-8"; :root { --color-bdr: rgba(0, 0, 0, .08); --color-black: rgba(0, 0, 0, 1); --color-white: rgba(255, 255, 255, 1); --color-red: #f45651; --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { overflow-x: hidden; overflow-y: visible; } @keyframes gradient { 0% { background-position: 0% 0%; } 100% { background-position: 86% 0%; } } body { color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; overflow: hidden; background: linear-gradient(90deg, #e2fbff, #e6e9ff, #ffeafb, #ffc9e1, #ffec9b, #fef8c2, #e2fbff, #e6e9ff, #ffeafb); background-size: 700% 100%; animation: gradient 8s linear infinite; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } #logo { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0.3; } #logo p { width: 150%; position: absolute; rotate: -15deg; bottom: 26.67vw; left: -18%; } #wrapper { padding: 20px 0 0 0; } #c-question { border: 3px solid #CC0000; width: 72%; aspect-ratio: 1/1; margin-inline: auto; display: grid; place-content: center; position: relative; border-radius: 6px; background: rgba(255, 255, 255, 0.8); } #c-question:before { content: ""; width: 100%; height: 1px; background: var(--color-bdr); position: absolute; top: 50%; left: 0px; } #c-question:after { content: ""; width: 1px; height: 100%; background: var(--color-bdr); position: absolute; top: 0%; left: 50%; } #c-question p { font-size: min(66.67vw,250px); line-height: 1; position: relative; z-index: 2; color: #404248; } #c-question #c-pika { width: min(21.33vw,80px); position: absolute; right: max(-10.67vw,-40px); bottom: max(-8vw,-30px); cursor: pointer; transition: scale 0.4s var(--ease-bounce); } #c-question #c-pika.scale { scale: 1.2; } #c-question #c-pika img { width: 100%; } :has(ul.hint) button[data-hint] { background: var(--color-black); } .score { position: fixed; bottom: 10px; left: 50%; transform: translate3d(-50%, 0, 0); background: rgba(0, 0, 0, 0.5); padding: 4px 6px; border-radius: 6px; z-index: 1000; } .score p { font-size: 4vw; display: flex; color: var(--color-white); font-weight: bold; } .score p span.bar { font-size: 3.47vw; padding: 0 0.5em; } #c-answers p { padding: 0.5em 0; text-align: center; font-weight: bold; color: rgba(0, 0, 0, 0.8); } #c-answers ul { width: 80%; margin-inline: auto; display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; } #c-answers ul li { width: calc(50% - 5px); display: flex; align-items: center; justify-content: center; } #c-answers ul li button { width: 96%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.5); position: relative; border-radius: 6px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); border: 2px solid #FFDE00; backdrop-filter: blur(10px); } #c-answers ul li button .img { width: 100%; } #c-answers ul li button .img img { width: 92%; } #c-answers ul li button span.txt { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255, 255, 255, 0.8); display: grid; place-content: center; align-items: center; font-weight: bold; color: var(--color-black); opacity: 0; } #c-answers ul li button span.txt span { font-size: 3.73vw; display: block; padding: 0 10px; } #c-answers ul.hint li span.txt { opacity: 1; } button[data-hint] { width: 16vw; height: min(6.4vw,24px); border-radius: 100vmax; background: var(--color-red); position: fixed; bottom: 20px; right: 20px; display: grid; place-content: center; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3)); } button[data-hint] span { color: var(--color-white); font-size: 3.2vw; font-weight: bold; } #correct { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.9); z-index: 100; opacity: 0; pointer-events: none; } #correct .inner { width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; } #correct .content { width: 100%; } #correct figure { width: 100%; position: absolute; top: 43%; left: 50%; transform: translate3d(-50%, -50%, 0); text-align: center; } #correct figure img { display: inline-block; } #correct p.name { text-align: center; position: relative; background: rgb(255, 255, 255); width: 60%; margin-inline: auto; border-radius: 6px; transform: translate3d(0, -200%, 0); } #correct p.name span { font-size: 4.27vw; letter-spacing: 1px; font-weight: bold; padding: 0.2em 0.5em; color: #3B4CCA; display: block; } #correct span.circle { width: 60%; margin: auto; aspect-ratio: 1/1; border: 20px solid var(--color-red); display: block; border-radius: 100vmax; opacity: 0; scale: 0.8; transition: opacity 0.3s ease 0s, scale 0.3s var(--ease-bounce) 0s; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.25)); } #correct button[data-next] { width: 60%; height: 40px; border-radius: 6px; background: #FFDE00; border: 2px solid #3B4CCA; display: grid; place-content: center; margin: auto; margin-top: 40px; } #correct button[data-next] span { color: #3B4CCA; font-weight: bold; font-size: 4.27vw; letter-spacing: 2px; } #wrong { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.8); z-index: 100; opacity: 0; pointer-events: none; } #wrong .inner { width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; } #wrong .content { width: 100%; } #wrong p.name { text-align: center; position: relative; background: rgb(255, 255, 255); width: 80%; margin-inline: auto; border-radius: 6px; } #wrong p.name span { font-size: 4.27vw; letter-spacing: 1px; font-weight: bold; padding: 0.5em 0.5em; color: var(--color-red); display: block; } #wrong .batsu { width: 60%; margin: auto; aspect-ratio: 1/1; position: relative; opacity: 0; scale: 0.8; transition: opacity 0.3s ease 0s, scale 0.3s var(--ease-bounce) 0s; } #wrong .batsu span { width: 100%; height: 20px; background: var(--color-red); display: block; position: absolute; } #wrong .batsu span:nth-of-type(1) { rotate: 45deg; top: 50%; } #wrong .batsu span:nth-of-type(2) { rotate: -45deg; top: 50%; } #wrong button[data-again] { width: 60%; height: 40px; border-radius: 6px; background: #FFDE00; border: 2px solid #3B4CCA; display: grid; place-content: center; margin: auto; margin-top: 40px; } #wrong button[data-again] span { color: #3B4CCA; font-weight: bold; font-size: 4.27vw; letter-spacing: 2px; } .correct #correct { opacity: 1; pointer-events: auto; } .correct #correct span.circle { opacity: 0.9; scale: 1; } .correct .score p { color: var(--color-red); } .wrong #wrong { opacity: 1; pointer-events: auto; } .wrong #wrong .batsu { scale: 1; opacity: 1; } @media all and (min-width: 744px) { #c-question { width: 50%; } #c-question p { font-size: 40rem; } #c-question #c-pika { width: 150px; right: -80px; bottom: -60px; } .score { padding: 8px 10px; } .score p { font-size: 2.4rem; } .score p span.bar { font-size: 2rem; } #c-answers p { padding: 1em 0; font-size: 2rem; color: rgba(0, 0, 0, 0.8); } #c-answers ul { width: 60%; } button[data-hint] { width: 160px; height: 48px; } button[data-hint] span { font-size: 2.8rem; } #correct span.circle { width: 50%; transform: translate3d(0, -18%, 0); } #wrong .batsu { width: 60%; margin: auto; aspect-ratio: 1/1; position: relative; opacity: 0; scale: 0.8; transition: opacity 0.3s ease 0s, scale 0.3s var(--ease-bounce) 0s; } #wrong .batsu span { width: 100%; height: 20px; background: var(--color-red); display: block; position: absolute; } #wrong .batsu span:nth-of-type(1) { rotate: 45deg; top: 50%; } #wrong .batsu span:nth-of-type(2) { rotate: -45deg; top: 50%; } #wrong button[data-again] { height: 80px; } #wrong button[data-again] span { font-size: 3.2rem; } #correct button[data-next] { width: 60%; height: 80px; } #correct button[data-next] span { font-size: 3.2rem; } } /*# sourceMappingURL=common.css.map */