-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.css
1 lines (1 loc) · 2.39 KB
/
main.css
1
@import url(https://fonts.googleapis.com/css2?family=Rammetto+One&display=block);:root{--theme-background:#2b50aa;--theme-foreground:#ff9fe5;--theme-highlight:#ff9fe5;--theme-font:"Rammetto One"}html.font-resizing{overflow:hidden}body{background:var(--theme-background);color:var(--theme-foreground);display:flex;flex-direction:column;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:1.2rem;margin:0;min-height:100vh;min-width:320px}body.themed{transition:background-color .75s ease}main{align-items:center;flex:1;justify-content:center}footer,main{display:flex}footer{flex-direction:column;font-size:.75rem;padding:1rem}.footer-col-3{align-items:center}.footer-col-3,.footer-col-3>ul{display:flex;justify-content:space-between}.footer-col-3>ul{flex-direction:column;flex-grow:1}h2#question-display{font-display:swap;font-family:var(--theme-font),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-size:1.9rem;margin:0 .25rem;padding:1rem;text-align:center}html.font-resizing h2#question-display{position:absolute;visibility:hidden}button#reload-button{border:1px solid var(--theme-highlight);font-family:arial;font-size:1rem;margin:0 auto 1rem;max-width:20rem;padding:1rem}button#change-theme-button{border:none;margin-left:1rem;min-width:4.4rem}button{fill:var(--theme-highlight);appearance:none;background:transparent;border-radius:2.2rem;color:var(--theme-highlight);cursor:pointer;transition:background-color .1s ease}button:hover{fill:var(--theme-background);background-color:var(--theme-highlight);color:var(--theme-background)}ul{list-style-type:none;margin:0;padding:0}a{color:var(--theme-highlight);text-decoration:none}a:hover{text-decoration:underline}a:visited{color:var(--theme-highlight)}@media (min-width:640px){h2#question-display{font-size:3rem;margin:auto;max-width:80%;padding:0}button#reload-button{font-size:1.3rem;padding:1rem 1.5rem}footer{font-size:1rem}}@media (min-width:900px){li{margin-top:1rem}li:first-child{margin-top:0}footer{align-items:flex-end;flex-direction:row}footer>*{width:30%}.footer-col-1{order:1}.footer-col-2{order:2}.footer-col-3{justify-content:flex-end;order:3}.footer-col-3>ul{display:unset;text-align:right}button#reload-button{margin-bottom:0}}@media (min-width:1200px){h2#question-display{font-size:4rem}footer{font-size:1.2rem;padding:2rem}button#reload-button{font-size:1.3rem;max-width:24rem;padding:1.2rem 2rem}}