/* This file is part of Vervis.
 *
 * Written in 2016, 2022, 2024 by fr33domlover <fr33domlover@riseup.net>.
 *
 * ♡ Copying is an act of love. Please copy, reuse and share.
 *
 * The author(s) have dedicated all copyright and related and neighboring
 * rights to this software to the public domain worldwide. This software is
 * distributed without any warranty.
 *
 * You should have received a copy of the CC0 Public Domain Dedication along
 * with this software. If not, see
 * <http://creativecommons.org/publicdomain/zero/1.0/>.
 */

html
    font-size: 62.5%

body
    font-size:   1.8rem
    font-family: sans-serif
    color:       #{plain}
    background:  #{black}
    text-align:  justify
    margin:      0

header
    padding: 1.2rem 1.8rem
    margin: 0 0 3rem
    background-color: #{dark main}

footer
    margin-top: 3rem
    padding: 1.4rem 1.8rem
    font-size: 1.4rem
    background-color: #{dark main}
    line-height: 1.5

footer a
    color: #{plain}

main
    max-width: 116rem
    padding-left: 8rem
    padding-right: 8rem
    margin-left: auto
    margin-right: auto
p
    line-height: 1.5
    margin-bottom: 2.5rem
    margin-top: 2.5rem

ul
    line-height: 1.3

a
    color:           #{light main}
    text-decoration: none

a:hover
    text-decoration: underline

h1
    color: #{dark yellow}
    font:  160% monospace

h2
    color: #{dark yellow}
    font:  140% monospace

h3
    color: #{dark yellow}
    font:  120% monospace

h4
    color: #{dark yellow}
    font:  bold 100% monospace

h5
    color: #{dark yellow}
    font:  bold 80% monospace

h6
    color: #{dark yellow}
    font:  bold 80% monospace

.required, .optional, .submit
    display: grid
    grid-gap: 0px 10px
    grid-template-columns: 150px 300px
    padding: 10px

label
    display: inline-grid
    width: 100%
    text-align: right

button
    padding: 1rem
    border-radius: 1rem

button:disabled, button[disabled]
    color: #{black}

input:not[type="submit"], select, textarea
    display: inline-grid
    width: 100%

input[type="submit"]
    display: inline-grid
    width: 100%
    padding:       1rem
    grid-column-start: 2
    border:        none
    border-radius: 1rem

input:hover[type="submit"]
    background:  #{dark gray}

.instance
    color: #{light main}
    font:  180% monospace

.username
    font-weight: bold

.message
    padding:       1rem
    margin:        4rem 3rem 4rem 4rem
    border:        none
    border-radius: 0.5rem
    background:    #{dark main}