@import url('https://fonts.bunny.net/css?family=henny-penny:400|yarndings-12:400');

:root {
    --primaryTextColor: #2d3036;
    --secondaryTextColor: #ec8600;
    --secondaryColor: #ffa024;
    --roundness: 1000px;
}

* { box-sizing: border-box; }

::selection {
    background-color: royalblue;
    color: white;
}

body {
    display: flex;
    align-items: center;
    flex-direction: column;

    font-family: Arial;
    color: var(--primaryTextColor);
    margin: 0px;
    min-height: 100dvh;
}

h1 {
    font-family: 'Henny Penny', display;
    color: var(--primaryTextColor);
}

body > :is(header, footer) { width: 100%; }

body > :is(header, footer) > div {
    padding: 2.5em 2em;
    width: 100%;
    max-width: 1000px;
}

body > main { 
    width: 100%; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

@media (max-width: 425px) {
    body > main {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    body > main > * > :not(img) span {
        display: none;
        transition: none;
    }
}

body > main > * {
    display: flex; padding: 0px;
}

body > main > * > :not(img) {
    transform: translateY(100px);
    position: absolute;
    width: 100%; height: 100%;
    padding: 1em;
    background-color: transparent;
    color: var(--primaryTextColor);
    display: flex;
    align-items: end;
    font-size: large;
    font-family: Arial;

    transition: transform 0.3s ease-in-out;
}

body > main > * > :not(img) span {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    padding: 0.5em 0.9em;
    border-radius: var(--roundness);
    border-bottom-left-radius: 0px;
}

body > main > * img {
    width: 100%;
    display: inline-block;

    aspect-ratio: 3/4;
    object-fit: cover;

    transition: all 0.125s ease-in-out;
    transform: scale(1.01);
}


body > main > :is(*:hover, *:focus-visible) img {
    transform: scale(1.1); transform-origin: center;
    filter: brightness(1.1) contrast(1.05);
}

body > main > :is(*:hover, *:focus-visible) > :not(img) {
    transform: translateY(0px);
}
 
/* Other */
span.dot { color: var(--secondaryTextColor); }

.notxt {
    font-family: "Yarndings 12", display;
    font-size: xx-large;
}

.notxt.small { font-size: large; }
.notxt.medium { font-size: x-large; }

button.image {
    appearance: none; background-color: transparent; position: relative; border: none;
    cursor: pointer; overflow: hidden;
}

/* Headings */
:is(h1, h2, h3, h4).icon-heading { display: flex; align-items: center; gap: 0.3em; }
:is(h1, h2, h3, h4).underlined { 
    text-decoration: var(--secondaryColor) 3px solid underline; 
    text-underline-offset: 5px;
}

/* Header */
header {
    position: sticky;
    top: 0em;
    background-color: white;
    z-index: 998;

    display: flex;
    justify-content: center;
}

header h1 {
    margin-block: 0em;
    position: relative;
    top: 4px;
}

header > div {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 1em;
    align-items: center;
}

header > div > a {
    text-decoration: none;
}

header > div > :last-child { 
    justify-self: end;
}

header > div > div.buttons {
    display: flex;
    gap: 0.66em;
}

header > div > :not(a) :is(button, a) {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    color: var(--primaryTextColor);
    border: none;
    background-color: #eee;
    width: 48px; height: 48px;
    border-radius: 100px;

    cursor: pointer;
}

header > div > :not(a) :is(button:hover, button:focus-visible, a:hover, a:focus-visible) {
    background-color: #fff;
    outline: 1px solid #ccc;
}

/* Section */
:is(section, .section) {
    width: 100%;
}

:is(section, .section).dimmed {
    background-color: #eee;
}

:is(section, .section) > div.wrapper {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 2em;
}

:is(section, .section) > div.wrapper.cutoff { padding-bottom: 0px; }

:is(section, .section) > div.wrapper a {
    color: var(--primaryTextColor);
    text-decoration: none;
    font-size: smaller;
}

:is(section, .section) > div.wrapper a.alt {
    background-color: #eee;
    border: 1px solid #ddd;
    display: inline-flex;
    padding: 0.5em 0.8em;
    gap: 0.5em;
    align-items: center;
}

/* Footer */
footer {
    margin-top: auto;

    font-size: small;
    color: #444;
    padding: 0em 0.5em;
    border-top: 1px solid rgba(0,0,0,0.2);

    display: grid;
    grid-template-columns: auto max-content;

    align-items: center;
}

footer > :last-child { display: flex; gap: 0.7em; justify-content: center; }

/* Tooltip */
:is(span, button, a, div):has(> *.tooltip) {
    position: relative;
}

*.tooltip {
    --offset: 6px;
    display: block;
    position: absolute;
    top: calc(100% + var(--offset));
    left: 50%; 
    font-size: small;
    font-family: Arial, sans-serif;
    transform: translateX(-50%);
    background-color: #333;
    padding: 0.5em 0.8em;
    padding-top: 0.6em;
    color: #ccc;
    pointer-events: none;
    user-select: none;
    z-index: 99999;

    white-space: nowrap;

    opacity: 0;
    transform: translateX(-50%) translateY(3px);

    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

*.tooltip.bottom {
    bottom: calc(0% + var(--offset));
    top: auto;
}

:is(*:hover, *:focus-visible) > *.tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
}

/* h, p */
:is(h2, h3, h4) {
    margin-block-start: 0px;
}

p {
    margin-block: 0em;
    line-height: 1.4;
}

p.auto { margin-block-start: 1em; }

/* Popup */
div.popup.active {
    transform: translateY(0px);
}

div.popup {
    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(-150%);

    position: fixed;
    top: 0.75em;
    z-index: 9999;
    margin: 0em 1em;

    display: flex;
    user-select: none;
    pointer-events: none;
    padding: 0.25em 1.5em;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 100px;

    box-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0,0.15);

    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

/* Misc */
[data-hidden] { display: none !important; }
[data-locked] { overflow-y: hidden !important; }
[data-disabled] { filter: saturate(0); opacity: 0.725; user-select: none; pointer-events: none; }

.red { color: crimson; }
.no-margin { margin-block: 0em; }
.light { font-weight: normal; }
.link { color: inherit; text-decoration: underline dotted; }