@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Import Fonts */ header { background: linear-gradient(#072CFF, #00137F ); position: absolute; left: 0px; top: 0px; height: 40px; width: 100% } h1.header { padding: 32px; font-family: 'Bitter', serif; color: white; display: inline; } p.intro { font-family: 'Share Tech Mono', monospace; color: white; font-size: 2.5vw; text-align: center; } p.info { font-family: 'Share Tech Mono', monospace; color: white; font-size: 1.25vw; text-align: center; } div.main { top: 10%; right: 25%; margin: auto; width: 50%; padding: 10px; border-radius: 30px; } body { background-image: url("/img/bg_avif.avif"); /* If need be, I'll figure out a way to change this for devices that don't support AVIF */ } input { -webkit-appearance: none; margin-left: auto; margin-right: auto; display: block; min-width: 250px; background: #dad9d9; font-size: 170%; font-family: 'Share Tech Mono', monospace; color: black; box-shadow: inset -0.05em -0.05em black } input:active { background: #acacac; box-shadow: inset 0em 0em } a { text-decoration: none; } .button { display: inline-flex; font-size: 16px; text-align: center; border: none; border-radius: 4px; outline: none; box-shadow: none; cursor: pointer; transition: 0.3s ease-in-out; } .button.button1 { border-radius: 0; box-sizing: border-box; min-height: 23px; color: #000; padding: 0 2px 2px 0; border-top: 1px solid #CCCCCC; border-right: 0.1px solid transparent; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; background-color: #979797; width: 15%; } .button.button1 span { -webkit-appearance: none; margin-left: auto; margin-right: auto; display: block; width: 100%; background: #dad9d9; font-size: 170%; font-family: 'Share Tech Mono', monospace; box-shadow: inset -0.05em -0.05em black; } .button.button1 span:hover, .button.button1:hover + .button.button1 span { background-color: #ACACAC; border-top: 1px solid transparent; border-right: 0.1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid transparent; box-shadow: inset -0.05em -0.05em transparent;} .button.button1:hover { background-color: #ACACAC; } div.webbutton { margin: auto; width: 264px; padding-top: 3px; } img.webbutton{ width: 88px; height: 31px; float: left; text-align: center; } /* I'm mad that I have to make this mobile-compatible, Lol. https://twitter.com/IDeleteSystem64/status/1512218098325147655?s=20&t=Hz4V-vxmywYwTMvuBbCAZQ */ @media only screen and (max-width: 980px) { p.intro { font-size: 8vw; padding-top: 10px; } header { height: 75px; } h1.header { font-size: 60px; padding-left: 25%; } input { margin-left: -10%; font-size: 7vw; -webkit-text-size-adjust:100%; min-width: 125%; max-width: 125; } p.info { font-family: 'Share Tech Mono', monospace; color: white; font-size: 4.5vw; text-align: center; } img.webbutton { width: 176px; height: 62px; float: left; } div.webbutton { width: 100%; padding-left: 15%; } }