/* Colors */

:root {
    --secondary: #f9a911;
    --teriary: #efee00;
}

/* Styles */

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

html {
    background-image: linear-gradient(to left, #f7f, #f77, #fc7, #ff7, #7f7, #7cf, #77f, #c7f, #f7f);
    background-size: 50%;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: "Roboto", sans-serif;
    font-weight: lighter;
}

:any-link {
    --color1: #19004B;
    --color2: #00194B;
    --color3: #000064;
    --colora: #080854;
    background: linear-gradient(
        90deg,
        var(--color1),
        var(--color2),
        var(--color3)
    );
    color: var(--colora);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 500ms color, 500ms background;
}

:any-link:is(:hover,:visited) {
    --color1: #35005B;
    --color2: #00355B;
    --color3: #000084;
    --colora: #0E0E6e;
}

:any-link:active {
    --color1: #4B0019;
    --color2: #4B1900;
    --color3: #640000;
    --colora: #540808;
}

th,
td {
    text-align: center;
}

#ThemeList {
    padding: 0;
    margin: 0;
}

#ThemeList li {
    width: fit-content;
    display: inline-block;
    list-style: none;

}

summary { font-weight: bold; }