html,body,#root{width:100%;height:100%}body{background:#fff;margin:0}#root{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;min-height:100vh;display:flex}main{box-sizing:border-box;flex-direction:column;gap:1rem;width:100%;min-width:min(400px,100%);max-width:1000px;min-height:100%;padding:1rem;display:flex}h1{margin:0}footer{min-height:6rem}.content{box-sizing:border-box;flex-direction:column;gap:1rem;width:100%;margin:0;display:flex}.container{box-sizing:border-box}.app-holder{box-sizing:border-box;aspect-ratio:1;width:100%;max-height:500px;overflow:hidden}#app{width:100%;height:100%;position:relative}#app>.lil-gui{z-index:1;max-height:100%;position:absolute;top:0;right:0}#app canvas{display:block}.fontSwatch{width:100%}.fontSwatch,.fontSwatch *{box-sizing:border-box}.fontSwatch .pass{color:#fff;background-color:#080;border-radius:1em}.fontSwatch .fail{color:#c00}.fontSwatch #maincontent{outline:0;width:min(700px,100%);max-width:100%;margin:0 0 20px;font-size:1.125em;display:flow-root;position:relative}.fontSwatch #resultsContainer{width:100%;display:flow-root}.fontSwatch article h2{clear:both;color:#bf1722;border-bottom:1px solid;margin:0 0 6px;padding-top:15px;font-family:Roboto,Georgia,Times,serif;font-size:150%;font-weight:400;line-height:1.25em}.fontSwatch article p,.fontSwatch pre{margin:0;padding-bottom:1em;line-height:1.5em}.fontSwatch a{color:#20399d;text-decoration:underline;transition:background-color .25s linear}.fontSwatch #ratioContainer{text-align:center;padding-top:.6em}.fontSwatch #ratioContainer.pass>span,.fontSwatch #textBackRatioContainer.pass>span,.fontSwatch #linkTextRatioContainer.pass>span,.fontSwatch #linkBackRatioContainer.pass>span{border:3px solid #080;padding:8px}.fontSwatch #ratioContainer>span{border:1px solid #ccc;border-radius:6px;min-width:7em;margin-bottom:6px;padding:10px;display:inline-block}.fontSwatch #ratio,.fontSwatch #textBackRatio,.fontSwatch #linkTextRatio,.fontSwatch #linkBackRatio{font-size:3em;display:block}.fontSwatch #textBackRatio,.fontSwatch #linkTextRatio,.fontSwatch #linkBackRatio{min-width:4em;display:inline-block}.fontSwatch #permalink{border:none;display:block}.fontSwatch .results{float:left}.fontSwatch .results p{padding-bottom:2px}.fontSwatch .results span{box-sizing:content-box;float:right;text-align:center;width:2.2em;margin:0 .5em;padding:0 .5em;font-weight:700;transition:all .2s}.fontSwatch #normal,.fontSwatch #big,.fontSwatch #ui{float:right;text-align:center;border:1px solid #ccc;width:min(460px,100%);max-width:100%;padding:1em}.fontSwatch #big{font-size:14pt;font-weight:700}.fontSwatch #ui{margin-bottom:20px;padding:5px 0 10px}.fontSwatch #ui:first-letter{font-size:1.5em;font-weight:700}.fontSwatch #uibox{border:2px solid gray;margin:auto;padding:2px;display:block}.fontSwatch #normal a,.fontSwatch #big a{text-decoration:none}.fontSwatch #normal a:hover,.fontSwatch #normal a:focus,.fontSwatch #big a:hover,.fontSwatch #big a:focus{text-decoration:underline}