p[data-v-6f4aaedc]{color:#fff;font-size:2rem}h3[data-v-7fbe7f01]{margin:40px 0 0}ul[data-v-7fbe7f01]{list-style-type:none;padding:0}li[data-v-7fbe7f01]{display:inline-block;margin:0 10px}a[data-v-7fbe7f01]{color:#42b983}@font-face{font-family:familiar_probold;src:url(../fonts/Familiar_Pro-Bold-webfont.82410c1a.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:space_monoregular;src:url(../fonts/SpaceMono-Regular-webfont.11d4111e.woff) format("woff");font-weight:400;font-style:normal}:root{--y-scroll-offset:100px}body,html{margin:0}*,:after,:before{box-sizing:border-box}p{font-family:familiar_probold;font-size:.8rem;color:#000;margin:5px}.headline{margin-bottom:10px;text-decoration:underline}.explain{margin:auto;margin-top:20px;margin-bottom:20px;font-size:1rem;width:70%}.explain,h1{font-family:space_monoregular}h1{font-size:1.2rem}h2{font-family:familiar_probold;font-size:1.6rem;color:#e5e7eb}#app{box-sizing:border-box}#app,.searchcolors{width:100%;text-align:center}.searchcolors{margin:0;margin-top:10px;grid-column:2/3;padding-left:20px}.header{grid-column:1/4;display:flex;justify-content:space-between;align-items:center;background:#000;height:80px;padding:0 20px;justify-content:space-around}.letter-container{grid-column:3/4;margin:10px auto;width:360px;height:360px;display:grid;grid-template-columns:repeat(12,30px);grid-template-rows:repeat(12,30px)}.letter-box{border:1px solid #000;padding:5px;margin:0;display:flex;justify-content:center}.main-letter{align-self:center;cursor:pointer}.modal-wrapper{background:#333;position:fixed;top:0;bottom:0;left:0;right:0;opacity:1%;z-index:1000}.modal-window{font-family:familiar_probold;background:#fff;width:280px;z-index:9999;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:15px;padding:30px;transform:translateY(var(--y-scroll-offset))}.modal-title{font-weight:700;font-size:1.2rem}.modal-body{font-size:1.4rem;margin:30px 0 30px 0;display:flex;flex-wrap:wrap;justify-content:space-around}.button-wrapper{display:flex;justify-content:flex-end}.text-red{color:#ef4444}.text-green,.text-red{border:2px solid #000;padding:.4rem 1rem;margin-bottom:10px;margin-right:5px}.text-green{color:#34d399}@media (min-width:600px){.letter-container{width:600px;height:600px;grid-template-columns:repeat(12,50px);grid-template-rows:repeat(12,50px)}h1{font-size:1.8rem}h2{font-size:2rem}p{font-size:1.2rem}.headline{font-size:1.4rem}.letter-box{border:2px solid #000}}@media (min-width:1000px){.letter-container{margin-top:30px;width:672px;height:672px;grid-template-columns:repeat(12,56px);grid-template-rows:repeat(12,56px)}h1{font-size:2rem}h2{font-size:2.2rem}p{font-size:1.3rem}.headline{font-size:1.4rem;margin-bottom:20px}.letter-box{border:2px solid #000}#app{display:grid;grid-template-columns:1% 29% 70%}.searchcolors{text-align:left;margin-top:50px}.explain{font-family:space_monoregular;text-align:justify;margin-top:20px;font-size:1.1rem;width:100%}:root{--y-scroll-offset:250px}}