/* Houdini at-rule for animating the gradient angle */
@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Fallback for browsers that don't support @property */
@supports not (background: paint(something)) {
    :root {
        --gradient-angle: 90deg;
    }
}

:root {
    --bs-font-sans-serif: 'Roboto', sans-serif;
}

html {
    /* Make the page / gradient the full height on big screens */
    min-height: 100vh;
}

body {
    background: var(--bs-orange) linear-gradient(var(--gradient-angle), var(--bs-orange), var(--bs-blue));
    animation: gradient-spin 60s linear infinite;
}

iframe {
    color-scheme: auto;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.comfortaa {
    font-family: 'Comfortaa', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.table,
.table > :not(caption) > * > * {
    color: var(--bs-body-color);
}

.card {
    --bs-card-bg: var(--bs-light);
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    border: 0;
}

.card-title .comment-date {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

a.card-link {
    text-decoration: none;
}

.corners {
    border-radius: 2rem;
}

.ls-none {
    list-style: none;
}

.highlight {
    color: var(--bs-light);
}

.dark-only {
    display: none !important;
}

.light-only {
    display: block !important;
}

.t568-table > tbody > tr:nth-child(1) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(3) > td:nth-child(3) {
    background: repeating-linear-gradient(45deg,
            var(--bs-green),
            var(--bs-green) 10px,
            var(--bs-gray-500) 10px,
            var(--bs-gray-500) 20px) !important;
    color: var(--bs-dark);
}
.t568-table > tbody > tr:nth-child(2) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(6) > td:nth-child(3) {
    background-color: var(--bs-green) !important;
    color: var(--bs-dark);
}
.t568-table > tbody > tr:nth-child(3) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(1) > td:nth-child(3) {
    background: repeating-linear-gradient(45deg,
            var(--bs-orange),
            var(--bs-orange) 10px,
            var(--bs-gray-500) 10px,
            var(--bs-gray-500) 20px) !important;
    color: var(--bs-dark);
}
.t568-table > tbody > tr:nth-child(4) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(4) > td:nth-child(3) {
    background-color: var(--bs-blue) !important;
    color: var(--bs-light);
}
.t568-table > tbody > tr:nth-child(5) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(5) > td:nth-child(3) {
    background: repeating-linear-gradient(45deg,
            var(--bs-blue),
            var(--bs-blue) 10px,
            var(--bs-gray-600) 10px,
            var(--bs-gray-600) 20px) !important;
    color: var(--bs-light);
}
.t568-table > tbody > tr:nth-child(6) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(2) > td:nth-child(3) {
    background-color: var(--bs-orange) !important;
    color: var(--bs-dark);
}
.t568-table > tbody > tr:nth-child(7) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(7) > td:nth-child(3) {
    background: repeating-linear-gradient(45deg,
            var(--bs-warning-text-emphasis),
            var(--bs-warning-text-emphasis) 10px,
            var(--bs-gray-600) 10px,
            var(--bs-gray-600) 20px) !important;
    color: var(--bs-light);
}
.t568-table > tbody > tr:nth-child(8) > td:nth-child(2),
.t568-table > tbody > tr:nth-child(8) > td:nth-child(3) {
    background-color: var(--bs-warning-text-emphasis) !important;
    color: var(--bs-light);
}

img {
    max-width: 100%;
    object-fit: scale-down;
    display: block;
}

a {
    transition: color 0.25s;
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-orange);
}

@media (max-width: 575.98px) {
    .container>.corners {
        border-radius: 0 0 2rem 2rem;
    }
}

@media only print {
    body {
        background: #fff;
    }
}

@media only print and (max-width: 991.98px) {
    #container {
        margin-top: 0 !important;
    }
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bs-body-color: var(--bs-gray-200);
        --bs-border-color: #495057;
        --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    }

    .text-muted, .card-title .comment-date {
        color: var(--bs-gray-500) !important;
    }

    .bg-white, .bg-white .table > :not(caption) > * > * {
        background-color: var(--bs-dark) !important;
    }

    .bg-light {
        background-color: var(--bs-gray-dark) !important;
    }

    .dark-only {
        display: block !important;
    }

    .light-only {
        display: none !important;
    }

    a {
        color: var(--bs-orange);
    }

    a:hover {
        color: var(--bs-primary);
    }
}


@media only screen {
    /* Changes for the Dark Reader browser plugin */
    html[data-darkreader-mode] {
        background-color: initial !important;
    }

    html[data-darkreader-mode=dynamic] body {
        background: var(--darkreader-bg--bs-orange, var(--bs-orange)) linear-gradient(var(--gradient-angle), var(--darkreader-bg--bs-orange, var(--bs-orange)), var(--darkreader-bg--bs-blue, var(--bs-blue)));
    }
}

@media (prefers-reduced-motion) {
    body {
        background: var(--bs-orange) linear-gradient(90deg, var(--bs-orange), var(--bs-blue));
        animation: none;
    }
}

@keyframes gradient-spin {
    from {
        --gradient-angle: 0deg;
    }

    to {
        --gradient-angle: 360deg;
    }
}