/*
clearfix hack
Source: https://nicolasgallagher.com/micro-clearfix-hack/
*/

/* TODO?: Box shadow in IE6-9: https://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/ */
/* maybe add simple border as fallback */


/* TODO: PNG support only starts at NN4.04+, with transparency support coming later
convert to GIF instead? */

/* monospace font for code blocks */
@font-face {
    font-family: 'Space Mono';
    src: url('fonts/smr/SpaceMono-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/smr/SpaceMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/smr/SpaceMono-Regular.woff2') format('woff2'), /* Smaller than woff, but supported by fewer */
        url('fonts/smr/SpaceMono-Regular.woff') format('woff'), /* Modern Browsers */
        url('fonts/smr/SpaceMono-Regular.svg#SpaceMono-Regular') format('svg'); /* Legacy iOS */
}

/* calligraphy font for names */
@font-face {
    font-family: 'Great Vibes';
    src: url('fonts/gv/GreatVibes-A7yL.otf') format('opentype'),
        url('fonts/gv/GreatVibes-Wmr4.ttf') format('truetype');
}
/* TODO: check out font: 'Fira Code'; https://fonts.google.com/specimen/Fira+Code */



* {
    margin: 0;
    padding: 0;
    /* TODO: remove? consistency with IE browser (bug of content box sizing) */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    /* Enable font ligatures (if available) */
    font-variant-ligatures: common-ligatures;
    -webkit-font-variant-ligatures: common-ligatures;
    /* font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: historical-ligatures;
    font-variant-ligatures: contextual; */

}

html {
    /* global variables */
    /* Note: not placed in :root as not supported in IE6-8, Android 2.1-4.4.4, Opera mobile 12-12.1, and earlier browsers */
    /* for browsers that do not support variables a fallback needs to be provided at the place of use */

    /* Note: define colours and then define semantic variables based on colour variables
    so that you only need to update the semantic variables if you want to change colours; not also all places the colour needs to be changed in */
    --color-lightgrey: #dddddd;
    --color-grey: #aaaaaa;
    --color-celestecyan: #99bbbb;
    --color-darkgrey: #555555;
    --color-purple: #9f18fa;
    --color-violet: #9800a3;
    --color-orchid: #bd4afd;
    --color-pink: #fa6cff;

    /* TODO: add semantic variables for all that use these colours
    Since colour palette is changing still; I left these alone */
    --bg-color-darkblue: #002839;
    --bg-color-teal: #004039;
    --bg-color-lightteal: #005055;
    --bg-color-lighterteal: #006066;
    --bg-color-lightblue: #31b6ee;

    --color-charcoal: #202020;
    --color-darkpurple: #302050;
    --color-darkestpurple: #200050;

    --color-red: #DD2222;
    --color-yellow: #DDDD22;

    /* Semantic variables */
    --bg-color-default: var(--color-charcoal);
    --bg-color-body: var(--color-darkestpurple);
    --bg-color-hl: var(--color-darkpurple);

    --text-color-default: var(--color-grey);
    --text-color-hl: var(--color-celestecyan);
    --text-color-dark: var(--color-darkgrey);

    --title-color: var(--color-lightgrey);

    --color-error: var(--color-red);
    --color-warn: var(--color-yellow);
    --color-info: var(--bg-color-teal);

    --divider-color: var(--color-violet);
    
    /* TODO: to be removed when link-to has been removed */
    /* uses are now all commented out */
    --menu-height: 60px;

    --logo-width: 20%;
    --logo-max-width: 250px;
    /* end global variables */





    background: var(--color-charcoal);
    /* TODO: use different default font */
    font-family: Georgia, 'Times New Roman', Times, serif;


    /* TODO: set default text color */
}

body {
    /* min-height: 100vh; */
    position: relative;
    /* overflow-x: hidden; */
    /* display: flex;
    flex-flow: column nowrap; */
    background: #202020;
    background: var(--bg-color-default);
}

/* Hidden link, accessible for screenreaders */
.nav-skip-link {
    position: absolute;
    left: -1000px;
    left: -100vw;
    overflow: hidden;
}

/* Bring back on screen when focused */
.nav-skip-link:focus,
.nav-skip-link:active {
    position: static;
    overflow: visible;

}

/* background under main content of the page */
.bg-wrapper {
    background: #200050;
    background: var(--bg-color-body); /* fallback if background-image or url() is not supported */
    background-image: url("/media/background_sakura.png");
    background-repeat: repeat;
    /* not widely supported in older browsers, but not much of a deal-breaker 
    A possible solution would be to use a fixed div but that will break if position:fixed not supported; TODO look into more
    */
    background-attachment: fixed;

    /* Hack to prevent a margin collapse with a page-box 
    See: https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work */
    padding: 1px 0;
}

/* div.noscript inside noscript tag */
/* .noscript {
    color: #aaaaaa;
    color: var(--text-color-default);
    padding: 10px;
}

.noscript p {
    padding: 5px;
}

.noscript img {
    display: block;
} */

/* if the noscript is already loaded, this separate block doesn't need to be. */
/* TODO/NOTE: :has not widely supported in old browsers, IE */
/* \ Behaviour then: if .ifno-noscript is always shown when js disabled, regardless if noscript blocked */
/* noscript:has(> .noscript) + .ifno-noscript {
    display: none;
} */
/* THIS BEHAVIOUR HAS BEEN MOVED TO noscript.css */


/* Any content inside a .nojs-content block is hidden when javascript can be executed.
Note that this is different from putting it in a Noscript block, as that can be blocked from loading with the NoScript addon */
/* .js-enabled class applied by a JS script */
body.js-enabled .nojs-content {
    display: none;
}

/* Similarly any content in a .js-content block is hidden when javascript can NOT be executed. */
/* :not is not supported in lots of old browsers */
/* body:not(.js-enabled) .js-content {
    display: none;
} */
/* Instead .js-disabled is set by default and changed with a JS script */
body.js-disabled .js-content {
    display: none;
}

/* centers div content within parent container using margin:auto */
.centered-div {
    /* default fallback. If fit-content/intrinsic is supported, the content is still centered
    otherwise it behaves like a regular div */
    display: block;
    width: fit-content;
    width: -moz-fit-content; /* Firefox 3-93 */
    width: intrinsic; /* Chrome 4-21, Safari 3.1-6.1, Safari iOS 3.2-6.1 */
    width: -webkit-intrinsic; /* Chrome 22-45, Safari 7-10.1, Opera 15-32, Safari iOS 7-10.3, Samsung Internet 4, Android Browser 4.4-4.4.4 */

    /* This allows for margin:auto centering, but has some limitations in dynamic resizing I don't understand 
    override to 'display: block' if not working as intended */
    display: table;
    border-spacing: 0;

    margin-left: auto;
    margin-right: auto;
}

/* 2px wide line, as high as the font height */
.v-divider {
    margin: 0 20px; /* default spacing; override if necessary */
    width: 0;
}

.h-divider {
    display: block;
    border-width: 1px;
    border-style: inset;
    overflow: hidden;

    margin: 0 20px;
}

/* Adds an outline and spacing above/below */
.page-box {

    /* Default background colour */
    background: #202020;
    background: var(--bg-color-default);


    margin: 20px 0;
    /* Box shadow not supported on IE 9-; see top */
    -webkit-box-shadow: 0 0 2px #9800a3; /* Safari 3.1-4, Safari iOS 3.2, Android 2.1-3  || These versions don't support blur */
    box-shadow: 0 0 2px 2px #9800a3;
    -moz-box-shadow: 0 0 2px 2px #9800a3; /* Firefox 3.5-3.6 */
    box-shadow: 0 0 2px 2px var(--divider-color);
    -webkit-box-shadow: 0 0 2px 2px var(--divider-color); /* Chrome 4-9, Safari 5, Safari iOS 4-4.3 */
}

.v-divider,
.h-divider,
.page-box {
    border: 1px solid #9800a3;
    border: 1px solid var(--divider-color);
}

.page-wrapper {
    /* TODO: add fallback for percentages? Probably not, as it should just be 100% screen resolution (which is (max-)width: unset) */
    /* TODO: add IE6 hack for max-width? */
    display: block; /* override of .centered-div */

    min-width: 320px; /* Width of CGA/QVGA, the smallest commmon screen resolutions */
    max-width: 60%;
    min-width: calc(min(600px, 100%));
    max-width: calc(max(60%, min(600px, 100%)));
}

.page-wrapper.wide {
    min-width: 320px;
    max-width: 80%;
    min-width: calc(min(800px, 100%));
    max-width: calc(max(80%, min(800px, 100%)));
}

/* TODO: unused? may have been replaced with .bg-wrapper */
.bg-pattern {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    
}

.content-wrapper {
    background: #152931;
    /* TODO: set var() overwrite */
    margin: 15px;
    padding: 15px;
    border-radius: 15px;
    overflow-x: hidden;
    /* Allows for absolute positioning relative to the content */
    /* position : relative; */
}

.content-wrapper.not-boxed {
    background: transparent;
    border-radius: 0;
    margin: 15px 0;
}

/* SCROLLBAR
Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79. */

/* width */
::-webkit-scrollbar {
    /* margin-top: var(--menu-height); */
    height: 10px;
    width: 10px;
    background: transparent;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    /* margin-top: var(--menu-height); */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--bg-color-lightteal);
    border-radius: 10px;
    border: 1px solid var(--bg-color-teal);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--bg-color-teal);
}

/****************
Title bar styling:
*******************/

.header {
    background: #202020;
    background: var(--bg-color-default);
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;

    border-bottom: 1px solid #9800a3;
    border-bottom: 1px solid var(--divider-color);

    /* Box shadow not supported on IE 9-; see top of css for todo */
    -webkit-box-shadow: 0 2px 0 #9800a3; /* Safari 3.1-4, Safari iOS 3.2, Android 2.1-3  || These versions don't support blur */
    box-shadow: 0 2px 2px 0 #9800a3;
    -moz-box-shadow: 0 2px 2px 0 #9800a3; /* Firefox 3.5-3.6 */
    box-shadow: 0 2px 2px 0 var(--divider-color);
    -webkit-box-shadow: 0 2px 2px 0 var(--divider-color); /* Chrome 4-9, Safari 5, Safari iOS 4-4.3 */
}

.logo {
    float: left;
    margin-right: 20px;
}

.logo,
.logo img {
    /* background: transparent; */
    /* width: var(--logo-width); */
    max-width: var(--logo-max-width);
}

.logo:hover {
    opacity: 0.8;
}

/* if logo in the nav bar,
    use the height of the nav bar instead */
/* nav .logo,
nav .logo > img {
    width: unset;
    height: var(--menu-height);
} */

.title {
    /* Just set the font-size smaller? */
    /* font-size: 1em; */
    /* font-size: max(3vw, 2em);
    font-size: clamp(2em, 3vw, 4em);
    width: calc(100% - min(var(--logo-width), var(--logo-max-width))); */
    /* TODO: change font */
    padding: 20px;
    padding-right: 0;
    display: block;
    /* word-wrap: break-word; */
    /* white-space: normal; */
    color: var(--title-color);
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}

.breadcrumb {
    color: gray;
    font-family: 'Space Mono', 'Courier New', Courier, monospace;
    font-size: 0.9em;
    margin-left: 40px;
}

.breadcrumb a {
    text-decoration: none;
}

/*************
End title bar
***********/

/****************
nav menu styling:
*******************/

.nav {
    background: #202020;
    background: var(--bg-color-default);
    padding: 10px;

    word-break: break-all;
    word-break: break-word;
    white-space: normal;
}

.nav-inline {
    margin-left: 40px;
}

.nav a {
    text-decoration: none;
    font-family: 'Space Mono', 'Courier New', Courier, monospace;
    font-size: 0.8em;
}

/*************
End nav
***********/

/***********
Footer styling:
************/

.footer {
    /* Background is set in body background */
    /* background: #202020; */
    width: 100%;
    overflow-x: hidden;
    border-top: 1px solid #9800a3;
    border-top: 1px solid var(--divider-color);

    /* Box shadow not supported on IE 9-; see top */
    -webkit-box-shadow: 0 -2px 0 #9800a3; /* Safari 3.1-4, Safari iOS 3.2, Android 2.1-3  || These versions don't support blur */
    box-shadow: 0 -2px 2px 0 #9800a3;
    -moz-box-shadow: 0 -2px 2px 0 #9800a3; /* Firefox 3.5-3.6 */
    box-shadow: 0 -2px 2px 0 var(--divider-color);
    -webkit-box-shadow: 0 -2px 2px 0 var(--divider-color); /* Chrome 4-9, Safari 5, Safari iOS 4-4.3 */
}

.footer-info {
    margin-top: 20px;
    margin-bottom: 20px;

    font-size: 1em;
    padding: 0 20px;
    line-height: 2em;
}

.footer-info a {
    margin: 0 5px;
    text-decoration: none;
    white-space: nowrap;
}

.small-footer-text {
    font-size: 0.6em;
    color: #fa6cff;
    color: var(--color-pink);
    color: var(--color-grey);
}

.kofi-footer-text {
    font-size: 0.7em;
    color: #fa6cff;
    color: var(--color-pink);
}

.kofi-footer-text a {
    text-decoration: none;
}

.bttns-container {
    margin: 20px auto;
    display: block; /* default fallback */
    display: table; /* table as fallback */
    border-spacing: 0;

    display: flex;
    display: -webkit-flex; /* Chrome 21-28, Safari 7-8, Opera 15, Safari iOS 7-8.4 */
    display: -ms-flexbox; /* IE 8-11 */

    -webkit-justify-content: center; /* Chrome 21-28, Safari iOS 7-8.4 */
    justify-content: center;

    -ms-flex-wrap: wrap; /* IE 10 */
    -webkit-flex-wrap: wrap; /* Chrome 21-28, Safari 7-8, Opera 15, Safari iOS 7-8.4 */
    flex-wrap: wrap;
    
    font-size: 0; /* remove newline spacing between buttons */
}

.bttn-88x31 {
    width: 88px;
    height: 31px;
    border: 2px solid transparent;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    
}
.bttn-88x31:hover {
    border-color: white; /* variable fallback */
    border-color: var(--divider-color);

    /* variable fallback */
    box-shadow: 0 4px 4px -4px #9800a3;
    -moz-box-shadow: 0 4px 4px -4px #9800a3; /* box-shadow: Firefox 3.5-3.6 (does not support variables anyway) */
    -webkit-box-shadow: 0 4px 4px -4px #9800a3; /* box-shadow: Chrome 4-9, Safari 3.1-5, Safari iOS 3.2-4.3, Android 2.1-3 */

    box-shadow: 0 6px 4px -4px var(--divider-color);
    -webkit-box-shadow: 0 4px 4px -4px var(--divider-color);
}

.footer-img {
    margin-right: 40px;
    margin-left: auto;
    float: right;
    display: block;
}

/***********
End footer
***********/

.disclaimer {
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    width: 100%;
    text-align: center;
    color: var(--text-color-default);

}

.last-updated-wrapper {
    width: 100%;
    text-align: right;
}

.last-updated {
    font-size: 80%;
    display: inline-block;
    border-radius: 10px;
    padding: 5px;
    background: darkslategray;
    opacity: 0.4;
    border: none;
}

.last-updated:hover,
.last-updated:focus {
    opacity: 1;
}

section {
    --section-aligned-width: calc(max(60%, min(100%, 400px)));

    border-radius: 15px;
    background: var(--bg-color-teal);
    margin: 5px 0;
    padding: 20px 10px;
    font-size: 1em;
}

section:not(:first-child) {
    margin-top: 30px;
}

section.align-left {
    width: var(--section-aligned-width);
    margin-right: auto;
}

section.align-right {
    width: var(--section-aligned-width);
    margin-left: auto;
}

/* SECTION: section title styling */
section .s-title {
    padding-left: 10px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid var(--text-color-hl);
}

section .sub-title {
    margin-top: 5px;
    margin-bottom: 15px;
}

a.section-link {
    color: var(--text-color-hl);
    text-decoration: none;
}

/* END: section title styling */

/* SECTION: media styling */
.media-section {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    border-top: dashed 1px var(--bg-color-darkblue);
    border-bottom: dashed 1px var(--bg-color-darkblue);
}

/* .media-section.align-left {
    justify-content: left;
} */

/* .media-section.align-right {
    justify-content: right;
} */

.media-wrapper {
    /* width: 100%;
    display: grid;
    grid-auto-flow: column;
    gap: 15px;
    align-items: center;
    justify-content: space-between; */
    background: var(--bg-color-lightteal);
    border-radius: 15px;
    padding: 5px 15px;
    overflow-x: auto;
}

/* .media-wrapper:has(:only-child),
.media-wrapper.singular {
    width: initial;
} */

/* Figure type */
/* figure.media {
    background: var(--bg-color-lightblue);
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
} */

/* Text type */
/* div.media {
    background: var(--bg-color-lightblue);
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    overflow-y: auto;
    height: 100%;
    min-width: 300px;
} */

/* figure.media .media-content {
    display: inline-block;
    max-height: 400px;
} */

/* figure.media figcaption {
    color: var(--text-color-dark);
} */


.slideshow {
    --sh-width-image: max(40vw, min(100vw, 700px));
    --sh-height-image: max(20vw, 300px);
    --sh-padding-top: 5px;
    --sh-padding-left: 15px;
    --sh-size-box: 20px;
    --sh-nav-margin: 10px;
    --bg-color-sh-nav: var(--text-color-hl);
    --text-color-sh-nav: #555555;

    /* width of image + space for nav buttons */
    width: var(--sh-width-image);
    height: var(--sh-height-image);
    padding: var(--sh-padding-top) var(--sh-padding-left);

    position: relative;
    overflow-x: hidden;

    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

/* .slideshow .media .media-content {
    max-height: var(--sh-height-image);
} */

/* default of all media: move them to the left, out of frame */
.slideshow > .slide {
    position: absolute;
    top: var(--sh-padding-top);
    left: calc(-1 * var(--sh-width-image));
    opacity: 0;
    filter: blur(5px);
    width: calc(100% - 2 * var(--sh-padding-left));
    height: calc(100% - 2 * var(--sh-padding-top));
    background: var(--bg-color-lighterteal);

    overflow: hidden;
    transition: left 1s ease-in-out, opacity 1s ease-in-out, filter 1s ease-in-out;
}

/* 
Move all media after a checked nav button to the right, out of frame.
 > the active image and all images after it are now placed on the right.
*/
.slideshow-nav:checked ~ .slide {
    left: var(--sh-width-image);
}

/* 
Select active image and move it back in view.
Checkboxes are offset by one image to make selection possible.
Second line is for edge case to target first image.
Third line is for edge case to target last image.
*/
.slideshow-nav:not(:checked) + .slide + .slideshow-nav:checked + .slide,
.slideshow-nav:first-child:checked + .slide,
.slideshow-nav:not(:checked) + .slide + .slide:last-child {
    display: flex;
    left: var(--sh-padding-left);
    opacity: 1;
    filter: none;
}

/* default all nav buttons to left */
.slideshow-nav {
    position: absolute;
    top: calc(var(--sh-height-image) / 2 - var(--sh-size-box));
    left: var(--sh-nav-margin);
    width: 0;
    height: 0;
    border-radius: 50%;
    border: var(--sh-size-box) solid var(--bg-color-sh-nav);
    appearance: none;
    font-size: 2em;
    transition: border 10ms ease-out, top 10ms ease-out, font-size 10ms ease-out;
    cursor: pointer;
    z-index: 10;
}

/* Move checkbox to right if checked */
.slideshow-nav:checked {
    left: unset;
    right: var(--sh-nav-margin);
}

.slideshow-nav:hover {
    --sh-size-box: 22px;
    --sh-nav-margin: 9px;
    font-size: calc(2em + 2px);
}

/* Create the left arrow */
.slideshow-nav::before {
    content: "<";
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: var(--sh-size-box);
    height: var(--sh-size-box);
    top: calc(-0.5 * var(--sh-size-box));
    left: calc(-0.5 * var(--sh-size-box));
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: var(--text-color-sh-nav);
}

/* Turn it into a right arrow when checked */
.slideshow-nav:checked::before {
    content: ">";
}

/* Hide unnecessary checkmarks on right so that the right checkmark is selectable*/
.slideshow-nav:checked ~ .slideshow-nav {
    display: none;
}

/* END: media styling */

/* SECTION: info block styling */
.info {
    background: var(--bg-color-lightteal);
    border-left: solid var(--bg-color-darkblue) 5px;
    margin: 10px;
    padding: 10px;
    border-radius: 0px 5px 5px 0px;
    box-shadow: 0 5px 5px -2px #555555aa;
}

.info.important {
    border-left: solid var(--color-error) 5px;
}

.info.warn {
    border-left: solid var(--color-warn) 5px;
}

.info.icon {
    padding-left: 35px;
    position: relative;
}

.info.icon::before {
    position: absolute;
    content: "i";
    font-size: 15px;
    font-weight: bolder;
    width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50%;
    border: solid 2px var(--text-color-hl);
    color: var(--text-color-hl);
    background: transparent;
    left: 8px;
}

.info.warn.icon::before,
.info.important.icon::before {
    content: "!";
}

/* END: info block styling */

section ul,
section ol {
    list-style-type : none;
    padding-inline-start: 0px;
    margin-left: 1em;
}

/* Style link: slide animation underline on hover */
a.slide-hover,
p a {
    text-decoration-style: dotted;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 2px;
    position: relative;
    color: var(--text-color-hl);
}

a.slide-hover::before,
p a::before {
    position: absolute;
    content: "";
    /* TODO: bottom has spotty support on older browsers (then again, calc() and ::before are not supported either) */
    bottom: calc(-0.1em + 1px);
    bottom: 0;
    width: 2px;
    height: 2px;
    background: var(--text-color-hl);
    display: inline-block;
    visibility: hidden;

    transition: width 0.5s ease-in-out, visibility 0s linear 0.5s;
}

a.slide-hover:hover::before,
a.slide-hover:focus::before,
p a:hover::before,
p a:focus::before {
    transition: width 0.1s ease-in-out, visibility 0s linear;
    width: 100%;
    visibility: visible;
}

/* TODO: use alternative for ::after, webp, and filter (just bake the colour beforehand) */
a[target="_blank"]::after {
    background-image: url('./media/external-link.webp');
    background-size: 1em 1em;
    display: inline-block;
    margin-left: 3px;
    width: 1em;
    height: 1em;
    content: "";
    /* Generated using: https://codepen.io/sosuke/pen/Pjoqqp 
        A code snippet that generates the filters needed to convert from a black image to any desired HEX colour value (approximately).*/
    filter: invert(46%) sepia(94%) saturate(615%) hue-rotate(153deg) brightness(91%) contrast(104%);
    -webkit-filter: invert(46%) sepia(94%) saturate(615%) hue-rotate(153deg) brightness(91%) contrast(104%);
}

/* TODO: check when > and :not() selectors were added to browsers */
section > p,
section > :not(.code-block) p,
section .info {
    color: var(--text-color-default);
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
}

.p-start {
    font-style: italic;
    font-weight: bold;
    color: var(--text-color-hl);
    font-size: 1.05em;
}

.inline-code,
.code-block {
    font-family: 'Space Mono', 'Courier New', Courier, monospace;
    color: white;
    line-height: 1.5em;
}

.inline-code {
    display: inline-block;
    background: var(--bg-color-darkblue);
    padding: 0 5px;
    border-radius: 5px;
    font-size: 0.8em;
}

.code-block {
    display: block;
    background: var(--bg-color-darkblue);
    padding: 5px 5px 5px 10px;
    line-height: 1.5em;
    border-left: solid var(--bg-color-lightteal) 5px;
    margin: 10px;
    border-radius: 0px 5px 5px 0px;
    font-size: 0.8em;
}

/* SECTION: welcome message styling */

/* Animation with variables crashes in Edge 15: DO NOT USE VARIABLES */

/* slide-in animation of the welcome splash screen text */
@keyframes slide-in {
    from {
        margin-left: 0;
        /* Safari <13.1.3 possibly does not apply filter during animation (but might be only for child elements)
        See: https://bugs.webkit.org/show_bug.cgi?id=219729 */
        filter: blur(2px);
        -webkit-filter: blur(2px);
        opacity: 0;
    }

    to {
        margin-left: 50px;
        margin-left: 5vw;
        filter: none;
        -webkit-filter: none;
        opacity: 1;
    }
}

.welcome-wrapper {
    --bg-welcome-wrapper-hl: var(--divider-color);
    --bg-welcome-wrapper-default: var(--bg-color-default);


    width: 100%;
    min-height: 50vw;
    min-height: calc(min(100vh, 50vw));

    /* Linear gradient fallback */
    background: #202020;
    background: var(--bg-color-default);

    /* Linear gradient on right side of welcome splash screen */
    background: linear-gradient(to right, #202020 80%, #9800a3);
    background: -o-linear-gradient(to right, #202020 80%, #9800a3);
    background: -webkit-linear-gradient(to right, #202020 80%, #9800a3);
    background: -moz-linear-gradient(to right, #202020 80%, #9800a3);

    background: linear-gradient(to right, var(--bg-welcome-wrapper-default) 80%, var(--bg-welcome-wrapper-hl));
    background: -o-linear-gradient(to right, var(--bg-welcome-wrapper-default) 80%, var(--bg-welcome-wrapper-hl));
    background: -webkit-linear-gradient(to right, var(--bg-welcome-wrapper-default) 80%, var(--bg-welcome-wrapper-hl));
    background: -moz-linear-gradient(to right, var(--bg-welcome-wrapper-default) 80%, var(--bg-welcome-wrapper-hl));
    
    /* anchor for art to position relative to */
    /* position: relative; */

    margin-bottom: 30px;
}

.welcome-msgbox {
    padding: 100px 0 0 100px;
    padding: 10vh 0 0 5vw;


    color: var(--text-color-default);
}

.welcome-msg {
    /* TODO change font */
    font-size: 3.5em;
    font-weight: 150;
}

.welcome-msg span {
    color: var(--color-purple);
    font-family: 'Great Vibes', cursive;
    font-weight: 100;
}

.welcome-subcaption {
    padding: 1vw 0;
    font-size: 1.2em;
    font-style: italic;
}

.welcome-subcaption span {
    /* TODO change font */
    color: var(--color-pink);
    font-style: normal;
}

.welcome-occupations {
    /* TODO: change font */
    font-size: 1.4em;

    color: var(--color-orchid);
}

.welcome-slide {
    /* animation end state (possibly overridden below) */
    margin-left: 50px;
    margin-left: 5vw;
    opacity: 1;

    /* Set individual properties for graceful fallback */
    animation-name: slide-in;
    -moz-animation-name: slide-in;
    -webkit-animation-name: slide-in;
    -o-animation-name: slide-in;

    animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;

    animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;

    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;

    animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;

    /* Same animation as above */
    /* animation: 1s ease-out 0.2s 1 normal forwards slide-in; */
}

/* Flicker may appear in browsers that support animation but not @supports */
@supports (animation-name: test, test1) and (animation-fill-mode: forwards) {
    /* only set to animation begin state if animations and animation fill mode are supported
    otherwise, at the end of the animation, or if animation at all not supported, it hides the text.
    Set to begin state to avoid loading flicker */
    .welcome-slide {
        opacity: 0;
        margin-left: 0;
    }
}

.welcome-art-wrapper {
    /* position: absolute;
    right: 2vw;
    bottom: 0; */

    display: block;
    margin-left: auto;
    padding-left: 100px; /* only used if width:fit-content is not supported */
    /* TODO width: the intrinsic width of the image (image to be changed) */
    width: fit-content;
    width: -moz-fit-content; /* Firefox 3-93 */
    width: intrinsic; /* Chrome 4-21, Safari 3.1-6.1, Safari iOS 3.2-6.1 */
    width: -webkit-intrinsic; /* Chrome 22-45, Safari 7-10.1, Opera 15-32, Safari iOS 7-10.3, Samsung Internet 4, Android Browser 4.4-4.4.4 */
}

.welcome-art {
    /* TODO add fallback? */
    width: 20vw;
}

/* END SECTION: welcome message styling */

/* SECTION: Grid Tiles */

.project-list {
}

.project-item {
    padding: 10px;
    list-style-type: none;
}

.project-item > a,
.project-item > a:visited {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 5px;
}

.project-item:hover > a {
    background: #303030;
    background: var(--bg-color-hl);
    
}

.project-item:hover .project-item-title {
    text-decoration: underline;
}

.project-item > img {
    float: left;
}

.project-item-text {
    display: inline-block;
    margin-left: 10px;
}

.project-item-title {
    /* text-align: center; */
    padding-bottom: 5px;
    font-family: 'Space Mono', 'Courier New', Courier, monospace;
    color: var(--text-color-hl);
}

/* END SECTION: Grid Tiles */