/* settings */

/* declare the used fonts because Iosevka doesn't have a variable font :/ */
/* also these were rebuilt according to https://github.com/be5invis/Iosevka/blob/main/doc/custom-build.md and subset to common latin unicode using pyftsubset to make file size suitable for web use */

@font-face {
    font-family: Blacksword;
    src: url("/media/fonts/blacksword.woff2");
}

@font-face {
    font-family: Iosevka Medium;
    src: url('/media/fonts/Iosevka-Medium.woff2');
    font-weight: 500;
}

@font-face {
    font-family: Iosevka Bold;
    src: url('/media/fonts/Iosevka-Bold.woff2');
    font-weight: 700;
}

@font-face {
    font-family: Iosevka Aile;
    src: url('/media/fonts/IosevkaAile-Regular.woff2');
}

@font-face {
    font-family: Iosevka Aile Italic;
    src: url('/media/fonts/IosevkaAile-Italic.woff2');
    font-style: italic;
}

@font-face {
    font-family: Iosevka Aile Bold;
    src: url('/media/fonts/IosevkaAile-Bold.woff2');
    font-weight: 700;
}

@font-face {
    font-family: Iosevka Aile BoldItalic;
    src: url('/media/fonts/IosevkaAile-BoldItalic.woff2');
    font-weight: 700;
    font-style: italic;
}

:root {
    --bg0: #fbf1c7;
    --bg0hc: #f9f5d7;
    --bg1: #ebdbb2;
    --bg2: #d5c4a1;
    --bg3: #bdae93;
    --bg4: #a89984;
    --fg0: #282828;
    --fg0hc: #1d2021;
    --fg1: #3c3836;
    --fg2: #504945;
    --fg3: #665c54;
    --fg4: #7c6f64;
    --red: #cc241d;
    --green: #98971a;
    --yellow: #d79921;
    --blue: #458588;
    --purple: #b16286;
    --aqua: #689d6a;
    --grey: #7c6f64;
    --orange: #d65d0e;
    --qdpink: #d0335b;
    --noise: url(/media/elements/noise.png);
    --spacing: 1.5rem;
    --font-stack: "Iosevka Aile", "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
    --max-width: 1400px;
}

@media (prefers-color-scheme: dark) {

    :root {
    --fg0: #fbf1c7;
    --fg0hc: #f9f5d7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;
    --bg0: #282828;
    --bg0hc: #1d2021;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;
    --red: #cc241d;
    --green: #98971a;
    --yellow: #d79921;
    --blue: #458588;
    --purple: #b16286;
    --aqua: #689d6a;
    --grey: #7c6f64;
    --orange: #d65d0e;
    --noise: url(/media/elements/noise2.png);
    }

}

/* Basic styles */

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--fg0) var(--bg2);
    scrollbar-width: thin;
}

::selection {
    background: var(--fg2);
    color: var(--bg0);
}

body {
  background: var(--bg0);
  background-size: 1ch 1ch;
  background-image:
    linear-gradient(to right, var(--bg1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg1) 1px, transparent 1px);
  color: var(--fg0);
  font-family: var(--font-stack);
  font-size: 1.5rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  /* gap: calc(var(--spacing) * 2); */
  min-height: 100vh;
  margin: 0 auto;
}

* {
    box-sizing: border-box;
}

/* necessary so that the footer does not flee under everything and gets put under main next to header */
.mainfootercontainer {
    width: calc(100% - 4vw - 500px);
    display: flex;
    flex-wrap: wrap;
}

main {
  margin-inline: auto;
  width: 100%;
  flex-grow: 999;
  padding: 0 4vw;
  padding-bottom: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 2);
  flex-basis: 40rem;
  align-content: center;
}

hr {
    background-color: var(--fg0);
    border: none;
    height: 1px;
}

/* Heading styles */
h1,
h2,
h3 {
    font-family: Iosevka Medium, monospace;
    font-weight: 500;
}

/* Adjustments for different heading levels */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.66rem;
}
h3 {
  font-size: 2rem;
}

/* link styles */

a {
  color: currentColor;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 0.2ex;
  text-underline-offset: 0.3ex;
  transition: text-decoration-color 0.25s;
}

a:hover {
  text-decoration-thickness: 0.3ex;
  transition: text-decoration-color 0.25s;
}

a img {
    vertical-align: middle;
}

/* text and flow */

p {
  margin: var(--spacing) auto;
  line-height: 1.5;
}

em {
    font-family: Iosevka Aile Italic;
}

strong {
    font-family: Iosevka Aile Bold;
    code {
        font-family: Iosevka Bold;
    }
}

em strong {
    font-family: Iosevka Aile BoldItalic;
}

code {
    width: fit-content;
    max-width: 100%;
    font-family: Iosevka Medium;
    padding: 0.5rem 1rem;
    background-color: var(--fg0);
    color: var(--bg0);
    overflow-x: auto;
    transition: 0.25s;
}

p code, li code {
    padding: 0 0.5ch;
}

blockquote {
    transition: 0.25s;
}
.copy-code-btn {
    background: var(--fg0);
    color: var(--bg0);
    border: none;
    font-family: Iosevka Medium;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    text-align: right;
    transition: 0.25s;
}

.copy-code-btn:hover {
    background: var(--fg2);
    color: var(--bg0);
    transition: 0.25s;
}

.copy-code-btn svg {
    height: 31px;
    vertical-align: middle;
}

.copy-code-btn-container {
    margin-top: calc(-1.5rem + 5px);
    text-align: right;
}

img {
    margin: var(--spacing) auto;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    transition: 0.25s;
}

img:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

video {
    margin: var(--spacing) auto;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    transition: 0.25s;
}

/* List styles */

ul, ol {
    padding-inline-start: var(--spacing);
}

li {
    margin-block-start: var(--spacing);
    list-style: square;
}

ol li {
    list-style: decimal;
}

/* Blockquote styles */
blockquote {
  padding-inline-start: var(--spacing);
  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: 1.5rem;
}

/* Flow and rhythm */
:is(h1, h2, h3) + * {
  margin-block-start: calc(var(--spacing) / 3);
}
:is(article) + * {
  margin-block-start: calc(var(--spacing) * 2);
}

/* header */

header {
    margin-left: 4vw;
    max-width: 500px;
    min-height: 100vh;
    background: var(--noise) fixed;
    background-color: var(--fg0);
    box-shadow:
    0 0 0 1px var(--bg0),
    0 0 0 6px var(--fg0),
    12px 12px 22px 0 rgba(0, 0, 0, 0.35),
    -8px -8px 18px 0 rgba(255, 255, 255, 0.4);
}

/* height 100vh allows the header to be sticky AND centred, however if it's bigger than the device's height what is hidden can't be scrolled to so downsizing the elements at lower resolutions like 720p is necessary */
.header-inner {
    height: 100vh;
    padding: 5%;
    position: sticky;
    top: 0;
    color: var(--bg0);
    align-content: center;
    background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.125));
}

.langselect {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: var(--spacing);
    justify-content: center;
}

.langbutton {
    background: var(--bg0);
    color: var(--fg0);
    border: none;
    font-family: Iosevka Medium;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    text-align: right;
    transition: 0.25s;
}

.langbutton:hover {
    background: var(--qdpink);
    color: var(--bg0);
    transition: 0.25s;
}

.aenore {
    text-align: center;
}

.aenore a {
    text-decoration: none;
}

.aenore h1 {
    font-family: Blacksword, cursive;
    font-weight: 300;
    font-size: 5rem;
    margin: calc((var(--spacing)*2)) auto;
    transition: 0.25s;
}

.aenore a:hover h1 {
    color: var(--bg0hc);
    transition: 0.25s;
}

.aenoredot {
    transition: 0.25s;
}

.aenore a:hover .aenoredot {
    color: var(--qdpink);
    transition: 0.25s;
}

/* the box-shadow gives some depth to hr */
header hr {
    margin: calc((var(--spacing)*2)) var(--spacing) ;
    box-shadow:
    -1px -1px 2px 0 rgba(0, 0, 0, 0.25),
    1px 1px 2px 0 rgba(255, 255, 255, 0.3);
}

nav ul {
    list-style-type: none;
    text-align: center;
    padding-left: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: unset;
}

nav li {
    width: 100%;
    margin-block-start: unset;
    list-style: none;
}

nav a {
    text-decoration: none;
    font-family: Iosevka Medium;
    font-size: 2.4rem;
    padding: 0 0.5rem;
    position: relative;
    border-left: solid 0.5rem;
}

nav a:hover {
    color: var(--fg0);
    transition: 0.25s;
}

nav a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--bg0);
    position: absolute;
    /*border-radius: 1em;*/
    left: 0;
    top: 0;
    z-index: -10;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

nav a:hover::after {
    transform-origin: up;
    transform: scaleX(1);
}

nav .current {
    background-color: var(--bg0);
    color: var(--fg0hc);
}
/* creates the fake arrow, uses rem instead of px to stay aligned with different default font sizes */
nav .current::before {
    content: "";
    position: absolute;
    border: solid var(--bg0);
    border-width: 0 2.13rem 2.13rem 0;
    bottom: 0.45rem;
    right: -1.1rem;
    z-index: -10;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: transform 0.25s ease;
}
/* the following allows giving each nav link its own colour when active, same as the individual borders when inactive */
#blog.current {
    background-color: var(--blue);
}

#blog.current::before {
    border-color: var(--blue);
}

#liveries.current {
    background-color: var(--red);
}

#liveries.current::before {
    border-color: var(--red);
}

#collections.current {
    background-color: var(--yellow);
}

#collections.current::before {
    border-color: var(--yellow);
}

#virtualphoto.current {
    background-color: var(--green);
}

#virtualphoto.current::before {
    border-color: var(--green);
}

#resources.current {
    background-color: var(--purple);
}

#resources.current::before {
    border-color: var(--purple);
}

#resume.current {
    background-color: var(--grey);
}

#resume.current::before {
    border-color: var(--grey);
}

#friends.current {
    background-color: var(--aqua);
}

#friends.current::before {
    border-color: var(--aqua);
}

#contact.current {
    background-color: var(--orange);
}

#contact.current::before {
    border-color: var(--orange);
}

.header-socials {
    width: 100%;
    margin: calc((var(--spacing)*2)) auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    justify-content: center;
}

.header-socials-mobile {
    display: none;
}

.header-socials a {
    text-decoration: none;
    display: flex;
}

.header-socials svg {
    height: 31px;
    fill: var(--bg0);
    transition: 0.25s;
}

.header-socials img {
    margin: 0;
    height: 31px;
    border-radius: unset;
}

.header-socials svg:hover {
    fill: var(--qdpink);
    transition: 0.25s;
}

.lastwebsiteupdate {
    font-family: Iosevka Medium;
    font-size: small;
    color: var(--fg0);
    display: flex;
    justify-content: center;
    margin: calc((var(--spacing)*2)) auto;
    position: relative;
}

.lastwebsiteupdate p {
    margin: 0 auto;
    position: relative;
}

.lastwebsiteupdatecolour p {
    background-color: #407956;
    @media (prefers-color-scheme:dark) {
        background-color: var(--aqua);
    }
    color: var(--bg0);
    padding: 0 var(--spacing);
    padding-right: calc((var(--spacing) /2));
}

.lastwebsiteupdatedate p {
    background-color: var(--bg0);
    padding: 0 var(--spacing);
    font-family: Iosevka Bold;
}
/* creates the fake arrow, uses rem instead of px to stay aligned with different default font sizes */
.lastwebsiteupdatecolour p::after {
    content: "";
    position: absolute;
    border: solid;
    border-width: 0 0.9rem 0.9rem 0;
    border-color: #407956;
    @media (prefers-color-scheme:dark) {
        border-color: var(--aqua);
    }
    right: -0.4rem;
    top: 0.18rem;
    z-index: 10;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* footer */

footer {
    width: 100%;
    font-size: smaller;
    font-family: Iosevka Medium;
    text-align: center;
    align-content: flex-end;
}

footer p {
    background-color: var(--fg0);
    color: var(--bg0);
    max-width: 50ch;
    padding: 0 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

footer img {
    margin: auto;
    border-radius: unset;
    max-height: 1rem;
    max-width: 1rem;
    vertical-align: middle;
}

footer img:hover {
    transform: unset;
}

.footercredits p {
    width: fit-content;
}

.disclaimer {
    font-size: small;
}

#check, .menu {
  display: none;
}

.back-to-top-btn {
    position:fixed;
    display: block;
    bottom: var(--spacing);
    right: var(--spacing);
    background-color: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    height: auto;
    padding: 0.5ch 1ch;
    transition: 0.25s;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
    a {
        text-decoration: none;
    }
}

.back-to-top-btn:hover {
    background-color: var(--bg0);
    color: var(--fg0);
    transition: 0.25s;
}

/* webmention stuff */
.webmention-form {
    font-size: smaller;
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    align-content: center;
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0.5ch var(--spacing);
    fieldset {
        border: none;
        padding: 0;
    }
    input[type="url"] {
        background-color: var(--bg0);
        color: var(--fg0);
        border: none;
        font-family: Iosevka Medium;
    }
    input[type="submit"] {
        background-color: var(--bg0);
        color: var(--fg0);
        border: none;
        font-family: Iosevka Medium;
        transition: 0.25s;
    }
    input[type="submit"]:hover {
        background-color: var(--bg2);
        transition: 0.25s;
    }
}

/* body adjustments for 1080p and under desktops */
@media only screen and (max-height: 1080px) {

    .mainfootercontainer {
    width: calc(100% - 4vw - 400px);
    }

    header {
        max-width: 400px;
        --spacing: 1rem;
    }

    .aenore h1 {
        font-size: 3rem;
    }

    nav a {
        font-size: 1.9rem;
    }

    nav .current::before {
        border-width: 0 1.65rem 1.65rem 0;
        bottom: 0.35rem;
        right: -0.85rem;
    }

    .lastwebsiteupdatecolour p::after {
        right: -0.4rem;
        transform: scaleX(0.9) rotate(-45deg);
    }

}

@media only screen and (max-height: 720px) {

    body {
        font-size: 1rem;
    }

    .mainfootercontainer {
    width: calc(100% - 4vw - 320px);
    }

    h1 {
      font-size: 2rem;
    }
    h2 {
      font-size: 1.5rem;
    }
    h3 {
      font-size: 1.33rem;
    }

    header {
        max-width: 320px;
        --spacing: 0.5rem;
    }

    .aenore h1 {
        font-size: 2rem;
    }

    nav a {
        font-size: 1.5rem;
    }

    nav .current::before {
        border-width: 0 1.3rem 1.3rem 0;
        bottom: 0.3rem;
        right: -0.6rem;
    }

    .lastwebsiteupdatecolour p::after {
        display: none;
    }
}

/* body adjustments for phones */
@media only screen and (max-width: 1080px) {

    body {
        overflow-x: hidden;
    }

    .mainfootercontainer {
        width: 100%;
    }

    main {
      margin-inline: auto;
      width: 100%;
      flex-grow: 999;
      padding: 0 4vw;
      padding-bottom: calc(var(--spacing) * 2);
      padding-top: calc(var(--spacing) * 4);
      flex-basis: 40rem;
      align-content: center;
    }

    a {
        word-break: break-word;
    }

    header {
        margin-left: unset;
        max-width: unset;
        min-height: unset;
        width: 100%;
        height: fit-content;
        background-color: unset;
        background: unset;
        box-shadow: unset;
    }

    .header-inner {
        height: unset;
        padding: unset;
        position: relative;
        top: 0;
        color: var(--bg0);
        align-content: center;
        background: unset;
    }

    header hr {
        display: none;
    }

    .langselect {
        margin: var(--spacing) auto;
        gap: calc(var(--spacing)*2);
    }

    .langbutton {
        background-color: var(--fg0);
        color: var(--bg0);
    }

    .aenore {
        background: var(--noise);
        background-color: var(--fg0);
        box-shadow:
            0 0 0 1px var(--bg0),
            0 0 0 6px var(--fg0),
            12px 12px 22px 0 rgba(0, 0, 0, 0.35),
            -8px -8px 18px 0 rgba(255, 255, 255, 0.4);
    }

    .aenore h1 {
        font-size: 3rem;
        margin: 0;
    }

    .menu {
        display: table-cell;
        position: absolute;
        left: 50%;
        margin: calc(var(--spacing) * 2) auto;
        transform: translateX(-50%);
        color: var(--bg0);
        background: var(--noise);
        background-color: var(--fg0);
        z-index: 90;
        transition: all ease-in-out 0.5s;
      }

    .menu svg {
        vertical-align: middle;
    }

    nav {
        display: block;
        position: fixed;
        bottom: -150%;
        height: 100vh;
        width: 100%;
        background: var(--noise) fixed;
        background-color: var(--fg0);
        transition: all ease-in-out 0.5s;
        padding-top: 110px;
        z-index: 80;
    }

    nav li {
        margin: calc(var(--spacing)/2) auto;
    }

    nav a {
        font-size: 2rem;
    }

    nav .current::before {
        display: none;
    }

    #check:checked ~ nav {
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;
    }

    #check:checked ~ .menu {
        transform: translate(-50%, -110px);
        transition: all ease-in-out 0.5s;
    }

    .lastwebsiteupdate {
        display: none;
    }

    .header-socials {
        display: none;
    }

    .header-socials-mobile {
        width: 100%;
        margin: var(--spacing) auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing);
        justify-content: center;
    }

    .header-socials-mobile a {
        text-decoration: none;
        display: flex;
    }

    .header-socials-mobile svg {
        height: 31px;
        fill: var(--fg0);
        transition: 0.25s;
    }

    .header-socials-mobile img {
        margin: 0;
        max-width: 100%;
        height: 31px;
        max-height: 100%;
        border-radius: unset;
    }

    .header-socials-mobile svg:hover {
        fill: var(--qdpink);
        transition: 0.25s;
    }

}

@media only screen and (max-width: 400px) {

    nav a {
        font-size: 1.5rem;
    }

}

@media only screen and (max-width: 340px) {

    h1 {
        word-break: break-word;
    }

}

@media only screen and (max-height: 450px) and (max-width: 1080px) {

    nav li {
        width: calc(100%/2);
    }

    #check:checked ~ .menu {
        transform: translate(-50%, -130px);
    }

    .langselect {
        margin: calc(var(--spacing)*2) auto;
        gap: calc(var(--spacing)*3);
    }

    .menu {
        margin: calc(var(--spacing)*2) auto;
    }

}

/*IMAGE GRID*/

.work {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: calc(var(--spacing) * 2) auto;
    transition: 0.25s;
}

article .work {
    margin: var(--spacing) auto;
}

.work-item {
    width: calc(((100%/2) - 5px));
    max-height: 45vh;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    &:last-child:nth-of-type(odd):not(:only-child):not(.resource) {
        width: 100%;
    }
}

.work-item-gallery {
    height: 40vh;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: 0.25s;
    &:last-child {
        flex-grow: 10;
    }
    &:nth-of-type(2):last-child {
        flex-grow: 1;
    }
}

.work:hover .work-item-gallery:not(:hover), .work:hover .work-item:not(:hover) {
    opacity: 0.85;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
}

.characters {
    max-width: calc(100% / 4 - calc(10px * (3/4)));
    filter: grayscale(1);
    mix-blend-mode: multiply;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
    transition: 0.25s;
}

.characters:hover {
    filter: grayscale(0);
    mix-blend-mode: normal;
    transition: 0.25s;
}

.characters:last-child {
    flex-grow: 1;
}

.resource {
    height: unset;
    width: calc((100% / 2) - 5px);
}

@media only screen and (max-width: 1080px) {
    .resource .work-title-overlay {
        margin-bottom: var(--spacing);
        margin-top: auto;
        @media only screen and (max-width: 450px) {
            font-size: 1.5rem;
        }
    }
}

.resource:only-child {
    width: unset;
    @media only screen and (max-width: 1080px) {
        max-height: 90vh;
    }
}

.work-item:hover .overlay {
    opacity: 1;
}

.work-item-gallery:hover {
    .overlay-small {
        opacity: 1;
    }
    .gallery-picture-link {
        opacity: 1;
        mix-blend-mode: normal;
        transition: 0.25s;
    }
}

.work-item-gallery:hover .spoiler {
    opacity: 0;
    transition-delay: 2s;
}

.work-item-gallery:hover .spoiler-timer {
    opacity: 1;
    width: calc(100% - 30px);
    transition: width 2s linear;
}

.work-item-gallery:hover .spoiler-hide {
    opacity: 0;
    transition: 0.25s;
    transition-delay: 2s;
}

.work-item-gallery:hover .work-img {
    transform: scale(1.05);
    transition: 0.5s;
}

.work-item:hover .work-img-project {
    transform: scale(1.05);
    transition: 0.5s;
}

.work-img {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: transform 0.5s;
    object-fit: cover;
}

.work-img-project {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    transition: transform 0.5s;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.overlay {
    position: absolute;
    border-radius: 10px;
    inset: 0;
    width: 100%;
    height: 100%;
    /*background: #0000008f;*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.overlay-small {
    position: absolute;
    border-radius: 10px;
    inset: 0;
    width: 100%;
    height: 100%;
    /*background: #ffffff3f;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.spoiler-timer {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 0;
    opacity: 0;
    width: 0;
    height: 5px;
    margin: auto 15px;
    border-radius: 5px;
    background-color: var(--fg0hc);
    display: inline-block;
}

.spoiler {
    position: absolute;
    border-radius: 10px;
    inset: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

.work-title-overlay {
    font-family: Iosevka Medium;
    font-size: 3rem;
    background: var(--fg0);
    color: var(--bg0);
    padding: 0 1rem;
    margin: var(--spacing);
    text-align: center;
}

.spoiler-text {
    font-family: Iosevka Medium;
    font-size: 2rem;
    background: var(--fg0);
    color: var(--bg0);
    padding: 0 0.5rem;
    margin: var(--spacing);
    text-align: center;
}

.work-title-overlay-small {
    color: var(--bg0);
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: var(--fg0);
    padding: 0.5rem;
    margin-top: auto;
    margin-bottom: 0%;
}

.gallery-picture-link {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: var(--fg0);
    color: var(--bg0);
    opacity: 0;
    padding: 0.5ch;
    border-radius: 0 0 0 0.5ch;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
    @media only screen and (max-width: 1080px) {
        opacity: 1;
        mix-blend-mode: normal;
    }
}

.work-item-gallery:target {
    box-shadow:
    0 0 0 1px var(--bg0),
    0 0 0 6px var(--fg0);
}

/* image grid on mobile */

@media only screen and (max-width: 1080px) {

    .work-item {
        width: 100%;
    }

    .work-item-gallery {
        width: 100%;
        height: 100%;
        max-height: 90vh;
    }

    .work-title-overlay {
        opacity: 1 !important;
        font-size: 2rem;
        margin-top: auto;
        margin-bottom: var(--spacing);
    }

    .overlay {
        opacity: 1 !important;
    }

    .overlay-small {
        opacity: 1 !important;
    }

    .characters {
        filter: unset;
        mix-blend-mode: unset;
        max-width: unset;
    }

}
/* adjusts gallery styling for mobile landscape mode */
@media only screen and (max-height: 820px) and (max-width: 1080px) {

    .work-item-gallery {
        width: unset;
        height: 90vh;
    }

    .resource {
        width: unset;
        height: unset;
        max-height: 90vh;
    }

    .characters {
        max-width: calc(100% / 4 - calc(10px * (3/4)));
    }
}

/* project description */

.projectdescription {
    margin: calc(var(--spacing) * 2) auto;
    padding: 0 var(--spacing);
    p img {
        height: 1.5rem;
        width: auto;
        display: inline-block;
        margin: 0;
        @media only screen and (max-height: 720px) {
            height: 1rem;
        }
    }
    @media only screen and (max-width: 1080px) {
        padding: 0;
    }
}

.projectdescriptionnsfw {
    background: var(--fg0);
    color: var(--bg0);
    margin: calc(var(--spacing) * 2) auto;
    width: fit-content;
    font-size: smaller;
}

.projectdescriptionnsfw p {
    padding: 0.5rem;
}

.projectdescription h1, .projectdescription h2 {
    margin: calc(var(--spacing) * 2) auto;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
}

.projectdescription ul {
    list-style: square;
}

.projectdescription a {
    text-decoration-color: var(--green);
    font-family: Iosevka Aile Italic;
}

.backtogalleries {
    text-decoration-color: var(--green);
}

.backtocollections {
    text-decoration-color: var(--yellow);
}

.backtoresources {
    text-decoration-color: var(--purple);
    a {
        text-decoration-color: var(--purple);
    }
    h2, h3 {
        a {
        &::after {
                text-decoration-color: var(--purple);
            }
        }
    }
}

.backtoliveries {
    text-decoration-color: var(--red);
    a {
        text-decoration-color: var(--red);
    }
}

#collectionsdescription a {
    text-decoration-color: var(--yellow);
}

/* resources page */

.resources {
    margin: calc(var(--spacing) * 2) auto;
    h1, h2 {
        margin: calc(var(--spacing) * 2) auto;
        background: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1rem;
        word-break: break-word;
    }
    h3 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
    }
    h2 {
        margin-left: calc(var(--spacing) * 4);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
        @media only screen and (max-width: 1280px) {
            margin-left: 0;
        }
        font-size: 3rem;
    }
    h2::before {
        content: "";
        position: absolute;
        width: calc(3rem + 1.5rem);
        height: calc(3rem + 1.5rem);
        background-color: var(--fg0);
        margin-left: -7.5rem;
        @media only screen and (max-width: 1280px) {
            display: none;
        }
    }
}

.resources section {
    margin: calc(var(--spacing) * 3) auto;
}

.resources-resource {
    width: calc(100% / 4 - calc(var(--spacing) * (3/4)));
    border: solid 1px var(--fg0);
    padding: 0 calc(var(--spacing)/2);
    position: relative;
    @media only screen and (max-width: 2560px) {
        .recent-posts-title {
            margin: calc(var(--spacing)/2) auto;
        }
        .tags-container {
            margin-top: calc(var(--spacing)/2);
            margin-bottom: calc(var(--spacing)/2);
        }
        .tag-post-list {
            font-size: smaller;
        }
    }
    transition: 0.25s;
    @media only screen and (max-width: 1920px) {
        width: calc(100% / 2 - calc(var(--spacing) / 2));
    }
    @media only screen and (max-width: 450px) {
        width: 100%;
    }
}

.resource-list {
    width: calc(100% / 2 - calc(var(--spacing) / 2));
    @media only screen and (max-width: 450px) {
        width: 100%;
    }
}

.resources-resource:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.resources-container:hover .resources-resource:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
    .recent-posts-post-block {
        animation-play-state: paused;
    }
}

.resources-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
}

.resources .work-item {
    width: calc((100% / 4) - (10px * (3/4)));
    @media only screen and (max-width: 1920px) {
        width: calc(100% / 2 - calc(var(--spacing) / 2));
    }
    @media only screen and (max-width: 450px) {
        width: 100%;
    }
}

.backtoresources p:nth-of-type(1)::first-letter {
    background-color: unset;
    color: unset;
    padding: unset;
    font-size: unset;
}

.backtoresources p:last-child::after {
    display: none;
}

/* resume page */

.resume {
    margin: calc(var(--spacing) * 2) auto;
    padding: 0 var(--spacing);
}

.resume h1 {
    margin: calc(var(--spacing) * 2) auto;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
}

.resume a {
    text-decoration-color: var(--grey);
}

/* friends page */

.friends {
    margin: calc(var(--spacing) * 2) auto;
    text-align: center;
}

.friends {
    h1, h2 {
    margin: calc(var(--spacing) * 2) auto;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
    }
}

.friends img {
    image-rendering: pixelated;
    border-radius: unset;
    height: 31px;
    width: auto;
}

.buttonwall {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 0.5rem;
    justify-content: center;
    margin: calc(var(--spacing) * 2) auto;
    max-width: var(--max-width);
}

.buttonwall img {
    margin: 0;
}

.aenoredotfrbutton {
    max-width: fit-content;
    margin: calc(var(--spacing) * 2) auto;
}

.aenoredotfrbutton img {
    margin: auto;
}

/* credits page */

.credits {
    margin: calc(var(--spacing) * 2) auto;
    max-width: var(--max-width);
    position: relative;
    padding: 0 var(--spacing);
}

.credits h1 {
    margin: calc(var(--spacing) * 2) auto;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
}

.eleventy-possum img {
    height: 5rem;
    width: auto;
    position: absolute;
    margin-top: -40px;
    margin-left: 1ch;
        @media (prefers-reduced-motion: no-preference)  {
        animation: possum-float 5s infinite;
    }
    border-radius: 0;
}

@keyframes possum-float {
            0% {
                margin-top: -47px;
            }

            50% {
                margin-top: -32px;
            }

            100% {
                margin-top: -47px;
            }
        }

/* contact page */

.contact {
    margin: calc(var(--spacing) * 2) auto;
    text-align: center;
}

.contact h1 {
    margin: calc(var(--spacing) * 2) auto;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
}

.contact a {
    text-decoration-color: var(--orange);
}

.contact-pride {
    display: flex;
    gap: var(--spacing);
    align-content: center;
    justify-content: center;
}

.contact-pride a {
    text-decoration: none;
    display: flex;
}

.contact-pride svg {
    height: 31px;
}

.contact-socials {
    display: flex;
    gap: var(--spacing);
    align-content: center;
    justify-content: center;
}

.contact-socials a {
    text-decoration: none;
    display: flex;
}

.contact-socials svg {
    height: 31px;
    fill: currentcolor;
    transition: 0.25s;
}

.contact-socials svg:hover {
    fill: var(--qdpink);
    transition: 0.25s;
}

/* blog */

.blog {
    max-width: 80ch;
    margin: calc(var(--spacing) * 2) auto;
}
/* applies a padding on each side on desktops to keep the text from being too close to the edges */
@media only screen and (min-width: 1000px) {
    .blog {
        padding: 0 6vw;
    }
}
@media only screen and (min-width: 2560px) {
    .blog {
        padding: 0 3vw;
    }
}

article::before {
    content: "";
    position: absolute;
    width: calc(3rem + 1.5rem);
    height: calc(3rem + 1.5rem);
    background-color: var(--fg0);
    margin-left: -6rem;
    @media only screen and (max-width: 1280px) {
        display: none;
    }
}

article iframe {
    display: block;
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    transition: 0.25s;
}

.blog-lists::before {
    content: "";
    position: absolute;
    width: calc(3rem + 1.5rem);
    height: calc(3rem + 1.5rem);
    background-color: var(--fg0);
    margin-left: -6rem;
    @media only screen and (max-width: 1280px) {
        display: none;
    }
}

.blog h1, .blog-lists h1 {
    text-align: center;
    background: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 1rem;
    position: relative;
    @media only screen and (max-width: 450px) {
        margin-left: auto;
        margin-right: auto;
    }
}

.blog-lists h2 {
    background-color: var(--fg1);
    color: var(--bg0);
    padding: 0 0.5ch;
    width: fit-content;
    transition: 0.25s;
}

.post-list-date {
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0.5ch;
}

/* blog home page */

.blog-content {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
    margin: calc(var(--spacing) * 2) auto;
    margin-top: 0;
    @media only screen and (max-width: 1920px) {
        gap: calc(var(--spacing) * 2);
    }
    a {
        word-break: normal;
    }
}

.blog-content-left {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 30% - (var(--spacing) * 3));
    @media only screen and (max-width: 1920px) {
        width: calc(100% - 30% - (var(--spacing) * 2));
    }
}

.blog-content-right {
    display: flex;
    flex-wrap: wrap;
    width: 30%;
}

.blog-content-tags {
    width: 100%;
    margin: calc(var(--spacing) * 2) auto;
    h1 {
        margin-left: calc(var(--spacing) * 4);
        background-color: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
        @media only screen and (max-width: 1280px) {
            margin-left: 0;
        }
    }
    h1::before {
        content: "";
        position: absolute;
        width: calc(3rem + 1.5rem);
        height: calc(3rem + 1.5rem);
        background-color: var(--fg0);
        margin-left: -7.5rem;
        @media only screen and (max-width: 1280px) {
            display: none;
        }
    }
}

.blog-intro {
    margin: var(--spacing) auto;
    display: block;
    h1 {
        margin-left: calc(var(--spacing) * 4);
        background-color: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
        @media only screen and (max-width: 1280px) {
            margin-left: 0;
        }
    }
    h1::before {
        content: "";
        position: absolute;
        width: calc(3rem + 1.5rem);
        height: calc(3rem + 1.5rem);
        background-color: var(--blue);
        margin-left: -7.5rem;
        @media only screen and (max-width: 1280px) {
            display: none;
        }
    }
    p {
        margin-bottom: 0;
    }
}

.recent-posts {
    margin: var(--spacing) auto;
    width: 100%;
    display: block;
    h1 {
        margin-left: calc(var(--spacing) * 4);
        margin-top: 0;
        background-color: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
        @media only screen and (max-width: 1280px) {
            margin-left: 0;
        }
    }
    h1::before {
        content: "";
        position: absolute;
        width: calc(3rem + 1.5rem);
        height: calc(3rem + 1.5rem);
        background-color: var(--fg0);
        margin-left: -7.5rem;
        @media only screen and (max-width: 1280px) {
            display: none;
        }
    }
}

.recent-likes {
    margin: var(--spacing) auto;
    h1 {
        margin-bottom: 0;
        background-color: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
    }
}

.recent-posts-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    margin: var(--spacing) auto auto auto;
}

.recent-likes-container {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) / 2);
    margin: var(--spacing) auto auto auto;
}

@media only screen and (max-width: 2560px) {
    .recent-posts-date {
        margin: calc(var(--spacing)/2) auto;
    }
}

.recent-posts-post {
    width: calc(100% / 2 - calc(var(--spacing) / 2));
    border: solid 1px var(--fg0);
    padding: 0 calc(var(--spacing)/2);
    position: relative;
    @media only screen and (max-width: 2560px) {
        .recent-posts-title {
            margin: calc(var(--spacing)/2) auto;
        }
        .tags-container {
            margin-top: calc(var(--spacing)/2);
            margin-bottom: calc(var(--spacing)/2);
        }
        .tag-post-list {
            font-size: smaller;
        }
    }
    @media only screen and (min-width: 2560px) {
        width: calc(100% / 3 - calc(var(--spacing) * (2/3)));
    }
    transition: 0.25s;
}

.recent-posts-post:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.recent-posts-post-block {
    content: "";
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--fg0);
    top: 1ch;
    @media only screen and (min-width: 2561px) {
        top: unset;
        bottom: 1ch;
    }
    right: 1ch;
        @media (prefers-reduced-motion: no-preference)  {
            animation: blink 2s infinite;
        }
    @media only screen and (max-width: 225px) {
        display: none;
    }
}

.recent-posts-viewall {
    margin: 0 0 0 auto;
    width: fit-content;
    height: fit-content;
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0.5ch;
    font-size: smaller;
    align-self: flex-end;
}

.recent-likes-like {
    width: 100%;
    border: solid 1px var(--fg0);
    padding: 0 calc(var(--spacing)/2);
    font-size: smaller;
    .tag-post-list {
        font-size: small;
        margin: calc(var(--spacing)/3);
    }
    a {
        text-decoration-color: var(--blue);
    }
    p {
        margin: calc(var(--spacing) / 2) auto;
    }
    transition: 0.25s;
}

.recent-likes-like:hover {
    transform: scale(1.05);
    transition: 0.25s
}

.recent-posts-title {
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0.5ch;
    a {
        text-decoration-color: var(--blue);
    }
    font-size: 1.5rem;
    font-family: Iosevka Aile;
    @media only screen and (max-width:1280px) {
        font-size: 1rem;
    }
    @media only screen and (max-width:1080px) {
        font-size: 1.5rem;
    }
}

.other-pages-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    margin: var(--spacing) auto;
}

.other-page {
    width: calc(100% / 4 - calc(var(--spacing) * (3/4)));
    border: solid 1px var(--fg0);
    padding: 0 calc(var(--spacing)/2);
    position: relative;
    p {
        font-size: smaller;
    }
    @media only screen and (max-width: 1920px) {
        width: calc(100% / 2 - calc(var(--spacing) / 2));
    }
    @media only screen and (min-width: 2560px) {
        width: fit-content;
    }
    transition: 0.25s;
}

.other-page:hover {
    transition: 0.25s;
    transform: scale(1.05);
}

.blog-page-title::before {
    content: "";
    position: absolute;
    width: calc(3rem + 1.5rem);
    height: calc(3rem + 1.5rem);
    background-color: var(--fg0);
    margin-left: -7rem;
    @media only screen and (max-width: 1280px) {
        display: none;
    }
}

.recent-posts-container:hover .recent-posts-post:not(:hover), .recent-likes-container:hover .recent-likes-like:not(:hover), .other-pages-container:hover .other-page:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
    .recent-posts-post-block {
        animation-play-state: paused;
    }
}

@media only screen and (max-width: 1080px) {
    .blog-content-left {
        display: block;
        width: 100%;
    }

    .blog-content-right {
        display: block;
        width: 100%;
    }

    .tags-list {
        justify-content: space-between;
    }
}

@media only screen and (max-width: 450px) {
    .recent-posts-post {
        display: block;
        width: 100%;
    }

    .other-page {
        display: block;
        width: 100%;
    }
}

/* blog article */

article {
    margin: calc(var(--spacing) * 2) auto;
}

article a {
    word-break: normal;
    text-decoration-color: var(--blue);
}

article a[href^="http"]::after
{
    content: "↗";
    font-size: small;
    margin-left: 1ch;
    vertical-align: super;
    display: inline-block;
}

article img, article video {
    display: block;
}

article h2, article h3 {
    background-color: var(--fg1);
    color: var(--bg0);
    padding: 0 0.5ch;
    width: fit-content;
    transition: 0.25s;
    a {
        text-decoration: none;
        font-size: inherit;
        &::after {
                content: "#";
                font-size: 1.5rem;
                margin-left: 0.5ch;
                text-decoration: underline;
                text-decoration-thickness: 0.2ex;
                text-underline-offset: 0.3ex;
                text-decoration-color: var(--blue);
                display: inline-block;
                vertical-align: middle;
            }
        &:hover::after {
                text-decoration-thickness: 0.3ex;
            }
    }
    &:target {
        a::after {
            content: "\002190";
        }
    }
}

article p:nth-of-type(1)::first-letter {
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0 0.5ch;
    font-size: 3rem;
}

article p:last-child::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--fg0);
    margin-left: 0.5ch;
        @media (prefers-reduced-motion: no-preference) {
        animation: blink 1s infinite;
        }
}

@keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.65;
            }

            100% {
                opacity: 1;
            }
        }

/* undoing the mess caused by ::first-letter and ::after above and minor article elements styling
 * it's possible there's a better way of doing this but idk lol */
article {
    li p:last-child::after {
        display: none;
    }
    li p:nth-of-type(1)::first-letter {
        background-color: unset;
        color: unset;
        padding: unset;
        font-size: unset;
    }
    blockquote {
        background-color: var(--bg1);
        border-color: var(--blue);
        padding-top: 0.5ch;
        padding-bottom: 0.5ch;
    }
    blockquote p::before {
        content: "\201C";
    }
    blockquote p::after {
        content: "\201D";
    }
    blockquote p:last-child::after {
        content: "\201D";
        display: unset;
        width: unset;
        height: unset;
        background-color: unset;
        margin-left: unset;
            @media (prefers-reduced-motion: no-preference) {
            animation: none;
            }
    }
    blockquote p:nth-of-type(1)::first-letter {
        background-color: unset;
        color: unset;
        padding: unset;
        font-size: unset;
    }
    .footnotes-sep {
        width: 75%;
    }
    .footnotes {
        li {
            list-style: unset;
        }
        font-size: smaller;
    }
    .footnote-backref, .footnote-ref {
        color: var(--blue);
    }
    .spoiler p::first-letter {
        background-color: unset;
        color: unset;
        padding: unset;
        font-size: unset;
    }
    .spoiler p::after {
        display: none;
    }
    .work-item-gallery * {
        p:last-child::after {
            display: none;
        }
    }
}

article p {
    transition: 0.25s;
}
article li {
    transition: 0.25s;
}

article details {
    margin: calc(var(--spacing) * 2) auto;
    p:nth-of-type(1)::first-letter {
        background-color: unset;
        color: unset;
        padding: unset;
        font-size: unset;
    }
    p:last-child::after {
        display: none;
    }
    summary {
        background-color: var(--fg0);
        color: var(--bg0);
        padding: var(--spacing);
    }
}

/* reading help for some ppl: blends paragraphs that are not hovered, emphasizing the one being hovered and presumably being read */
article:hover p:not(:hover), article:hover li:not(:hover), article:hover img:not(:hover), article:hover .cover-caption:not(:hover), article:hover pre:not(:hover), article:hover button:not(:hover), article:hover iframe:not(:hover), article:hover blockquote:not(:hover), article:hover .work:not(:hover), article:hover h2:not(:hover), article:hover h3:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
}

article:hover .work-img:not(:hover), article:hover .spoiler-text:not(:hover), article:hover .work-img-project:not(:hover) {
    opacity: 1;
    mix-blend-mode: normal;
}

article:hover summary p:not(:hover) {
    opacity: 1;
    mix-blend-mode: normal;
}

article .work-item-gallery {
    height: 30vh;
}

@media only screen and (max-width: 1080px) {
    article .work-item-gallery {
        width: 100%;
        height: 100%;
        max-height: 90vh;
    }
}

@media only screen and (max-height: 820px) and (max-width: 1080px) {
    article .work-item-gallery {
        width: unset;
        height: 30vh;
    }
}

@media only screen and (max-height: 500px) and (max-width: 1080px) {
    article .work-item-gallery {
        width: unset;
        height: 90vh;
    }
}

.article-date {
    font-family: Iosevka Medium;
    color: var(--bg0);
    display: flex;
    position: relative;
    margin: var(--spacing) auto;
}

.article-date small {
    margin: 0 auto;
    position: relative;
}

.article-date-colour small {
    background-color: #076678;
    @media (prefers-color-scheme:dark) {
        background-color: var(--blue);
    }
    color: var(--bg0);
    padding: 0 var(--spacing);
    padding-right: calc((var(--spacing) /2));
}

.article-date-date small {
    background-color: var(--fg0);
    padding: 0 var(--spacing);
    padding-left: calc(var(--spacing) * 2);
    font-family: Iosevka Bold;
}

.article-date-hour small {
    background-color: var(--fg1);
    padding: 0 var(--spacing);
    font-family: Iosevka Medium;
}

/* creates the fake arrow, uses rem instead of px to stay aligned with different default font sizes */
.article-date-colour small::after, .article-date-date small::after, .article-date-hour small::after, .article-car-colour small::after {
    content: "";
    position: absolute;
    border-width: 0 1.1rem 1.1rem 0;
    right: -0.55rem;
    top: 0.25rem;
    z-index: 10;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    }

.article-date-colour small::after {
    border-style: solid;
    border-color:  #076678;
    @media (prefers-color-scheme:dark) {
        border-color: var(--blue);
    }
}

.article-date-date small::after {
    border-style: solid;
    border-color: var(--fg0);
}

.article-date-hour small::after {
    border-style: solid;
    border-color: var(--fg1);
}

.article-date-date:hover small {
    background-color: var(--fg2);
    color: var(--bg0hc);
}

.article-date-date:hover small::after {
    border-color: var(--fg2);
}

.article-date-hour:hover small {
    background-color: var(--fg4);
    color: var(--bg0hc);
}

.article-date-hour:hover small::after {
    border-color: var(--fg4);
}

@media only screen and (max-height: 720px) {
    .article-date-colour small::after, .article-date-date small::after, .article-date-hour small::after, .article-car-colour small::after {
        border-width: 0 0.8rem 0.8rem 0;
        right: -0.35rem;
        top: 0.1rem;
    }
}

@media only screen and (max-width: 400px) {
    .article-date-date small {
        padding-left: var(--spacing);
    }
}

/* remove the hour field from the date field to keep the general aesthetic from breaking by having the date go on two lines */
@media only screen and (max-width: 450px) {
    .article-date-hour {
        display: none;
    }
}

/* tags and blog navigation */

.blog-top-navigation {
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
}

.blog-top-navigation::after {
    content: "\003e";
    display: inline-block;
    transform: rotate(90deg);
    margin-left: 1ch;
    transition: 0.25s;
}

.blog-top-navigation:hover::after {
    transform: rotate(0deg);
    transition: 0.25s;
}

.backtoblog {
    text-decoration-color: var(--blue);
    /*background-color: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding: 0 0.5ch;
    p {
        width: fit-content;
    }
    margin-left: 0;*/
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: var(--spacing);
    @media only screen and (max-width: 1280px) {
        gap: calc(var(--spacing)/2);
    }
    margin-top: var(--spacing);
    margin-bottom: calc(var(--spacing) * 2);
}

.tag {
    background-color: var(--fg0);
    color: var(--bg0);
    padding: 0.5ch;
    transition: 0.25s;
}

.tag-post-list {
    padding: 0.5ch;
    transition: 0.25s;
    text-decoration: none;
    border: solid 1px var(--fg0);
}

.tags-container:hover .tag:not(:hover), .tags-container:hover .tag-post-list:not(:hover), .tags-list:hover .tag-post-list:not(:hover), .recent-likes-like:hover .tag-post-list:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
        @media (prefers-color-scheme:dark) {
                mix-blend-mode: lighten;
            }
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
}

.tags-home-list {
    font-size: smaller;
}

.tags-list-tag {
    display: block;
    width: calc((100% / 3) - (var(--spacing) * (2/3)));
    @media only screen and (max-width: 450px) {
        width: 100%;
    }
}

.post-navigation-container {
    display: flex;
    gap: calc(var(--spacing) * 3);
    margin: calc(var(--spacing) * 2) auto;
    @media only screen and (max-width: 1080px) {
        flex-wrap: wrap;
        width: 100%;
        gap: var(--spacing);
    }
}

.post-navigation {
    width: 100%;
    background-color: var(--fg0);
    color: var(--bg0);
    padding: var(--spacing);
    h2 {
        font-size: 2rem;
        margin-top: var(--spacing);
        margin-bottom: var(--spacing);
        @media only screen and (max-height: 720px) {
            font-size: 1rem;
        }
        background-color: var(--bg0);
        color: var(--fg0);
        padding: 0 1ch;
    }
    hr {
        background-color: var(--bg0);
        margin: var(--spacing) auto;
        width: 75%;
    }
    a {
        word-break: normal;
    }
    transition: 0.25s;
}

.next-post {
    text-align: right;
    .next-post-description {
        text-align: left;
    }
    @media only screen and (max-width: 1080px) {
        a {
            word-break: normal;
        }
    }
}

.post-navigation-container:hover .post-navigation:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
}

.post-navigation a {
    text-decoration-color: var(--blue);
}

/* this is for smart watches lol */
@media only screen and (max-width: 225px) {

    main {
        * {
        font-size: 1rem;
        }
    }

    .work-title-overlay {
        font-size: 1rem;
    }

    .spoiler-text {
        font-size: 1rem;
    }

}

/* motorsport design */

.article-car-colour small {
    background-color: var(--red);
    @media (prefers-color-scheme:dark) {
        background-color: #fb4934;
    }
    padding: 0 var(--spacing);
    padding-right: calc((var(--spacing) /2));
    svg {
        height: 1rem;
        vertical-align: middle;
        fill: var(--bg0);
    }
    @media only screen and (max-width: 1280px) and (min-width: 1080px) {
        svg {
            height: 0.66rem;
        }
    }
    @media only screen and (max-width: 480px) {
        display: none;
    }
}

.article-car-colour small::after {
    border-style: solid;
    border-color:  var(--red);
    @media (prefers-color-scheme:dark) {
        border-color: #fb4934;
    }
}

@media only screen and (max-width: 480px) {
    .car-icon-hidden small {
        padding-left: var(--spacing);
    }
}

@media only screen and (max-width: 360px) {
    .car-icon-hidden small {
        font-size: small;
    }
    .car-icon-hidden small::after {
        display: none;
    }
}

.overlay-livery-title-container {
    margin-bottom: var(--spacing);
    margin-top: auto;
    text-align: center;
    h1, p {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    h1 {
        margin-bottom: calc(var(--spacing) / 2)
    }
    p {
        background-color: var(--fg0);
        color: var(--bg0);
        padding: 0 0.5ch;
        height: fit-content;
        svg {
            height: 1rem;
        }
    }
    @media only screen and (max-width: 1280px) {
        p {
            font-size: 1rem;
            svg {
            height: 0.75rem;
            }
        }
    }
    @media only screen and (max-width: 450px) {
        margin-bottom: 0;
    }
}

.car-download-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    @media only screen and (max-width: 450px) {
        gap: calc(var(--spacing) / 2);
    }
    margin: var(--spacing) auto;
}

.car-download-licenceDisclaimer {
    font-size: small;
    font-family: Iosevka Medium;
    p {
        background-color: var(--fg0);
        color: var(--bg0);
        padding: 0 0.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    a {
        text-decoration-color: currentColor;
    }
}

.car-download-btn {
    background-color: var(--red);
    @media (prefers-color-scheme:dark) {
        background-color: #fb4934;
    }
    width: calc(100% / 2 - calc(var(--spacing) / 2));
    font-family: Iosevka Bold;
    font-size: 1.5rem;
    color: var(--bg0hc);
    border: none;
    padding: 0.5ch;
    text-align: center;
    text-decoration: none;
    transition: 0.25s;
    .work-img {
        height: 1.5rem;
        margin: 0;
        display: inline;
        width: unset;
    }
    @media only screen and (max-width: 810px) {
        width: 100%;
    }
    @media only screen and (max-width: 450px) {
        width: 100%;
        img {
            height: 1rem;
        }
    }
    @media only screen and (max-height: 720px) {
        font-size: 1rem;
        img {
            height: 1rem;
        }
    }
}

.car-download-btn-psd {
    background-color: var(--blue);
}

.car-download-btn:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.backtoliveries p:nth-of-type(1)::first-letter {
    background-color: unset;
    color: unset;
    padding: unset;
    font-size: unset;
}

.backtoliveries p:last-child::after {
    display: none;
}


/* home page */

.home {
    h1 {
        margin-left: calc(var(--spacing) * 4);
        margin-top: 0;
        background-color: var(--fg0);
        color: var(--bg0);
        width: fit-content;
        padding: 0 1ch;
        position: relative;
        @media only screen and (max-width: 1280px) {
            margin-left: 0;
        }
    }
    h1::before {
        content: "";
        position: absolute;
        width: calc(3rem + 1.5rem);
        height: calc(3rem + 1.5rem);
        background-color: var(--fg0);
        margin-left: -7.5rem;
        @media only screen and (max-width: 1280px) {
            display: none;
        }
    }
}

.home section {
    margin: calc(var(--spacing) * 3) auto;
}

.home .recent-likes-container {
    gap: var(--spacing);
}

.home .recent-posts-post, .home .recent-likes-like, .home .other-page {
    width: calc(100% / 3 - (var(--spacing) * (2/3)));
    @media only screen and (max-width: 1080px) {
        width: 100%;
    }
}

.home-pages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    margin: var(--spacing) auto;
    transition: 0.25s;
    .work-item {
        width: calc(100% / 4 - (var(--spacing) * (3/4)));
        transition: 0.25s;
        border-left: 0.5rem solid;
        border-radius: 0 10px 10px 0;
        @media only screen and (max-width: 1920px) {
            width: calc(100% / 2 - (var(--spacing) / 2))
        }
        @media only screen and (max-width: 1080px) {
            width: 100%;
        }
    }
    img {
        border-radius: 0;
    }
    .overlay {
        opacity: 1;
    }
    .work-title-overlay {
        margin: auto auto var(--spacing) 0;
        width: fit-content;
        font-size: 2rem;
        padding: 0 0.5ch;
        text-align: left;
        border-right: 0.5rem solid;
    }
}

.home-pages .work-item:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.home-pages:hover .work-item:not(:hover) {
    opacity: 0.85;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
}

/* webmentions styling */

.webmentions {
    h2 {
        width: fit-content;
        padding: 0 1ch;
        background-color: var(--fg0);
        color: var(--bg0);
    }
    a {
        text-decoration-color: var(--blue);
    }
}

.webmention {
    margin: var(--spacing) auto;
    border: solid 1px var(--fg0);
    padding: calc(var(--spacing)/2);
    transition: 0.25s;
    p {
        margin: calc(var(--spacing) / 2) auto;
    }
    picture {
        display: flex;
    }
}

.webmention img {
    margin: calc(var(--spacing) / 2) auto;
}

.webmention img:hover {
    transform: none;
}

.webmention:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.webmention__meta {
    display: flex;
    gap: calc(var(--spacing) / 2);
    align-items: center;
    background-color: var(--fg0);
    color: var(--bg0);
    width: fit-content;
    padding-right: 1ch;
    font-family: Iosevka Medium;
    strong {
        font-family: Iosevka Bold;
    }
    img {
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        height: auto;
        transition: 0.25s;
    }
    .u-url::after {
        content: "↗";
        font-size: small;
        margin-left: 1ch;
        vertical-align: super;
        display: inline-block;
    }
    .postlist-date-mobile {
        display: none;
    }
    @media only screen and (max-width: 450px) {
        width: unset;
        span, time {
            display: flex;
            min-width: 0;
            font-size: 1rem;
        }
        .webmention-author {
            max-width: 15ch;
        }
        .h-card, .postlist-date-mobile {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .postlist-date-mobile {
            display: flex;
        }
        .postlist-date {
            display: none;
        }
    }
}

.webmentions:hover .webmention:not(:hover) {
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: 0.25s;
    @media (prefers-color-scheme:dark) {
        mix-blend-mode: lighten;
    }
}

.inReplyTo {
    font-family: Iosevka Medium;
    display: flex;
    position: relative;
    margin: var(--spacing) auto;
    a {
        text-decoration-color: var(--aqua);
    }
}

.inReplyTo small {
    margin: 0 auto;
    position: relative;
}

.inReplyToPre small {
    background-color: var(--aqua);
    color: var(--bg0);
    padding: 0 var(--spacing);
    padding-right: calc((var(--spacing) /2));
}

.inReplyToLink small {
    padding: 0 var(--spacing);
    font-family: Iosevka Bold;
}

/* creates the fake arrow, uses rem instead of px to stay aligned with different default font sizes */
.inReplyToPre small::after {
    content: "";
    position: absolute;
    border-width: 0 1.1rem 1.1rem 0;
    right: -0.55rem;
    top: 0.25rem;
    z-index: 10;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border-style: solid;
    border-color: var(--aqua);
}

@media only screen and (max-height: 720px) {
    .inReplyToPre small::after {
        border-width: 0 0.8rem 0.8rem 0;
        right: -0.35rem;
        top: 0.1rem;
    }
}

/* MH Wilds layered armour */

.mhwilds {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing);
    align-items: center;
    .mhwildsPic {
        overflow: hidden;
        border-radius: 10px;
        height: 100%;
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            margin: 0;
        }
    }
    .mhwildsGear {
        border-left: solid 1px var(--fg0);
        section {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--spacing);
            align-items: stretch;
            padding: calc(var(--spacing) / 2);
            }
            div {
                align-content: center;
                align-items: center;
                img{
                    display: flex;
                    height: 32px;
                    width: 32px;
                    margin: calc(var(--spacing) / 2) auto;
                    border-radius: 0;
                }
                picture {
                    display: flex;
                    margin: auto;
                }
                p {
                    text-align: center;
                    margin: calc(var(--spacing) / 4);
                    line-height: 1.25;
                }
                p:nth-of-type(1)::first-letter {
                    background-color: unset;
                    color: unset;
                    padding: unset;
                    font-size: unset;
                }
                p:last-child::after {
                    display: none;
                }
                div {
                    display: flex;
                }
                .mhwildsGearColour {
                    width: 1.5rem;
                    height: 1.5rem;
                    border: solid 2px var(--fg0);
                    margin: auto;
                }
                .mhwildsGearGender {
                    width: 1rem;
                    height: 1rem;
                    border: solid 2px var(--fg0);
                    margin: calc(var(--spacing) / 2) auto;
                }
            }
        .mhwildsGearName {
            word-break: break-word;
        }
    }
    hr {
        margin: 0;
    }
    @media (width < 600px) {
        grid-template-columns: 1fr;
        .mhwildsGear {
            border: solid 1px var(--fg0);
            border-radius: 10px;
            section {
                display: grid;
                grid-template-columns: 1fr;
                padding-bottom: var(--spacing);
                div {
                    justify-content: center;
                }
            }
        }
    }
}



/* page transitions */

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }
/*
    main {
        view-transition-name: main-content;
    }

    html:active-view-transition-type(forward) {
      &::view-transition-old(main-content) {
        animation: 0.25s ease-out both slide-out-left;
      }
      &::view-transition-new(main-content) {
        animation: 0.25s ease-out both slide-in-right;
      }
    }

    html:active-view-transition-type(backward) {
      &::view-transition-old(main-content) {
        animation: 0.25s ease-out both slide-out-right;
      }
      &::view-transition-new(main-content) {
        animation: 0.25s ease-out both slide-in-left;
      }
    }

    @keyframes slide-out-left {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-100%);
        opacity: 0;
      }
    }

    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slide-out-right {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    @keyframes slide-in-left {
        from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }*/
}