@font-face{font-family:noto sans thai;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-thai-thai-wght-normal.woff2)format('woff2');unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:noto sans thai looped;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-thai-looped-thai-wght-normal.woff2)format('woff2');unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:noto sans thai looped;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-thai-looped-latin-wght-normal.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-display:swap;font-family:bitter;font-style:normal;font-weight:700;src:url(../fonts/bitter-v33-latin_latin-ext-700.woff2)format('woff2')}:root{--background-color:#F8F6F7;--background-color-translucent:#F8F6F7DD;--cheery-color:#38A7DE;--cheery-color-dark:#26769A;--dark-color:#000000;--top-padding:5rem}*{box-sizing:border-box}h1,h2,h3{font-family:bitter,serif;font-weight:700}p{font-family:noto sans thai looped,sans-serif}body{margin:0;background-color:var(--background-color)}.bar{position:fixed;top:0;z-index:1000;width:calc(50vw - 400px);height:100%;background-color:var(--background-color);box-shadow:0 0 10px rgba(0,0,0,.2)}main{padding-top:var(--top-padding);min-height:100dvh}.container{max-width:24rem;margin:0 auto;padding:0 1rem}.layout{min-height:calc(100dvh - var(--top-padding));display:grid;grid-template-rows:1fr 16rem 1fr 6rem;gap:2rem;h1 { margin: 1rem 0 0; text-align: center; a { display: inline-block; margin: 0 2rem; text-decoration: none; color: var(--dark-color); pointer-events: none; opacity: 0.5; &:hover { color: var(--cheery-color); } } } .flashcards { output { display: block; text-align: center; font-family: 'Bitter', serif; font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; } .progress-bar-container { padding: 0 1rem; .progress-bar { width: 100%; height: 0.5rem; background-color: #999999; border-radius: 0.25rem; overflow: hidden; margin-bottom: 1rem; .progress-bar-fill { height: 100%; background-color: var(--cheery-color); transition: width 0.3s ease-in-out; } } } }}.card-container{position:relative;perspective:1000px;width:100%;height:16rem;margin:0 auto;.side[data-font-style="looped"] .thai { font-family: 'Noto Sans Thai Looped', sans-serif; } .side[data-font-style="modern"] .thai { font-family: 'Noto Sans Thai', sans-serif; }}.card-container.flip{.word-card { transform: rotateY(180deg); }}.word-card{position:relative;transform-style:preserve-3d;transition:transform .3s;cursor:pointer}.side{backface-visibility:hidden;position:absolute;top:0;left:0;width:100%;padding:1rem;aspect-ratio:4/3;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);.cog { position: absolute; top: 0rem; right: 0rem; background: none; border: none; cursor: pointer; padding: 1rem; transition: opacity 0.1s; &:hover { opacity: 0.7; } svg { width: 1.5rem; height: 1.5rem; } } p { text-align: center; font-size: calc(1.5rem + 0.5vw); color: #fff; font-weight: 700; } &.card-front { z-index: 2; transform: rotateY(0deg); background-color: var(--cheery-color); border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } &.card-back { transform: rotateY(180deg); background-color: var(--cheery-color-dark); border-radius: 1rem; display: flex; align-items: center; justify-content: center; }}.card-settings{position:absolute;inset:0;aspect-ratio:4/3;width:100%;background-color:var(--cheery-color);padding:1rem 1.5rem;border-radius:1rem;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);.settings-done { position: absolute; top: 0rem; right: 0rem; background: none; border: none; cursor: pointer; padding: 1.25rem; transition: opacity 0.1s; &:hover { opacity: 0.7; } svg { width: 1rem; height: 1rem; path { fill: var(--background-color); } } } .settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: start; gap: 0.5rem 1rem; height: 100%; h2 { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 1.25rem; color: var(--background-color); } fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } legend { display: block; color: var(--background-color); font-family: 'Bitter', serif; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 700; text-align: center; } input[type="radio"] { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } label { font-family: 'Noto Sans Thai Looped', sans-serif; display: block; padding: 0.1rem 0 0.25rem; border-radius: 999px; text-align: center; font-size: 1rem; cursor: pointer; margin-bottom: 0.5rem; color: var(--background-color); border: 1px dashed var(--background-color); &:hover { background-color: var(--cheery-color-dark); } &:last-of-type { margin-bottom: 0; } } input[type="radio"]:checked + label { background-color: var(--background-color); color: var(--dark-color); } input[type="radio"]:focus-visible + label { outline: 2px solid var(--dark-color); outline-offset: 2px; } }}.card-settings[hidden]{display:none}.card-container.settings-open .word-card{visibility:hidden}.course-list{a { display: block; padding: 1rem; text-decoration: none; color: var(--dark-color); font-family: 'Bitter', serif; font-weight: 700; border-bottom: 1px dashed var(--dark-color); &:hover { opacity: 0.7; } }}.flashcards-controls{display:grid;grid-template-columns:1fr 1fr 1fr;max-width:22rem;width:100%;height:100%;padding-bottom:2rem;gap:1rem;height:4rem;button { border: none; height: 100%; border-radius: 0.5rem; padding: 1rem; background-color: var(--cheery-color); color: var(--background-color); font-family: 'Bitter', serif; font-weight: 700; font-size: 1rem; cursor: pointer; &:hover { background-color: var(--cheery-color-dark); } }}.main-nav{width:100%;position:fixed;z-index:10000;top:0;background-color:var(--background-color-translucent);backdrop-filter:saturate(180%)blur(20px);-webkit-backdrop-filter:saturate(180%)blur(20px);.nav-container { max-width: 24rem; margin: auto; .logo { display: inline-block; height: 5rem; svg { height: 100%; padding: 0.75rem; } &:hover { opacity: 0.7; } } .side-menu { display: none; &:checked ~ nav { grid-template-rows: 1fr; } &:checked ~ .hamburger .hamburger-line { background: transparent; } &:checked ~ .hamburger .hamburger-line::before { transform: rotate(-45deg); top: 0; } &:checked ~ .hamburger .hamburger-line::after { transform: rotate(45deg); top: 0; } } .nav { width: 100%; display: grid; overflow: auto; max-height: calc(100vh - 6rem); grid-template-rows: 0fr; transition: grid-template-rows 0.1s cubic-bezier(0.5, 1, 0.5, 1); .menu { list-style: none; margin: 0; padding: 0; overflow-y: auto; li { border-bottom: 1px solid var(--cheery-color); &:first-of-type { border-top: 1px solid var(--cheery-color); } .nested-menu { display: block; list-style: none; padding: 0; li { a { padding-left: 4rem; } &:last-of-type { border-bottom: 0; } } } } a, p { padding: 1.15rem 2rem; display: flex; font-family: 'Bitter', serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; color: var(--cheery-color); &.active { color: var(--background-color); background-color: var(--cheery-color); } &:hover { opacity: 0.7; } .menu-title { flex-grow: 1; svg { display: none; } } .menu-subtitle { font-size: 1rem; font-weight: 400; align-self: center; } } } } }}.hamburger{cursor:pointer;float:right;padding:2.5rem 1rem;&:hover { .hamburger-line { background-color:var(--cheery-color); &::before,&::after{ background-color:var(--cheery-color); } } } .hamburger-line { background-color:var(--dark-color); display:block; height:2px; position:relative; width:1.5rem; &::before,&::after{ background-color:var(--dark-color); content:''; display:block; height:100%; position:absolute; transition:transform .1s ease-out,top .1s ease-out; width:100%; } &::before{ top:0.5rem; } &::after{ top:-0.5rem; } }}