:root {
    color-scheme: dark;
    /* === Start === Variable definitions === */

    /* Sizes */
    --line-width: 0.125rem;
    --line-width-thick: 0.25rem;
    --line-width-thin: 0.0625rem;
    --space: 1rem;
    --space-half: 0.5rem;
    --space-quarter: 0.25rem;
    --space-big: 1.5rem;
    --outline-size: 0.125rem;
    --underline-size: 0.1rem;
    --underline-offset: 0.25em;
    --logo-size: 3.5rem;
    --bor-size: 0.135rem;
    --hr-size: 0.0625em;
    --gamerpic-size: 70vmin;

    --radius: 0;

    /* Font sizes & weights*/
    --fs-default: 1rem;
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /* Font Families */
    --f: "Segoe UI", system-ui, Arial, Helvetica, sans-serif;
    --f-mono: "DejaVu Sans Mono", monospace, monospace;

    /* Colors */
    --light-color: white;
    --dark-color: black;
    --accent-color: deeppink;
    --green-color: green;
    --pink-color: hotpink;
    --grey-color: hsl(0, 0%, 18%);
    --event-color: hsl(0, 0%, 20%);
    --event-title-color: hsl(240, 100%, 10%);
    --numbers-color: hsl(0, 0%, 72%);
    --even-color: hsl(0, 0%, 6%);
    --odd-color: hsl(0, 0%, 3%);
    --url-color: darkgoldenrod;
    --selection-color: dodgerblue;
    --r-color: lightpink;
    --g-color: lightgreen;
    --b-color: lightblue;
    --fg-color: hsl(0, 0%, 60%);

    --divider: 0.0625rem dashed var(--accent-color, deeppink);

    /* Background colors */
    --bg-color: var(--dark-color, black);
    --bg-hover-color: hsl(0, 0%, 35%);
    --bg-heading-color: hsl(349, 100%, 5%);

    --bg-nav-color: hsl(43, 89%, 5%);
    --bg-theme-bar-color: var(--dark-color);
    --bg-grey-color: hsl(0, 0%, 25%);
    --bg-link-index-color: hsl(240, 100%, 10%);
    --bg-faq-color: hsl(49, 31%, 10%);
    --bg-ul-color: hsl(0, 0%, 7%);
    --bg-button-color: hsl(0, 0%, 20%);
    --bg-button-img-color: var(--bg-button-color);
    --bg-games-installed-color: hsl(120, 100%, 10%);
    --bg-games-console-color: hsl(287, 100%, 10%);
    --bg-games-title-color: hsl(0, 0%, 10%);
    --bg-games-number-color: hsl(200, 100%, 10%);
    --bg-summaryq-color: hsl(0, 0%, 13%);

    /* Background colors (translucent) */
    --bg-email-subject-color: hsl(290, 100%, 5%);
    --bg-email-subject2-color: hsl(195, 100%, 5%);

    /* Misc */
    --fade-duration: 2s;
}

.music-dash {
    display: none;
}

@media (width < 600px) {
    :root {
        /* === Start === Variable definitions small screen=== */

        /* Sizes */
        --space: 0.5rem;
        --space-half: 0.25rem;
        --space-quarter: 0.125rem;
        --space-big: 1rem;
        --outline-size: 0.1rem;
    }

    .music-dots {
        display: none;
    }

    .music-dash {
        display: inline;
    }
}

::selection {
    background-color: var(--selection-color, dodgerblue);
    color: var(--light-color, white);
    background-image: none;
    background-clip: unset;
    text-shadow: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--light-color, white);
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    /* font-size: var(--fs-default, 1.125rem); */
    font-family: var(--f);
    font-weight: var(--fw-400, 400);
}

.games-container,
html {
    scrollbar-color: hsl(330, 100%, 71%) transparent;
}

body {
    min-width: 350px;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color, hsl(0, 0%, 5%));
    color: var(--fg-color, hsl(0, 0%, 60%));
}

section,
.table-list,
.std-mar {
    margin: var(--space) var(--space) 0 var(--space);
}

main,
#main-content,
#skip-nav,
#content,
.no-outline {
    outline: none;
}

#skip-nav {
    height: 0;
}

.box {
    font-family: var(
        --f-mono,
        "DejaVu Sans Mono",
        "Lucida Console",
        monospace,
        monospace
    );
    font-style: italic;
    background-color: var(--bg-faq-color, hsl(49, 31%, 10%));
    padding: var(--space);
    /* border: var(--line-width) solid var(--accent-color); */
    /* border-radius: var(--radius); */
    hyphens: none;
}

::marker {
    color: var(--accent-color);
    font-weight: var(--fw-900, 900);
}

strong,
.strong {
    font-weight: var(--fw-500, 500);
    color: var(--light-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    margin: 0;
}

P {
    text-wrap: pretty;
}

.theme-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: var(--bg-theme-bar-color);
    padding: 0 0.5rem 0.25rem 0.1rem;
}

@media (width > 599px) {
    [data-width="45ch"] {
        width: clamp(50% - 1rem, 50ch - 2rem, 98%);
        margin-inline: auto;
    }

    [data-width="60ch"] {
        width: clamp(60% - 1rem, 65ch - 2rem, 98%);
        margin-inline: auto;
    }
}

@media (width < 600px) {
    section,
    .table-list,
    .std-mar {
        margin: 0.5rem;
    }

    .section-header {
        margin-top: var(--space-half);
    }

    [data-width="45ch"],
    [data-width="60ch"] {
        width: clamp(35ch, 100% - 1rem, 98%);
        margin-inline: auto;
    }
}

.small-box,
.small-box2 {
    text-align: center;
    background-color: var(--even-color);
    /* border-radius: var(--radius); */
}

.small-box {
    margin-block: 0;
    padding: var(--space, 1rem);
}

.small-box2 {
    padding: var(--space-half, 0.5rem);
    margin-block-start: var(--space, 1rem);
}

.nowrap {
    white-space: nowrap;
}

span.pointer-type::after {
    content: "Not Supported";
}

span.hover-type::after {
    content: "None";
}

@media (pointer: fine) {
    span.pointer-type::after {
        content: "Fine";
    }
}

@media (hover: hover) {
    span.hover-type::after {
        content: "Hover";
    }
}

.hide {
    display: none;
}

.hide-vis {
    visibility: hidden;
}

.heading,
.heading span {
    display: flex;
    align-items: center;
    background-color: var(--bg-heading-color);
    /* padding: var(--space-half) var(--space) var(--space-half) var(--space); */
}

.heading span {
    padding-left: var(--space);
}

/* .heading-title {
	line-height: .8em;
	} */

.logotext {
    font-weight: var(--fw-600, 600);
    color: var(--pink-color, hsl(328, 100%, 54%));
}

.heading-logo {
    display: flex;
    align-items: center;
    z-index: 100;
    margin-inline-start: auto;
}

#logo {
    margin: var(--space-half) var(--space);
    width: var(--logo-size);
    height: var(--logo-size);
    filter: brightness(75%);
}

.footing {
    color: var(--fg-color);
    background-color: var(--bg-heading-color);
    padding: 0.25rem 0.5rem;
}

.list-table > .list-col:nth-child(odd),
.event-title-table > .event:nth-child(odd),
.log-table > .log:nth-child(odd),
.music-table > .music:nth-child(even) {
    background-color: var(--odd-color);
}

.list-table > .list-col:nth-child(even),
.event-title-table > .event:nth-child(even),
.log-table > .log:nth-child(even),
.music-table > .music:nth-child(odd) {
    background-color: var(--even-color);
}

.hol-tab {
    margin-left: auto;
    margin-right: auto;
}

/* First */
/* #ypast,
	.list-table>.list-col:first-child,
	.event-table>.event-title:first-child,
	.log-table>.log:first-child,
	.link-index {
	border-radius: var(--radius) var(--radius) 0 0;
	border-left: var(--bor-size) solid var(--accent-color);
	border-right: var(--bor-size) solid var(--accent-color);
	border-top: var(--bor-size) solid var(--accent-color);
	} */

/* Last */
/* .list-table>.list-col:last-child,
	.event-table>.event-title-table:last-child>.event:last-child,
	.log-table>.log:last-child,
	.music-table>.music:last-child,
	.link-table>.link-box>.link-detail:last-child {
	border-radius: 0 0 var(--radius) var(--radius);
	border-left: var(--bor-size) solid var(--accent-color);
	border-right: var(--bor-size) solid var(--accent-color);
	border-bottom: var(--bor-size) solid var(--accent-color);
	}

	.link-title,
	.link-detail,
	.list-table>.list-col,
	.event-title-table>.event,
	.log-table>.log,
	.music-table>.music {
	border-left: var(--bor-size) solid var(--accent-color);
	border-right: var(--bor-size) solid var(--accent-color);
	} */

/* Only */
/* .list-table>.list-col:only-child,
	.event-table>.event:only-child,
	.log-table>.log:only-child,
	.music-table>.music:only-child,
	.intro:not(ul),
	.small-box,
	.small-box2,
	.email-subject,
	.email-subject2 {
	border-radius: var(--radius);
	border: var(--bor-size) solid var(--accent-color);
	} */

/* .event-title,
	.link-index {
	border: var(--bor-size) solid var(--accent-color);
	} */

/* Back to index text, Music, Bookmarks */
.to_index {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: var(--fw-600, 600);
    color: currentColor;
    hyphens: none;
    white-space: nowrap;
    transition: all 0.25s linear;
}

.event-title {
    color: var(--fg-color);
    background-color: var(--event-title-color);
}

.fix-height {
    position: relative;
    top: -0.05em;
}

.fix-height1 {
    position: relative;
    top: -0.1em;
}

.fix-height2 {
    /* position: relative; */
    margin-top: -0.65em;
}

.right-gap {
    margin-right: 0.4em;
}

.left-gap {
    margin-left: 0.4em;
}

.linux-extra {
    font-weight: var(--fw-700, 700);
    color: hsl(33, 100%, 50%);
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background-color: var(--bg-nav-color);
    padding: 0.5rem;
    row-gap: 0.2em;
    column-gap: 0;
    margin: 0;
    outline: none;
    letter-spacing: 0.02rem;
}

#navigation1 {
    padding-top: 0.125rem;
}

#navigation3,
#navigation10,
#navigation20,
#section {
    padding-block-start: 0.125rem;
}

.url-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.2em;
    margin: var(--space-half) 0 0 0;
    line-height: normal;
}

.url-button {
    padding: 0.25rem 0.5rem;
}

.navigation-button,
.navigation-button-index,
.navigation-button-index-label {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg-color);
    text-decoration-thickness: var(--underline-size);
    text-decoration-color: var(--url-color);
    text-underline-offset: var(--underline-offset);
    border: 0.0625rem solid transparent;
    cursor: pointer;
    transition: all 0.5s linear;
}

.hover,
.theme-button,
.skip-button {
    color: var(--fg-color);
    text-decoration-thickness: var(--underline-size);
    text-decoration-color: var(--url-color);
    text-underline-offset: var(--underline-offset);
    cursor: pointer;
    transition: all 0.5s linear;
}

.url-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: .7rem; */
    color: var(--fg-color);
    text-decoration: underline;
    text-decoration-color: var(--url-color);
    text-decoration-thickness: var(--underline-size);
    text-underline-offset: var(--underline-offset);
    border: 0.0625rem solid transparent;
    cursor: pointer;
    transition-property:
        transform, background-color, border-color, text-decoration-color, color;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}

.theme-button {
    text-decoration-thickness: var(--underline-size);
    text-underline-offset: var(--underline-offset);
}

.navigation-button-index,
.navigation-button-index-label {
    padding: 0.25rem 0.5rem;
    /* font-size: .7rem; */
}

.navigation-button-index-label {
    border: none;
    color: lightskyblue;
    cursor: default;
    font-variant: normal;
}

.navigation-button-img {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 0.2em;
    place-items: stretch center;
    place-content: center stretch;
    padding: 0.5em 0.5em 0.25em 0.5em;
    text-decoration-thickness: var(--underline-size);
    text-decoration-color: var(--url-color);
    text-underline-offset: var(--underline-offset);
    cursor: pointer;
    /* outline-offset: -3rem; */
    border: 0.0625rem solid transparent;
    transition: all 1s linear;
}

/* .navigation-button-img:focus-visible {
	outline-offset: .1rem;
	} */

.navigation-button-img:is(:hover, :focus-visible) {
    background-color: hsla(0, 0%, 100%, 0.07);
    filter: none;
}

.navigation-button-img-label {
    /* font-size: .7rem; */
    color: var(--fg-color);
    text-align: center;
    transition: all 1s linear;
}

.navigation-button-img-label-no-ul {
    display: inline-block;
    text-decoration-color: transparent;
}

.navigation-button-img:is(:hover, :focus-visible) .navigation-button-img-label {
    color: var(--light-color);
    border-color: var(--fg-color);
    text-shadow: none;
}

.navigation-button-img img {
    /* transform: scale(1); */
    transition-property: transform, filter;
    transition-duration: 1s;
    transition-timing-function: linear;
}

/* .menu:focus-visible {
	outline-offset: 0;
	} */

.menu {
    /* font-size: .7rem; */
    color: var(--fg-color);
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    text-decoration-thickness: var(--underline-size);
    text-decoration-color: var(--url-color);
    text-underline-offset: var(--underline-offset);
    letter-spacing: 0.02em;
    cursor: pointer;
    /* outline-offset: -3rem; */
    border: 0.0625rem solid transparent;
    transition: all 1s linear;
}

.menu:is(:hover, :focus-visible) img {
    filter: brightness(175%);
    transition-property: transform, filter;
    transition-duration: 1s;
    transition-timing-function: linear;
}

.menu:is(:hover, :focus-visible) {
    color: var(--light-color);
    border-color: var(--fg-color);
    background-color: hsla(0, 0%, 100%, 0.15);
    text-decoration-color: transparent;
    text-shadow: none;
}

.menu-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.2em;
    padding-top: 1em;
    text-align: center;
}

.linkseperator {
    color: var(--accent-color);
}

/* @media (prefers-reduced-motion: no-preference) and (not (pointer: coarse)) { */
@media (prefers-reduced-motion: no-preference) {
    .navigation-button-img:is(:hover, :focus-visible) img {
        z-index: 100;
        filter: brightness(175%);
    }

    .navigation-button-img:is(:hover, :focus-visible) img,
    .menu:is(:hover, :focus-visible) img {
        animation-name: rotate-img;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .menu:is(:hover, :-visible) .nowrap,
    .navigation-button-index:is(:hover, :focus-visible) .nowrap,
    .url-button:is(:hover, :focus-visible) .nowrap {
        animation-name: rotate-link;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
    }

    @keyframes rotate-img {
        to {
            rotate: 0 1 0 360deg;
        }
    }

    @keyframes rotate-link {
        to {
            rotate: 0 1 0 360deg;
        }
    }
}

@media (width < 450px) {
    .small-box {
        font-size: 80%;
    }
}

.section-header {
    font-weight: var(--fw-700, 700);
}

.section-header-text {
    text-transform: capitalize;
    color: hsl(0, 0%, 70%);
    margin-block-start: 0;
    margin-block-end: var(--space);
    padding-bottom: 0.0625em;
    border-bottom: 0.1875rem double var(--green-color);
    /* max-width: 12em; */
}

.log-table {
    /* border-radius: var(--radius); */
    margin-bottom: var(--space);
}

.log {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--space-half);
    line-height: 1.5em;
}

.log .number {
    text-align: right;
    letter-spacing: 0.1em;
    min-width: 3.5em;
}

.log .log-text {
    flex-grow: 1;
}

.list-table {
    /* border-radius: var(--radius); */
    margin-block-start: var(--space);
}

.list-col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-block: 0.35rem;
}

.list-title {
    text-align: right;
    text-decoration-color: transparent;
    hyphens: auto;
    color: hsl(0, 0%, 85%);
    margin-inline-end: 0;
    padding-inline-start: var(--space);
    min-width: 6em;
    max-width: 6em;
}

.list-sep,
.log .log-sep {
    display: inline;
    font-weight: var(--fw-900, 900);
    color: var(--accent-color);
    padding-inline: 0.5rem;
    vertical-align: top;
}

.list-detail {
    flex-grow: 1;
    padding-inline-end: var(--space);
}

.menu:not(:hover, :focus-visible) img:not(:hover, :focus-visible),
.navigation-button-img img,
.dropshadow {
    filter: drop-shadow(0.0625rem 0.0625rem 0.0625rem var(--dark-color))
        drop-shadow(0.125rem 0.125rem 0.125rem var(--dark-color));
}

.games-title-highlight {
    text-shadow: none;
    box-shadow: 0.15rem 0.15rem var(--dark-color);
}

/* .link-index:is(:hover, :focus-visible) span {
	text-shadow: none;
	filter: none;
	} */

@media (width > 599px) {
    .list-title {
        min-width: 11em;
        max-width: 11em;
    }
}

/* .music-table {
	border-radius: var(--radius);
	} */

.music-track {
    cursor: pointer;
    display: block;
    font-size: 0.8rem;
    color: var(--fg-color);
    padding: 1.5vmin;
    padding-left: 2em;
    text-decoration-color: transparent;
}

.music-track {
    transition: all 0.5s linear;
}

.music-track-decoration {
    text-decoration: underline;
    text-decoration-color: var(--url-color);
    text-decoration-thickness: var(--underline-size);
    text-underline-offset: var(--underline-offset);
    /* border-radius: var(--radius); */
}

.the {
    color: var(--fg-color);
}

.music-track:is(:hover, :focus-visible) .the {
    color: hsla(0, 0%, 0%, 0.8);
}

.games-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 0.2em;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* border-radius: var(--radius) 0 0 var(--radius); */
    padding: 0 0.5em 0.5em 0.5em;
}

/* @media (prefers-reduced-motion: no-preference) and (not (pointer: coarse)) { */
@media (prefers-reduced-motion: no-preference) {
    img#logo {
        opacity: 0;
        rotate: 0 1 0 180deg;
        animation-name: fade;
        animation-duration: var(--fade-duration);
        animation-delay: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: linear;
    }

    @keyframes fade {
        to {
            rotate: 0 1 0 360deg;
            opacity: 1;
        }
    }

    .games-container {
        scroll-behavior: smooth;
    }
}

.games-container .games {
    display: flex;
    flex-direction: column;
    width: 12em;
    padding: 0.25em;
    /* border-radius: var(--radius); */
    background-color: var(--bg-grey-color);
    gap: 0.25em;
}

.games-container .games-header {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.25em;
}

.games-container .games-number {
    text-align: center;
    padding: 0.25em 0.5em;
    /* border-radius: var(--radius); */
    width: 2.5em;
    background-color: var(--bg-games-number-color);
}

.games-container .games-installed {
    flex-grow: 1;
    text-align: center;
    padding: 0.25em 0.5em;
    /* border-radius: var(--radius); */
    background-color: var(--bg-games-installed-color);
}

.games-container .games-title {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space);
    height: 6em;
    /* border-radius: var(--radius); */
    background-color: var(--bg-games-title-color);
}

.games-container .games-console {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* border-radius: var(--radius); */
    padding: 0.25rem 0.5rem;
    background-color: var(--bg-games-console-color);
}

.games-container .games-title-highlight {
    margin-inline-end: 0.0625em;
    padding-inline: 0.125em;
    color: var(--bg-games-title-color);
    background-color: var(--fg-color);
    font-weight: var(--fw-800, 800);
}

.games-container .games-type {
    margin-inline-start: 0.25em;
    font-weight: var(--fw-600, 600);
}

.gamerpic {
    width: var(--gamerpic-size);
    height: var(--gamerpic-size);
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    filter: brightness(75%);
}

.pic {
    width: 85%;
}

#gamercard {
    width: 100%;
    filter: brightness(65%);
}

.sub-title,
.data-heading {
    display: inline-block;
    font-weight: var(--fw-700, 700);
    text-transform: capitalize;
    margin-block: var(--space-half);
    /* margin-inline-end: var(--space); */
    /* border-radius: var(--radius); */
    /* text-decoration: underline var(--accent-color) wavy .04em; */
    text-underline-offset: -0.01em;
    text-underline-position: under;
}

.data-heading {
    margin-block: 0;
    padding-bottom: 0.0625em;
    border-bottom: 0.1875rem double deeppink;
    /* max-width: 12em; */
}

.sub-title {
    padding-bottom: 0.0625em;
    border-bottom: 0.1875rem double deeppink;
}

.sub-title span {
    text-transform: lowercase;
}

/* .data-heading {
	max-width: fit-content;
	} */

.center {
    text-align: center !important;
}

.divider {
    height: 0;
    /* margin-bottom: var(--space); */
    margin-block: var(--space);
    border: 0;
    border-bottom: var(--divider);
}

/* .divider2 {
	height: 0;
	margin-block: 0;
	margin-inline: 4ch;
	border: 0;
	border-bottom: var(--divider);
	} */

.divider-pink {
    margin-block: clamp(0.25em, 2vmax, 1.5em);
    border-bottom: var(--bor-size) solid transparent;
    border-image: linear-gradient(to right, var(--pink-color-line-colors));
    border-image-slice: 1;
    width: 100%;
}

/* 
.link-box a.link-title {
	padding: var(--space-half) var(--space);
	background: var(--odd-color);
	display: block;
	text-underline-offset: var(--underline-offset);
	transition: all .25s linear;
} */

/* .link-box a.link-detail {
	text-decoration-color: transparent;
	font-weight: var(--fw-200, 200);
	color: var(--fg-color);
	background: var(--even-color);
	padding: var(--space-half) var(--space);
	display: block;
	line-height: 1.5em;
	transition: all .25s linear;
} */

.music-index {
    display: block;
    text-align: left;
    color: var(--fg-color);
    font-weight: var(--fw-600, 600);
    padding: var(--space-half);
    /* margin-block-start: var(--space); */
    background-color: var(--bg-link-index-color);
    text-decoration-color: transparent;
    transition: background-color 0.25s linear;
}

.skip-button {
    position: absolute;
    color: var(--fg-color);
    border: none;
    padding: 0.25em 0.5em;
    margin-top: 1em;
    margin-left: 1em;
    background-color: var(--dark-color);
    font-style: italic;
    cursor: help;
    z-index: 10;
    outline: none;
    text-decoration-color: transparent;
    transform: translateX(-200%);
    transition: transform 325ms linear;
}

.skip-button:focus-visible {
    transform: translateX(0);
}

.word-break,
ul .intro,
ul .intro li,
.section-detail {
    hyphens: auto;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.wiki {
    padding: 0.1em 0 0.2em;
    text-align: left;
    font-weight: var(--fw-600, 600);
    /* font-size: .75rem; */
    text-align: center;
}

.ofcom {
    font-weight: var(--fw-600, 600);
    color: var(--accent-color);
}

summary {
    cursor: pointer;
    padding: var(--space-quarter) var(--space) var(--space-quarter) 0.5em;
    /* border-radius: var(--radius); */
    color: var(--fg-color);
    font-weight: var(--fw-600, 600);
    list-style-position: outside;
}

.summaryq {
    font-weight: var(--fw-600, 600);
    letter-spacing: 0.0625em;
    margin-inline-end: 0.5em;
}

.numeric-list {
    font-family: var(
        --f-mono,
        "DejaVu Sans Mono",
        "Lucida Console",
        monospace,
        monospace
    );
    color: var(--numbers-color);
    font-style: normal;
    font-weight: var(--fw-800, 800);
}

span.button,
span.button2,
span.button3 {
    padding: 0.1em 0.5em 0 0.5em;
    font-style: normal;
    font-weight: var(--fw-800, 800);
    background-color: hsl(244, 100%, 50%);
    border-radius: 1rem;
    min-width: 2rem;
}

span.button2 {
    color: var(--dark-color);
    background-color: var(--fg-color);
}

span.button3 {
    background-color: hsl(240, 100%, 20%);
}

.mono {
    font-family: var(
        --f-mono,
        "DejaVu Sans Mono",
        "Lucida Console",
        monospace,
        monospace
    );
}

kbd {
    font-style: italic;
    background: hsl(328, 100%, 20%);
    border-radius: 0.3em;
    padding-inline: 0.3em;
    box-shadow: 0.125rem 0.125rem 0 0.0625rem hsl(328, 100%, 30%);
    margin-inline-end: 0.35ch;
}

.char-space {
    letter-spacing: 0.1em;
}

.char-space-half {
    letter-spacing: 0.005em;
}

a.link-title {
    text-decoration-color: var(--url-color);
    text-decoration-thickness: var(--underline-size);
    color: currentColor;
    cursor: pointer;
}

@media (not (pointer: coarse)) and (min-width: 600px) {
    .navigation {
        margin: 0;
    }

    #navigation1 {
        padding-top: 0.125rem;
    }
}

.or::after {
    content: "\00a0 and \00a0";
}

@media (width < 600px) {
    .char-space {
        letter-spacing: normal;
    }

    .or::after {
        display: block;
        content: " ";
    }

    .log .number {
        font-size: 65%;
        /* min-width: 3em; */
    }
}

.faq {
    font-weight: var(--fw-400, 400);
    /* border-radius: var(--radius); */
    background-color: transparent;
}

.faq ol,
.faq ul {
    /* border: var(--line-width) solid var(--accent-color); */
    /* border-radius: var(--radius); */
    padding: var(--space) var(--space-big) var(--space);
    margin-block-end: 0;
    list-style: none;
    background-color: var(--bg-faq-color);
}

ul.sky-glass > li {
    text-align: center;
    padding: 0.5em 1em;
    background-color: hsla(0, 0%, 0%, 50%);
    /* border-left: var(--line-width) solid var(--accent-color);
		border-right: var(--line-width) solid var(--accent-color); */
    list-style-type: none;
}

/* ul.sky-glass>li:nth-child(1) {
border-top: var(--line-width) solid var(--accent-color);
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
} */

/* ul.sky-glass>li:not(:last-child) {
	border-bottom: var(--line-width) dashed var(--accent-color);
	} */

/* ul.sky-glass>li:last-child {
	border-bottom: var(--line-width) solid var(--accent-color);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	} */

.faq ol {
    list-style: decimal;
    margin-block: var(--space);
}

.faq ul {
    margin-block: var(--space);
}

.faq li.li-faq {
    line-height: 1.3em;
    border-bottom: var(--line-width) dashed var(--accent-color);
    padding-block-end: var(--space-half);
    padding-inline-start: 0.5em;
    margin-block-end: var(--space-half);
    margin-inline-start: 1em;
}

.faq li.li-faq::before {
    content: "";
    font-weight: var(--fw-800, 800);
}

.faq li.li-faq:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.faq-date {
    /* font-size: .75rem; */
    font-style: italic;
    font-weight: var(--fw-600, 600);
    /* color: var(--fg-color); */
    padding-block-end: var(--space-quarter);
    margin-top: var(--space);
    border-top: 0.1rem dashed var(--accent-color);
}

li:last-child,
li:only-child {
    border: 0;
    padding-block-end: 0;
    margin-block-end: 0;
}

@media (width < 600px) {
    .box {
        font-size: 0.8rem;
    }
}

.pad0 {
    padding: 0 !important;
}

.padb0 {
    padding-block-end: 0 !important;
}

.padt0 {
    padding-block-start: 0 !important;
}

.mar0 {
    margin: 0 !important;
}

.marb0 {
    margin-block-end: 0 !important;
}

.mart0 {
    margin-block-start: 0 !important;
}

.bor0 {
    border: 0 !important;
}

.bort0 {
    border-top: 0 !important;
}

a.continue {
    color: var(--fg-color);
    text-decoration-color: transparent;
    font-weight: var(--fw-600, 600);
    /* border: var(--line-width) solid var(--accent-color); */
    /* border-radius: var(--radius); */
    padding: 0.25em 0.5em 0.25em;
    background-color: hsl(0, 100%, 25%);
    background-image: linear-gradient(to right, var(--continue-button-colors));
    font-size: 1.2rem;
}

.email-address {
    font-size: 2rem;
    margin-block: var(--space);
    text-underline-offset: initial;
    line-height: initial;
}

.email-subject,
.email-subject2 {
    text-align: center;
    padding: var(--space);
    /* border-radius: var(--radius); */
    margin-block: var(--space);
}

.email-subject {
    background-color: var(--bg-email-subject-color);
}

.email-subject2 {
    background-color: var(--bg-email-subject2-color);
}

/* .event-table {
	border-radius: var(--radius);
	} */

.event,
.event-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--event-color);
    padding: 0 0.5em 0.35em;
    outline: none !important;
}

.periodical {
    position: relative;
    top: -0.35rem;
    font-size: 0.5rem;
    color: var(--bg-grey-color);
}

.name {
    flex-grow: 1;
    color: var(--fg-color);
}

.ymwd-title,
.ymwd-entry {
    position: relative;
    top: 0.15rem;
    text-align: center;
    font-weight: var(--fw-800, 800);
    min-width: 1.4em;
}

.ymwd-title:nth-child(even),
.ymwd-entry:nth-child(even) {
    color: var(--g-color) !important;
}

.ymwd-title:nth-child(odd),
.ymwd-entry:nth-child(odd) {
    color: var(--r-color) !important;
}

.event-img {
    display: inline-block;
    text-align: center;
    margin-inline-end: 0.5em;
}

.bh {
    position: relative;
    top: -0.1rem;
    font-size: 0.5rem;
    font-weight: var(--fw-900, 900);
    letter-spacing: 0.2em;
    padding-left: 0.15em;
    margin-right: 0.1em;
    color: var(--b-color);
    background-color: hsl(240, 100%, 40%);
    box-shadow: 0.15rem 0.15rem var(--dark-color);
}

.event-red {
    color: var(--r-color);
    font-weight: var(--fw-600, 600);
}

.event-pink {
    color: var(--pink-color, hsl(328, 100%, 54%));
    font-weight: var(--fw-600, 600);
}

.event-black {
    color: var(--fg-color);
}

@media (width < 600px) {
    .event,
    .event-title {
        font-size: 0.75rem;
        padding: 0.125em 0.125em 0.25em 0.125em;
    }
}

div.intro {
    background-color: var(--even-color);
    /* border-radius: var(--radius); */
    padding: var(--space);
}

ul.intro {
    margin-block: 0;
    color: var(--faq-border-color);
}

/* Small screens */
.hide-item {
    display: inline;
}

/* Small screens */
.unhide-item {
    display: none;
}

@media (width < 600px) {
    .heading-title {
        text-align: center;
    }

    ul li .word-break,
    ol li .wosrd-break,
    ul .intro li {
        font-size: 0.9rem;
    }

    .list-table,
    .log {
        font-size: 0.9rem;
    }
}

/* Small screens */
@media (width < 800px) {
    .hide-item {
        display: none;
    }

    .unhide-item {
        display: inline;
    }

    .section-header-text {
        flex-grow: 1;
        text-align: center;
    }

    .data-heading {
        margin-inline: auto;
    }

    .sub-title {
        text-align: center;
    }

    .games-container .games {
        width: 295px;
    }
}

/* Large screens */
@media (width > 50em) {
    .list-title {
        min-width: 14em;
        max-width: 14em;
    }

    .games-container .games {
        width: 15rem;
    }

    .games-container .games-title {
        height: 5rem;
    }
}

.img-down {
    position: relative;
    top: 0.2ex;
}

.small-text {
    font-size: 0.6rem;
    font-variant: small-caps;
    position: relative;
    top: -0.05em;
    margin-inline: 0.25em;
}

*:focus-visible {
    outline: var(--outline-size) solid var(--accent-color);
    outline-offset: calc(var(--outline-size) * -1);
    /* border-radius: var(--radius); */
}

:focus:not(:focus-visible) {
    outline: none;
}

/* .link-title:focus-visible,
.link-detail:focus-visible,
.link-index:focus-visible,
.music-track:focus-visible {
outline-offset: calc(var(--outline-size) * -1);
} */

/* .navigation-button-index {
	outline-offset: -.1rem;
	} */

.games-container:focus-visible {
    outline: var(--outline-size) solid var(--accent-color);
    /* outline-offset: -.1rem; */
}

details > summary::marker {
    color: dodgerblue;
}

details[open] > summary::marker {
    color: green;
}

details > summary:is(:hover, :focus-visible)::marker,
details[open] > summary:is(:hover, :focus-visible)::marker {
    color: var(--url-color);
}

details[open] > summary:is(:hover, :focus-visible),
details > summary:is(:hover, :focus-visible),
details[open] > summary:is(:hover, :focus-visible) *,
details > summary:is(:hover, :focus-visible) * {
    color: var(--dark-color) !important;
    background-color: var(--bg-hover-color) !important;
    /* border-radius: var(--radius); */
}

details {
    margin-block-end: var(--space-half);
    padding-inline-start: 1.5em;
}

details[open]:nth-child(odd) {
    background-color: var(--odd-color);
}

details[open]:nth-child(even) {
    background-color: var(--even-color);
}

.theme-bar .theme-button:is(:hover, :focus-visible),
.navigation-button:is(:hover, :focus-visible),
.navigation-button-index:is(:hover, :focus-visible),
.url-button:is(:hover, :focus-visible),
.hover:is(:hover, :focus-visible) {
    text-decoration-color: transparent;
    color: var(--light-color);
    background-color: hsla(0, 0%, 100%, 0.07);
    border-color: var(--fg-color);
    text-shadow: none;
}

.theme-bar .theme-button:is(:hover, :focus-visible),
.hover:is(:hover, :focus-visible) {
    background-color: hsla(0, 0%, 100%, 0.2);
}

.hover:is(:focus-visible) {
    outline-offset: 0.0625rem;
}

.navigation-button-index:is(:hover, :focus-visible) {
    border-color: var(--fg-color);
}

.navigation-button-img:is(:hover, :focus-visible) {
    text-decoration-color: transparent;
    border-color: var(--fg-color);
}

.navigation-button-img:is(:hover, :focus-visible) img {
    filter: brightness(175%);
}

a.continue:is(:hover, :focus-visible) {
    color: var(--dark-color);
    background-color: hsl(84, 95%, 16%);
    background-image: linear-gradient(
        to right,
        var(--continue-button-hover-colors)
    );
    border-color: var(--accent-color);
    border: var(--line-width) inset var(--light-color);
    padding: 0.25em 0.5em 0.25em;
    /* border-radius: var(--radius); */
}

.music-track:is(:hover, :focus-visible),
a.link-title:is(:hover, :focus-visible),
a.link-detail:is(:hover, :focus-visible) {
    color: var(--dark-color);
    background-color: var(--bg-hover-color);
    text-decoration-color: transparent;
    cursor: pointer;
}

.music-track:is(:hover, :focus-visible) .music-track-decoration {
    text-decoration-color: transparent;
}

.music-star {
    position: absolute;
    left: 0.7em;
    font-weight: 900;
    color: var(--accent-color);
}

.music-track:is(:hover, :focus-visible) {
    filter: none;
}

.music-track:is(:hover, :focus-visible) .music-first {
    filter: brightness(175%);
}

.music-track:is(:hover, :focus-visible) .music-star {
    color: hsl(0, 100%, 25%);
    filter: brightness(175%);
}

@media (pointer: coarse) {
    *:focus {
        outline: none;
    }

    span.pointer-type::after {
        content: "Coarse";
    }

    .navigation {
        padding-block: var(--space);
        padding-inline: var(--space-half);
        gap: 0.5em;
    }

    .url-button-container,
    #navigation1 {
        gap: 0.5em;
    }

    .skip-button,
    .navigation-button,
    .navigation-button-img,
    .navigation-button-index,
    .url-button,
    .menu {
        /* border-radius: var(--radius); */
        border: 0.0625rem dotted var(--url-color);
        padding: calc(var(--space-half) * 1.5);
        /* margin: var(--space); */
        min-width: 3rem;
        /* text-decoration-color: transparent; */
    }

    .menu-flex {
        gap: 0.2em;
        padding: calc(var(--space-half) * 1.5);
    }

    .theme-bar .theme-button {
        /* border-radius: var(--radius); */
        border-bottom: var(--underline-size) solid var(--url-color);
        padding: var(--space-half);
        min-width: 3rem;
        text-decoration-color: transparent;
        font-size: 0.6rem;
    }

    .theme-bar {
        padding: 0 var(--space-half) var(--space-half) var(--space-half);
    }

    /* Required for MS Edge */
    .section-header:focus,
    .section-header-text:focus,
    .log-section:focus {
        outline: none !important;
    }

    /* Required for MS Edge */
    /* .link-index:focus {
		color: var(--fg-color) !important;
		background-color: var(--bg-link-index-color) !important;
		} */

    .skip-button {
        display: inline-block;
    }

    .linkseperator {
        display: none;
    }
}