willpower232/TOTPBTF3

body,body * {
    font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;
}
button::-moz-focus-inner,input[type=submit]::-moz-focus-inner {
    border:0;padding:0;
}
input,button {
    font-size:inherit;
}

html {
    //

    &.inverted {
        //
    }
}

body {
    margin:0 auto;min-height:100vh;overscroll-behavior:none;

    &,&:before {
        max-width:600px;width:99%;
    }

    &:before {
        display:block;line-height:3em;position:fixed;text-align:center;top:0;
    }

    &.scrollup {
        .buttons,footer {
            position:sticky;
        }
        .buttons {
            // z-index to appear on top of gradient
            bottom:3rem;z-index:100;
        }
        footer {
            bottom:0;

            &:after {
                content:'';height:8rem;left:0;position:absolute;right:0;top:-8rem;
            }
        }
    }
}

header {
    line-height:2rem;
}

main {
    box-sizing:border-box;min-height:100vh;padding:1rem;position:relative;

    &, > form {
        display:flex;flex-direction:column;
    }

    > form {
        flex-grow:1;
    }

    * + * {
        margin-top:1rem;
    }
}

h1 {
    &.wholepage {
        font-size:10vh;line-height:100vh;text-align:center;
    }
}

footer {
    display:flex;justify-content:space-around;

    a {
        text-decoration:none;
    }
}