:root {
    --font-size-h1:     2.027rem;
    --font-size-h5:     1.266rem;
    --font-size-h6:     1.125rem;
    --font-size-base:   1rem;
    --font-size-small:  0.889rem;

    --color-background:     #14191f;
    --color-on-background:  #f1f3f5;
    --color-focus:          #08f;
    --color-link:           #208bfe;
}

html {
    font-family:        system-ui, Helvetica, Arial, sans-serif;
    font-size:          var(--font-size-base);
    background-color:   var(--color-background);
    color:              var(--color-on-background);
}

html, 
body {
    margin: 0;
    height: 100%;
}

body {
    display:        flex;
    flex-direction: column;
}

header {
    text-align: center;
}

h1 {
    font-size:  var(--font-size-h1);
    margin:     1rem auto;
}

h6 {
    font-size:      var(--font-size-h5);
    font-weight:    normal;
    margin:         0;
}

a {
    color: var(--color-link);
}

p {
    margin: 0;
}

main {
    display:    block;
    margin:     0 auto;
}

table {
    margin: 0 auto;
}

tr {
    line-height: 2;
}

label {
    margin-right: 10px;
}

input,
button {
    font-size:      1.125rem;
    padding:        10px;
}

input[type=text] {
    color:              var(--color-on-background);
    background-color:   #1e2936;
    border-radius:      8px;
    border-color:       #00000000;
    border-width:       2px;
}

input[type=text]::placeholder {
    color: #788ea5;
}

input[type=text]:focus {
    border-color:   var(--color-focus);
    outline:        none;
}

input[type="radio"] {
    accent-color:   var(--color-focus);
}

button {
    cursor:         pointer;
    background:     #208bfe;
    color:          var(--color-on-background);
    border:         0px solid black;
    padding:        13px 20px;
    border-radius:  8px;
    font-weight:    600;
}

button:hover,
button:disabled {
    background: #4ca2fe;
}

button:disabled {
    cursor: not-allowed;
}

footer {
    width: 			100%;
    text-align:		center;
    font-size:      var(--font-size-small);
    margin-top: 	auto; 
    padding-bottom:	16px;
}

#button-list {
    width: 100%;
}

#status-message {
    visibility: hidden;
    width:      100%;
    text-align: center;
}

#support {
    font-size:      1.125rem;
    width:          100%;
    text-align:     center;
    margin:         32px 0;
}

#controls-top,
#controls-bottom {
    margin:     32px 0;
    visibility: hidden;
}

#input-filter {
    margin-top: 32px;
}

.center{
    text-align: center;
}

.error {
    color: #f52958;
}

.card {
    display:            flex;
    flex-direction:     row;
    align-items:        center;
    padding:            16px;
    margin:             16px;
    max-width:          40ch;
    border:             1px solid #2e4052;
}

.avatar {
    width:          48px;
    height:         48px;
    border-radius:  50%;
    overflow:       hidden;
    margin-right:   16px;
    align-self:     start;
    min-width:      48px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    flex-grow: 0;
}

.content h6 {
    font-weight: bold;
}

.handle {
    font-size:  var(--font-size-h6);
    color:      #aebbc9;
}

.description {
    font-size:      var(--font-size-base);
    line-height:    1.35;
    padding-top:    16px;
}