html {
    font-family: sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #111;
    color: #bbb;
    display: grid;
    grid-template-rows: min-content auto min-content;
    min-height: 100vh;
}

header, footer {
}
.content-wrap {
    background-color: #222;
}

.content {
    max-width: 800px;
    margin: 0 auto;
}
.card{
    padding: .2em 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: #181818;
}

a {
    color: #d45252;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.form {
    display: grid;
    grid-template-columns: fit-content(33%) 1fr;
    gap: 1em;
    margin-bottom: 1em;
}
.form label, 
.form input,
.form select {
    margin-bottom: 0;
    display: block;
}
.form label {
    font-weight: bold;
    align-self: center;
}
.form input,
.form select {
    background-color: transparent;
    color: #bbb;
    border: 1px solid #444;
    border-radius: 0;
    min-height: 3em;
    padding-left: 1em;
}
.form input:hover,
.form select:hover {
    background-color: #223;
}

.form input:focus-visible {
    outline: none;
    background-color: #223;
}

.full-width {
    grid-column: 1 / -1;
}


.link-output, .link-output:focus-visible {
    background-color: transparent;
    border: none;
    border-bottom: #fff 1px solid;
    color: #fff;
    outline: none;
}

.btn {
    display: inline-block;
    background-color: #d45252;
    color: #fff;
    padding: .4em;
    border-radius: 2em;
    margin: 4px;
}

.output {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 1em;
}

.img-btn {
    display: inline-grid;
    align-content: center;
    text-align: center;
    justify-items: center;
}