/* Constants! */
:root
{
    --header-content: #d85507;
    --header-background: #FFFFFF;
    --header-shadow: #404040b0;

    --col1-content: #361D16;
    --col1-background: #FF775A; /* #FF5A37; */
    --col1-shadow: #582828b0;

    --col2-content: #473D1E;
    --col2-background: #FFBF64; /* #FFB143; */
    --col2-shadow: #494c34b0;

    --border: #FFFFFF;

	--link-text: #35ecff;
	--link-text-highlighted: #80f3ff;
	--link-text-clicked: #bff9ff;
    --link-text-shadow-col1: #15283fd9;
	--link-text-shadow-col2: #15202d;

    --col1-highlight-text: #75ff77; /* #7ee779; */
    --col1-highlight-text-shadow: #3a2423db;
    --col2-highlight-text: #96ff70; /* #a2ff88; */
    --col2-highlight-text-shadow: #0e0f0afa;

    --backup-background: #FFFFFF;

    --transition-time: 0.0875s;

    --blur-size: 6.0;
    --background-scale: 1.5;
}

/* Generics/overrides */
html
{
    width: 100vw;
    height: 100vh;
    font-size: 20px;

    font-family: "Trykker", serif;
    font-weight: 400;
    font-style: normal;

    overflow-y: hidden;
    overflow-x: hidden;
}
*
{
    padding: 0;
    margin: 0;
    border: 0;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
a
{
    text-decoration: underline;
    color: var(--link-text);
    -webkit-transition: color var(--transition-time);
       -moz-transition: color var(--transition-time);
         -o-transition: color var(--transition-time);
            transition: color var(--transition-time);
}
a:hover
{
    cursor: pointer;
    color: var(--link-text-highlighted)
}
a:active
{
    color: var(--link-text-clicked)
}
.col1 a
{
    text-shadow: 1px 1px 2px var(--link-text-shadow-col1);
}
.col2 a
{
    text-shadow: 1px 1px 2px var(--link-text-shadow-col2);
}
.alt-font, .content-box h2 {
    font-family: "Tsukimi Rounded", sans-serif;
    font-weight: 600;
    font-style: normal;
}
li {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 15px;
}
.col1 em {
    color: var(--col1-highlight-text);
    text-shadow: 1.25px 1.25px 2.25px var(--col1-highlight-text-shadow);
}
.col2 em {
    color: var(--col2-highlight-text);
    text-shadow: 1.25px 1.25px 2.25px var(--col2-highlight-text-shadow);
}

/* Background */
#background-image
{
    z-index: -1;
    position: absolute;
    top: calc(-2*var(--blur-size));
    min-width: calc(100vw + 2*var(--blur-size));
    min-height: calc(100vh + 2*var(--blur-size));
    height: auto;
    background-color: var(--backup-background);

    text-align: center;
    align: center;
    align-content: center;
    vertical-align: middle;

    filter: blur(var(--blur-size));
    scale: var(--background-scale);
}

/* Main page organization */
body
{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#main-scroller
{
    width: 100vw;
    height: max-content;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-color: var(--col2-content) var(--col2-background);
}
#page-header
{
    height: fit-content;
    padding: 15px 20px 30px 20px;
    margin: 35px 20px;
    background-color: var(--header-background);
    box-shadow: 4px 4px 4px var(--header-shadow);
    border-radius: 20px;

    text-align: center;
}
#page-header *
{
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
}
#page-header img
{
    font-size: 48px;

    font-family: "Eagle Lake", "Tsukimi Rounded", serif;
    font-weight: 400;
    font-style: normal;
}
#page-header #logo
{
    max-width: 25vw;
    max-height: 25vw;
}
#page-header p
{
    padding-left: auto;
    padding-right: auto;
}
.col-container
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;
}
.mini-col
{
    /*display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;*/

    display: grid;
    align-items: center;
}
.mini-col .content-box *:not(img)
{
    max-width: 35vw;
    text-wrap: wrap;
}
.mini-col .content-box img
{
    background-color: white;
    max-width: 90%;
    max-height: 17.5vw;
}
.content-box
{
    min-width: fit-content;
    max-width: 825px;
    height: fit-content;
    padding: 15px 32px 20px 32px;
    margin: 0px 20px 30px 20px;

    border: 4px solid var(--border);
    border-radius: 20px;

    text-align: left;
    text-wrap: wrap;
}
.content-box *:not(img)
{
    max-width: 55vw;
    text-wrap: wrap;
}
.content-box.small *:not(img)
{
    max-width: 32vw;
    text-wrap: wrap;
}
.content-box img
{
    max-width: 50vw;
    max-height: 60vw;
    text-indent: 10px;

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 16px;

    border: var(--border);
    border-style: solid;
    border-width: 4px;
    border-radius: 20px;
}
.content-box p:not(.no-indent)
{
    text-indent: 2em;
}
.content-box.col1
{
    color: var(--col1-content);
    background-color: var(--col1-background);
    box-shadow: 4px 4px 4px var(--col1-shadow);
}
.content-box.col2
{
    color: var(--col2-content);
    background-color: var(--col2-background);
    box-shadow: 4px 4px 4px var(--col2-shadow);
}
.content-box.small-width
{
    min-width: auto;
    max-width: 640px;
}
.content-box h2
{
    padding: 0px 10px 8px 10px;
    text-align: center;
}
spacer
{
    min-height: 50px;
}