:root {
    --color-page-background: #0d0d0d;
    --color-element-background: #111111;
    --color-element-alternate-background: #1d1d1d;
    --color-text: #dddddd;
    --color-dim: #bbbbbb;
    --color-very-dim: #999999;
    --color-border: #444444;
}

body {
    width: 80%;
    margin-inline: auto;

    background-color: var(--color-page-background);
    color: var(--color-text);

	font-size: 14px;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
    line-height: 1.8;
    text-wrap: balance;
}

a {
    color: inherit;
    text-decoration: none;

    border-bottom: 1px solid transparent;
}

a:hover {
    border-bottom: 1px solid currentcolor;
}

a:has(i.bi):hover {
    border-bottom: 1px solid transparent;
}

b {
    font-weight: 600;
}

header {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

header .title {
	line-height: 1;
}

header i.bi-github {
    font-size: 1.3rem;
}

header .bar {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
}

.bar.tight {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
}

main {
    display: flex;
    flex-direction: column;
    gap: 2rem;

	margin-bottom: 2rem;
}

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

.center-block {
	display: flex;
	justify-content: center;
}

.center-inline {
	display: flex;
    flex-direction: column;
	align-items: center;
}

.pull-request {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1.5rem;

	border: 2px solid var(--color-border);
	border-radius: 12px;
	padding: 2rem;

	background-color: var(--color-element-background);

    filter: drop-shadow(var(--color-element-alternate-background) 0 4px 12px);
}

.pull-request.draft {
	background-color: var(--color-element-alternate-background);
}

@media (max-width: 1000px) {
    .pull-request > div:nth-child(3) {
        grid-column: span 2;
    }
}

@media (min-width: 1000px) {
    .pull-request {
        grid-template-columns: 2rem 6rem auto;
    }

    .pull-request > div:nth-child(3) {
        grid-column: auto;
    }
}

.pull-request > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pull-request .title {
	font-size: 16px;
	text-align: left;
}

.text {
    color: var(--color-text);
}

.dim {
    color: var(--color-dim);
}

.very-dim {
    color: var(--color-very-dim);
}

.status-icon {
    font-size: 1.15rem;
    filter: drop-shadow(0 4px 12px);
}

.error {
	color: red;
}

.warn {
	color: orange;
}

.ok {
	color: green;
}

.status-icon.warn {
    font-size: 1.05rem;
}

.hero {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero .title {
    font-size: 48px;
    font-weight: 800;
    text-align: center;
}

.hero p {
    text-align: center;
}

.example {
    margin-block: 2rem;

    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

.example em {
    color: var(--color-text);
    font-style: normal;
}

.example h2 {
    line-height: 1;
    font-weight: 600;
} 

.arrow {
    font-size: 3rem;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-element-background);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    width: 80%;
    max-width: 400px;
    margin-inline: auto;
}

.input-group:focus-within {
    border-color: var(--color-text);
}

.input-group i {
    font-size: 1.25rem;
}

.input-group input {
    width: 100%; 
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    outline: none;
}

.input-group input::placeholder {
    color: var(--color-very-dim);
}

button {
    background: transparent;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
}

.button-inline {
    margin-right: 0.5rem;
}

@media (pointer: coarse) {
    .button-toggle {
        position: relative;
    }

    .button-toggle::after {
        content: ""; 
        position: absolute;

        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
    }
}

.input-group button {
    transition: transform 0.2s ease;
    font-size: 1.25rem;
}

.input-group button:hover {
    transform: translateX(4px);
}