:root {
    --links: #F26522;
    --terminal-text: #dbdbdb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --links: #F26522;
    }
}

h1 {
    display: flex;;
    align-items: center;
    justify-content: center;
}

h1 .icon {
    width: 60px;
    height: 60px;
    color: var(--links);
    margin-right: 10px;
}

header h2 {
    margin-top: 0;
    font-weight: normal;
}

.form-row {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.form-label {
    margin-right: 10px;
    min-width: 125px;
    font-weight: bold;
    text-align: right;
}


input {
    width: 100%;
    max-width: 400px;
}

.services {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5px;
    justify-content: space-between;
}

.service {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9em;
}

.service .icon {
    width: 50px;
    height: 50px;
}

.service.active {
    color: var(--links);
}

.service:hover,
.service:hover svg {
    fill: var(--links);
    color: var(--links)!important;
    cursor: pointer;
}

.service .icon {
    margin-bottom: 3px;
}

.service-mb { fill: #FFA900; }
.service-mastodon { fill: #5B4DE3; }
.service-webhook { fill: #37b24d }
.service-omnivore { fill: #FFDE8C; }
.service-github { fill: #f5f5f5; }
.service-linkace svg { color: #41649a; }
.service-webmention svg { color: #dddddd; }

.form-services .form-row {
    display: none;
}

body:has(.service-mb.active) .form-services .form-row-mb {
    display: flex;
}

body:has(.service-mastodon.active) .form-services .form-row-masto {
    display: flex;
}

body:has(.service-webhook.active) .form-services .form-row-hook {
    display: flex;
}

body:has(.service-omnivore.active) .form-services .form-row-omnivore {
    display: flex;
}

body:has(.service-github.active) .form-services .form-row-github {
    display: flex;
}

body:has(.service-linkace.active) .form-services .form-row-linkace {
    display: flex;
}

body:has(.service-webmention.active) .form-services .form-row-webmention {
    display: flex;
}

.form-services .form-row-submit {
    display: flex;
}

.terminal-output {
    position: relative;
    border-radius: 10px;
    white-space: pre-wrap;
    background-color: #151818;
    padding: 15px 24px 0 24px;
    height: 180px;
    color: var(--terminal-text);
}

.buttons {
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
}

.buttons .circle {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 7px;
}

.circle.red { background: #FF5F56; }
.circle.yellow { background: #FFBD2E; }
.circle.green { background: #27C93F; }

.banner {
    display: flex;
    border: 3px solid var(--links);
    padding: 10px;
    font-size: 1.2em;
    align-items: center;
}

.banner p {
    margin-top: 0;
    margin-bottom: 0;
}

.banner svg {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}