* { box-sizing: border-box; } body { margin: 0; padding-bottom: 20px; } #all-fonts { padding: 0; margin: 0; } #showall { border-radius: 300px; border: none; background-color: #C09070; color: #000000; margin: 3px; cursor: pointer; position: fixed; bottom: 0; right: 0; } #showall:hover, #showall:hover:active { background-color: #FFCF00; color: #000000; } .font { padding: 10px 10px; } .theme-dark .font { border-bottom: 1px solid #9C9CFF; } .theme-light .font { border-bottom: 1px solid #9C9CFF; } .font:last-of-type { border-bottom: 0; } .theme-light .font:nth-child(even) { background-color: rgba(255,159,0,.2); } .font-preview { margin-left: -4px; height: 60px; display: block; } .font-info { display: block; } .font-name { display: inline; } .font-css-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 5px; } .theme-light .font-css-code, .theme-light .font-url { border: 1px solid #A09090; color: #9C9CFF; } .theme-dark .font-css-code, .theme-dark .font-url { border: 1px solid #A09090; color: #9C9CFF; }