:root {
    --colorTransitionTime: 0.5s;
    --goose: #9b56a1;
    --duck: #1a1919;
    --flightless-bird: #f0dbf3;
    --geko: #cab3cd;
    --dove: #14648e;
    --boxShadow: rgba(0, 0, 0, 0.25);
}

::-moz-selection {
    background: var(--dove);
}

::selection {
    background: var(--dove);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Itim', 'JMH Typewriter', sans-serif;
    color: var(--duck);
    background-color: var(--flightless-bird);
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    transition: background-color var(--colorTransitionTime), color var(--colorTransitionTime);
}

h1,
h2,
h3,
h4 {
    padding: 0px;
    margin: 0px;
}

h1 {
    font-size: min(40px, 6.15vw);
}

h3 {
    font-size: min(15px, 2.25vw);
}

hr {
    border: 0;
    height: 2px;
    background-color: var(--duck);
    margin: 20px 0;
    transition: background-color var(--colorTransitionTime);
}

.spaced-container {
    font-size: 15px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.pronouns {
    font-weight: bold;
}

.spaced-container .spacer {
    width: 100%;
    border: 0;
    height: 2px;
    background-color: var(--duck);
    margin-top: 6px;
    transition: background-color var(--colorTransitionTime);
}

.spaced-container .spaced-content {
    display: flex;
    margin: 0px 6px;
}

.hotlink .domain {
    font-weight: bold;
    letter-spacing: -2px;
}

.hotlink .tld {
    font-weight: normal;
}

.content {
    font-family: 'JMH Typewriter', sans-serif;
    padding: max(min(25px, 2vw), 15px);
    max-width: 1000px;
    margin: auto;
}

.tagline-container {
    display: flex;
    margin-top: 10px;
}

.tagline.offset {
    margin-left: 10px;
}

.contact {
    margin-top: 10px;
    font-size: max(min(10px, 1.75vw), 8px);
}

.contact td.td-name {
    padding-right: 16px;
}

.contact td.td-value a {
    text-decoration: none;
    font-weight: bold;
}

.contact td.td-value a:hover {
    text-decoration: underline;
}

.primary-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

.avatar img {
    width: max(min(125px, 20vw), 95px);
    margin-right: 15px;
    border-radius: 3px;
    box-shadow: 3px 3px 5px var(--boxShadow);
    transition: box-shadow var(--colorTransitionTime);
}

.external.tooltip[aria-label]:focus,
.external.tooltip[aria-label]:hover {
    padding-right: 14px;
}

.external.tooltip[aria-label]:focus:after,
.external.tooltip[aria-label]:hover:after {
    position: absolute;
    z-index: 1;
    top: -4.5em;
    left: 50%;
    display: inline-block;
    white-space: normal;
    width: max-content;
    max-width: min(250px, 80vw);
    min-width: 0;
    height: auto;
    border-radius: 0.2em;
    padding: 0.7em;
    content: attr(aria-label);
    color: var(--flightless-bird);
    background: var(--duck);
    line-height: 1.4em;
    text-align: left;
    box-sizing: border-box;
    transform: translateX(-50%);
    transition: background var(--colorTransitionTime), color var(--colorTransitionTime);
}

a.external {
    color: var(--dove);
    text-decoration: underline;
    font-weight: bold;
    position: relative;
    transition: color var(--colorTransitionTime);
}

a.external:after {
    content: "";
    display: inline-block;
    color: black;
    background-image: url('/static/images/external-link-svgrepo-com.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: max(min(14px, 5vw), 5px);
    height: max(min(14px, 5vw), 5px);
    vertical-align: middle;
    margin-left: 3px;
}

a.download:after {
    content: "";
    display: inline-block;
    color: black;
    background-image: url('/static/images/download-button-svgrepo-com.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: max(min(14px, 5vw), 5px);
    height: max(min(14px, 5vw), 5px);
    vertical-align: middle;
    margin-left: 3px;
}

.contact-spaces {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
    margin-top: -20px;
}

.space {
    text-decoration: none;
    color: var(--duck);
    background-color: #1a19191e;
    padding: 6px;
    border-radius: 4px;
    margin: 10px 10px 0px 0px;
}

.space:hover {
    color: var(--flightless-bird);
    background-color: var(--goose);
}

.lightmode a.external::before {
    filter: brightness(0) saturate(100%) invert(29%) sepia(61%) saturate(848%) hue-rotate(161deg) brightness(95%) contrast(91%);
    transition: filter var(--colorTransitionTime);
}

.highlight-block {
    background-color: #19191a10;
}

#largeContactTable {
    display: table;
}

#smallContactTable {
    display: none;
}

#taglineBreak {
    display: none;
}

#colourModeToggleButton {
    text-decoration: underline;
    font-weight: 700;
    cursor: pointer;
}

/* Updated grid layout */
.page {
    display: grid;
    grid-template-columns: 80% 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    width: 100vw;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.focused-area {
    grid-column: 1;
    grid-row: 1 / 3;
    background-color: transparent;
    display: block;
    color: var(--duck);
    font-weight: lighter;
    font-size: 13px;
    line-height: 18px;
    max-width: none;
    transition: color var(--colorTransitionTime);
}

.subtitle {
    font-size: 18px;
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    margin-bottom: 10px;
}

.subtitle.min {
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 0px;
    font-weight: 600;
}

strong {
    font-weight: 600;
}

.focused-area .smaller {
    font-size: 10px;
}

.pages {
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: normal;
    color: var(--duck);
    text-decoration: none;
    height: 19px;
    transition: color var(--colorTransitionTime);
    margin-bottom: 40px;
}

.pages a {
    padding: 10px;
    margin: 0px;
    color: var(--duck);
    background-color: #1a19191e;
}

.pages a:hover {
    color: var(--flightless-bird);
    background-color: var(--goose);
}

.pages a.selected {
    color: var(--flightless-bird);
    background-color: var(--duck);
}

.pages a {
    text-decoration: none;
}

.section-header-item {
    color: var(--dove);
    text-decoration: underline;
    font-weight: bold;
    margin: 5px 0;
    transition: color var(--colorTransitionTime);
}

.section-header-item:hover {
    text-decoration: none;
}

.hugs {
    grid-column: 2;
    grid-row: 2;
    background-color: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.hugs img {
    position: static;
    max-width: 18vh;
    max-height: max-content;
    width: auto;
    height: auto;
}

.focused-area {
    max-width: 800px;
}

/* Mobile responsive breakpoint */
@media (max-width: 768px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .focused-area {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
    }

    .pages {
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hugs {
        display: none;
    }
}

@media (max-width: 650px) {
    .focused-area {
        font-size: 12px;
    }

    .focused-area .smaller {
        font-size: 8px;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 20px;
    }

    h3 {
        font-size: 7px;
    }

    .contact td.td-name {
        padding-right: 10px;
    }

    .avatar img {
        width: 95px;
    }

    .content {
        margin: 15px;
    }

    .contact {
        font-size: 8px;
    }

    .external.tooltip[aria-label]:focus:after,
    .external.tooltip[aria-label]:hover:after {
        max-width: 90vw;
        font-size: 0.9em;
        padding: 0.5em;
    }
}

@media (max-width: 355px) {
    h1 {
        font-size: 15px;
    }

    h3 {
        font-size: 6px;
    }

    .content {
        margin: 10px;
    }

    .focused-area .smaller {
        font-size: 8px;
    }

    .focused-area {
        font-size: 10px;
        line-height: 14px;
    }
}

@media (max-width: 300px) {
    h1 {
        font-size: 8vw;
    }

    h4 {
        font-size: 4vw;
    }

    .contact td.td-name {
        padding-right: 1vw;
    }

    .contact {
        font-size: 4vw;
    }

    .avatar img {
        display: none;
    }

    .focused-area {
        font-size: 8px;
        line-height: 12px;
    }

    .focused-area .smaller {
        font-size: 6px;
    }

    .external.tooltip[aria-label]:focus:after,
    .external.tooltip[aria-label]:hover:after {
        max-width: 95vw;
        font-size: 0.8em;
        padding: 0.4em;
        line-height: 1.3em;
    }
}

@media (max-width: 200px) {
    a.external:after {
        display: none;
    }
}

#friendButtons {
    display: flexbox;
    flex-direction: row;
    background-color: var(--geko);
    padding: 10px;
    width: calc(calc(88 * 4) + calc(10 * 6))px;
}

#friendButtons a {
    text-decoration: none;
    font-weight: bold;
    color: var(--duck);
    margin-right: 10px;
    transition: color var(--colorTransitionTime);
}

#disambiguation {
    top: 0px;
    height: inherit;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 5px 20px;
    box-sizing: border-box;
    height: 39px;
}

#disambiguation .header {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 15px;
    font-family: 'Itim', 'JMH Typewriter', sans-serif;
}

#disambiguation .item {
    opacity: 0.7;
    color: #fff;
    text-decoration: none;
    padding-right: 15px;
    font-size: 14px;
    margin: auto;
    height: 31px;
    width: 88px;
    transition: opacity 0.25s ease;
}

#disambiguation .item:hover {
    opacity: 1;
}

#disambiguation.offset {
    margin-bottom: 20px;
}

#disambiguation .items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-evenly;
}

/* accessibility: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #disambiguation .item {
        transition: none;
    }
}