body {
    font-optical-sizing : auto;
    font-weight         : normal;
    font-style          : normal;
}

:root {
    --pico-font-family : "Inter", sans-serif;
}

.caveat-font {
    font-family         : "Caveat", cursive;
    font-optical-sizing : auto;
    font-weight         : 400;
    font-style          : normal;
}

button, [role="button"] {
    --pico-border-radius : 5rem;
}

body {
    background : linear-gradient(hsl(from var(--pico-background-color) h s calc(l + 2)) 0%, var(--pico-background-color) 40%) fixed;
    min-height : 100vh;
}

.material-symbols-sharp {
    font-variation-settings : 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
}

.rhq-logo {
    font-size           : 2rem;
    color               : var(--pico-contrast);
    text-transform      : none;

    font-family         : "Inter", sans-serif;
    font-style          : normal;
    font-weight         : 700;
    font-optical-sizing : auto;
}

.rhq-logo span {
    font-weight : 100;
}

.rhq-logo a, .qhq-logo2 a:hover {
    text-decoration : none;
    color           : inherit !important;
}


table.small, .smaller-font {
    font-size : calc(var(--pico-font-size) * 0.65);
}

table.small th, table.small td {
    padding : calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
}

table.extra-small {
    font-size : calc(var(--pico-font-size) * 0.5);
}

table.extra-small th, table.extra-small td {
    padding : calc(var(--pico-spacing) * 0.2) calc(var(--pico-spacing) * 0.4);
}

tbody th {
    font-weight : 600;
}

.linked {
    display : flex;
}

.linked > div {
    flex : 1;
}

.linked > a {
    width    : 3rem;
    position : relative;
}

.linked > a::after {
    position            : absolute;
    top                 : calc(50% - 1rem);
    right               : 0;
    display             : block;
    width               : 2rem;
    height              : 2rem;
    transform           : rotate(-90deg);
    background-image    : var(--pico-icon-chevron);
    background-position : right center;
    background-size     : 2rem auto;
    background-repeat   : no-repeat;
    content             : "";
    transition          : transform var(--pico-transition);
}

@media only screen and (min-width : 600px) {
    .grid-2 {
        grid-template-columns : repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns : repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns : repeat(4, 1fr);
    }

    .grid-5 {
        grid-template-columns : repeat(5, 1fr);
    }
}

div.icon-links {
    display         : flex;
    gap             : var(--pico-spacing);
    justify-content : center;
    margin-bottom   : var(--pico-spacing);
}

a.icon-link {
    font-size       : .8rem;
    text-transform  : uppercase;
    text-decoration : none;
    display         : inline-flex;
    align-items     : center;
}

a.icon-link:hover {
    color : var(--pico-contrast);
}

a.icon-link span {
    font-size    : 1.8rem;
    margin-right : 0.2rem;
}

.grid.icon-buttons button, .grid.icon-buttons [role="button"] {
    --pico-border-radius : 0.25rem;
}

.grid.icon-buttons span.material-symbols-sharp {
    font-size : 2rem;
}