:root{--card-width: 240px;--card-aspect-ratio: .64;--arrow-bg: rgba(255, 255, 255, .3);--arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);--option-bg: white;--select-bg: rgba(255, 255, 255, .2);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;color:#111;background-color:#fff}*{box-sizing:border-box}html{min-height:100%;width:100%;background:linear-gradient(0deg,red,purple)}body{margin:0;padding:0;min-height:100%}#root{display:flex;width:100%;min-height:100%;align-items:flex-start;justify-content:flex-start;flex-direction:column}a{font-weight:500;color:#fff;text-decoration:underline;cursor:pointer}a:hover{color:#fff;text-decoration:none}h1{font-size:3.2em;line-height:1.1}.app{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;width:100%}.app__header{margin-bottom:2rem}.app__title{margin:0;font-size:36px;text-align:center;color:#f0f8ff}.app__title-js span{background-color:#f8f6e9;border:2px solid #f7df1e}.app__title-react span{background:#f0f8ff;border:2px solid #61dafb}.app__title-ts span{background-color:#d8e4f0;border:2px solid #3178c6}.app__title-css span{background-color:#ece2f6;border:2px solid #653297}.app__subtitle{margin:0 -2px -8px 0;font-size:12px;text-align:right;font-weight:900;color:#f9a3a3;text-transform:uppercase;letter-spacing:3px}.app__special-letter{color:#000;display:inline-block;padding:2px 5px;transform:rotate(-5deg);border-radius:3px}.app__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:0;font:inherit;width:100%;max-width:var(--card-width);padding:10px 64px 10px 10px;margin:20px 0;background:var(--arrow-icon) no-repeat right .8em center/1.4em,linear-gradient(to left,var(--arrow-bg) 3em,var(--select-bg) 3em);color:#fff;border-radius:.25em;box-shadow:0 0 1em #0003;cursor:pointer}.app__select:focus{outline:none}.app__select option{color:inherit;background-color:var(--option-bg)}.app__cards{position:relative;max-width:var(--card-width);aspect-ratio:var(--card-aspect-ratio);margin:0 auto 55px;width:100%}.app__cards .flash-card{position:absolute;text-align:center}.app__cards .flash-card:nth-child(1){z-index:5}.app__cards .flash-card:nth-child(2){z-index:4}.app__cards .flash-card:nth-child(3){z-index:3}.app__cards .flash-card:nth-child(4){z-index:2}.app__cards .flash-card:nth-child(5){z-index:1}.app__cards .flash-card:nth-child(6){z-index:0}.app__cards--removing .flash-card:nth-child(1){transition:transform .4s,opacity .4s;transform:translate(-100%) translateY(50%) rotate(-15deg);opacity:0}.app__footer{font-size:11px;color:#fff;position:absolute;bottom:10px}.flash-card{width:100%;max-width:var(--card-width);aspect-ratio:var(--card-aspect-ratio);position:relative;transition:transform .3s}.flash-card--topic_js .flash-card__side{background-color:#f2ebb8;border:8px solid #f7df1e}.flash-card--topic_css .flash-card__side{background-color:#d8c7e9;border:8px solid #653297}.flash-card--topic_ts .flash-card__side{background-color:#bacde1;border:8px solid #3178c6}.flash-card--topic_react .flash-card__side{background-color:#cfedf4;border:8px solid #60daf8}.flash-card--flipped .flash-card__side--back{transform:rotateY(0);z-index:2}.flash-card--flipped .flash-card__side--front{transform:rotateY(180deg);z-index:1}.flash-card__side{position:absolute;width:100%;height:100%;border-radius:8px;top:0;transition:transform .3s;padding:24px 24px 84px;box-shadow:0 0 6px #0000001a;display:flex;align-items:center;justify-content:center}.flash-card__side--back{transform:rotateY(180deg);z-index:1}.flash-card__side--front{z-index:2}.flash-card__button{width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;box-shadow:0 0 6px #0000001a;padding:0;cursor:pointer;position:absolute;bottom:24px;left:50%;margin-left:-20px;transition:transform .2s,box-shadow .2s}.flash-card__button svg{width:24px;height:24px;position:relative;top:2px}.flash-card__button:hover{transform:scale(1.1);box-shadow:0 0 8px #0003}