@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: 3vw;
    text-align: center;
}
p.info {
    font-family: 'Share Tech Mono', monospace;
    color: white;
    font-size: 1vw;
    text-align: center;
}
div.main {
    top: 10%;
    right: 25%;
    position: fixed;
    margin: auto;
    width: 50%;
    padding: 5px;
    border-radius: 30px;
}
body {
    background-image: url("/img/bg.png");
}
input {
    margin-left: auto;
    margin-right: auto;
    display: block;
    min-width: 250px;
    background: #dad9d9;
    font-size: 170%;
    font-family: 'Share Tech Mono', monospace;
    box-shadow: inset -0.05em -0.05em black
}
input:active {
    background: #acacac;
    box-shadow: inset 0em 0em
}

/* 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: 10vw;
    }
    header { 
        height: 75px;
    }
    h1.header {
        font-size: 60px;
        padding-left: 25%;
    }
   
    input {
        font-size: 7vw;
        min-width: 110%;
        max-width: 110%;
        /* I lack the understanding as to why I have to set a mix/max, but its also nearly midnight as I'm writing this and I should probably go to bed. */
    }   
}