.light-mode header{border-bottom:1px solid #888;color:#888}.dark-mode header{border-bottom:1px solid #cce1fd;color:#cce1fd}header{width:100vw;display:flex;justify-content:space-between;align-items:center;padding-top:5vh;padding-bottom:2.5vh}header nav,header ul{padding:0;margin:0}header ul{list-style:none;display:flex;margin-right:5vw}header ul li{margin-left:10px;font-size:.75em}header .logo{margin-left:5vw;padding:0;font-size:1.5em}header .logo span{font-weight:700}.grid .font-card{width:250px;height:250px}.list .font-card{width:100%;align-self:center;height:250px}.font-card{flex-direction:column;-webkit-transition:width .25s ease-in;transition:width .25s ease-in}.dark-mode .font-card{border-top:1px solid #f1f7ff;color:#f1f7ff}.light-mode .font-card{border-top:1px solid #000;color:#000}.font-card,.font-card .body,.font-card .header,.font-card .header .header-group{display:flex}.font-card .header{justify-content:space-between;align-items:flex-start;padding-top:10px}.font-card .header .header-group{flex-direction:column;justify-content:center;align-items:flex-start}.font-card .header .header-group h3{margin:0 0 5px}.font-card .header button{background-color:transparent;outline:none;border-radius:100%;font-weight:700;cursor:pointer;width:30px;height:30px}.dark-mode .font-card .header button{color:#add8e6;border:2px solid #add8e6}.light-mode .font-card .header button{color:red;border:2px solid red}.font-card .body{flex-direction:column;justify-content:center;align-items:center;height:170px;margin-top:-20px}.font-card .body p{padding:0;margin:0;width:100%;overflow-y:auto;word-wrap:break-word;-ms-overflow-style:none;overflow:-moz-scrollbars-none}.font-card .body p::-webkit-scrollbar{width:0}.font-card .body p::-moz-scrollbar{width:0}.dark-mode footer{border-top:1px solid #cce1fd;color:#fff}.light-mode footer{border-top:1px solid #888;color:#000}.light-mode footer small span{color:red}.dark-mode footer small span{color:#ff94d6}.social,.social li,footer{display:flex}.social li{margin:0 10px}.light-mode .social li#github{color:#ffa600}.light-mode .social li#linkedin{color:#002872}.dark-mode .social li#github{color:rgba(247,212,149,.651)}.dark-mode .social li#linkedin{color:rgba(126,169,250,.651)}footer{flex-direction:row;align-items:center;padding:5px 0;margin-top:15px;position:fixed;bottom:0}.font-manager{margin-top:20px;width:85vw}.font-manager form{display:flex;justify-content:space-between;border-radius:50px;padding:5px 20px}.dark-mode .font-manager form{border:2px solid #cce1fd}.light-mode .font-manager form{border:2px solid #888}.dark-mode .font-manager form>button,.dark-mode .font-manager input,.dark-mode .font-manager select{background-color:#020618;color:#cce1fd}.light-mode .font-manager form>button,.light-mode .font-manager input,.light-mode .font-manager select{background-color:#fff;color:#888}.dark-mode .font-manager input{border-right:1px solid #cce1fd}.light-mode .font-manager select{background-color:#fff}.font-manager select{border:none}.font-manager input{border:none;border-right:1px solid #000}.font-manager input:focus,.font-manager select:focus{outline:none;border:none}.font-manager input:focus{border-bottom:1px solid #000}.font-manager form fieldset{border:0;padding:0}.font-manager form fieldset button{margin:0 5px;height:20px;width:20px;border-radius:100%;cursor:pointer}button[name=DarkMode]{background-color:#020618;border:2px solid #fff}button[name=LightMode]{background-color:#fff;border:2px solid #020618}.font-card-container{margin-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;width:85vw;margin-bottom:30px;min-height:75vh}.font-card-container.grid{flex-direction:row}.font-card-container.list{flex-direction:column}.font-card-container div{margin-bottom:20px}body{padding:0;margin:0;overflow-x:hidden}button{outline:none;border:none;cursor:pointer}a{text-decoration:none;color:inherit}ul{padding:0;margin:0;list-style:none}.app-container{display:flex;flex-direction:column;align-items:center;font-family:sans-serif;min-height:100vh}.app-container.dark-mode{background-color:#020618}.app-container.light-mode{background-color:#fff}@media (max-width:750px){.font-manager form button[name=listLayout],.font-manager form fieldset,.font-manager form input[name=sampleText]{display:none}.font-manager form input[name=font]{width:90%}footer{flex-direction:column;text-align:center;padding:0}footer small{width:70%}aside{bottom:100px!important;left:46%!important}}@media (max-width:930px){.font-card-container{flex-direction:column}.font-card-container .font-card{width:100%}}
/*# sourceMappingURL=main.f96eea93.chunk.css.map */