:root, :host {
    --trans-dur: 0.15s;

    --col-light: #FDFBFB;
    --col-midlight: #DDDEEB;
    --col-mid: #8D99AE;
    --col-middark: #94949F;
    --col-dark: #2B2D42;
    --col-accent: #F14F63;

    --col-accent-50: #F14F6380;

    --size-small: 300px;
    --size-med: 480px;
    --size-large: 640px;

    /* for the dynamic sizing on the margins < 540px (magic numbers lmao) */
    --page-padding: min(4.4444vw, 24px);
    --inner-padding: min(5.9259vw, 32px);
}

/* html {
    overscroll-behavior: none;
} */

body {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    background-image: url(/assets/bg_pattern.svg);
    background-position: center top;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: hidden;
    color: var(--col-dark);

    @media (scripting: none), (scripting: initial-only) {
        overflow: hidden;
    }
}

.splash {
    position: fixed;
    z-index: -1;
    justify-self: center;
}

.grad {
    background-image:
        linear-gradient(var(--col-dark) 25%, var(--col-accent-50)),
        linear-gradient(var(--col-middark));
    color: transparent;
    background-clip: text;

    font-weight: 380;
}

.emphasis {
    font-weight: 380;
}

h1 {
    margin: 0;
    font-size: 48px;
    letter-spacing: 0.33em;
    margin-right: -0.33em;
    font-family: 'Zen Loop', sans-serif;
    font-weight: 400;
    background-image: linear-gradient(var(--col-dark) 25%, var(--col-accent-50));
    color: transparent;
    background-clip: text;
    text-align: center;
}

h2 {
    margin: 0;
    font-weight: 400;
    width: 100%;
    font-family: 'Zen Loop', sans-serif;
    font-size: 32px;
    color: transparent;
    
    > span {
        background-image: linear-gradient(var(--col-dark), var(--col-mid));
        color: transparent;
        background-clip: text;
    }
}

p {
    margin: 0;
    padding: 0;
    line-height: 135%;
}

a > span {
    pointer-events: none;
}

a {
    text-decoration: none;
    font-family: 'Zen Loop', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: transparent;

    > span {
        background-image: linear-gradient(var(--col-dark), var(--col-mid));
        color: transparent;
        background-clip: text;
    }

    @media(hover: hover) and (pointer: fine) {
        &:hover {
            > span {
                background-image: linear-gradient(var(--col-dark) 25%, var(--col-accent-50));
                color: transparent;
                background-clip: text;
            }
        }
    }

    &:active {
        > span {
            background-image: linear-gradient(var(--col-dark) 25%, var(--col-accent-50)), linear-gradient(#2b2d4200, var(--col-mid));
            color: transparent;
            background-clip: text;
        }
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
}

main img {
    box-sizing: border-box;
    max-width: 98%;
    border-radius: 8px;
    max-height: 320px;
    object-fit: contain;
    filter: drop-shadow(0px 1px 1px var(--col-dark)) drop-shadow(0px 0px 2px var(--col-mid));
}

ul {
    margin: 0;
    padding-inline-start: 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;

    li {
        font-weight: 200;
        line-height: 135%;

        &::marker {
            color: var(--col-dark);
        }
    }
}

.divider {
    height: 1px;
    margin: 12px 0px;
    background-color: #EDEDF3;
    width: 100%;
}

main {
    box-sizing: border-box;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: scroll;
}

.pagebody {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px var(--page-padding);
    min-height: calc(var(--vh, 1vh) * 100);
}

card-component {
    align-content: center;
    justify-items: center;
    min-width: min(100%, var(--size-small));
    width: 100%;
    display: grid;

    &.small {
        max-width: var(--size-small);
    }

    &.medium {
        max-width: var(--size-med);
    }

    &.large {
        max-width: var(--size-large);
    }

    /* GET THE WIDTH ESTIMATED: subtract (padding on page, if smaller) + the padding on pagecard + the border on card-wrapper + the padding on card-wrapper + (the scrollbar width, if smaller) */
    &.small::part(wrap) {
        width: min(calc(100vw - ((2 * var(--page-padding)) + 32px + 2px + (2 * var(--inner-padding)) + var(--scrollbar-width))), calc(var(--size-small) - (32px + 2px + (2 * var(--inner-padding)))));
    }

    &.medium::part(wrap) {
        width: min(calc(100vw - ((2 * var(--page-padding)) + 32px + 2px + (2 * var(--inner-padding)) + var(--scrollbar-width))), calc(var(--size-med) - (32px + 2px + (2 * var(--inner-padding)))));
    }

    &.large::part(wrap) {
        width: min(calc(100vw - ((2 * var(--page-padding)) + 32px + 2px + (2 * var(--inner-padding)) + var(--scrollbar-width))), calc(var(--size-large) - (32px + 2px + (2 * var(--inner-padding)))));
    }
}

.pagecard {
    background-color: var(--col-light);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0px 2px 16px 0px #8D99Ae33, 0px 2px 4px 0px #14152240;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-grow: 1;

    box-sizing: border-box;

    min-width: min(100%, var(--size-small));
    width: min(100%, var(--size-small));

    transition: width var(--trans-dur) ease-out;

    &.show-content {
        transition-delay: var(--trans-dur);
        width: 100%;
        @starting-style {
            width: min(100%, var(--size-small));
        }
    }
}

.card-wrapper {
    border-radius: 12px;
    padding: 32px var(--inner-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex-grow: 1;

    box-sizing: border-box;
    width: 100%;

    border: 1px solid transparent;
    background:
        linear-gradient(var(--col-light), var(--col-light)) padding-box,
        linear-gradient(#f14f6333, #8d99ae33) border-box;
}

.card-title {
    height: 64px;
    background-image: url(/assets/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    align-content: center;
    width: 100%;

    h1 {
        opacity: 0;
        transition: opacity var(--trans-dur) ease-out;
    }

    &.show-content {
        h1 {
            transition-delay: var(--trans-dur);
            opacity: 1;
            @starting-style {
                opacity: 0;
            }
        }
    }
}

.trans-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--trans-dur) ease-out;
    /* width: 100%; */

    &.show-content {
        transition-delay: var(--trans-dur);
        grid-template-rows: 1fr;

        @starting-style {
            grid-template-rows: 0fr;
        }
    }
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* transition: height var(--trans-dur) ease-out, opacity var(--trans-dur) ease-out, width var(--trans-dur) ease-out; */
    overflow: hidden;
    opacity: 0;
    /* width: 100%; */

    slot[name=body]::slotted(a) {
        font-size: 32px !important;
    }

    slot[name=footer]::slotted(a) {
        padding-top: 12px;
    }

    ::slotted(paragraph-component), ::slotted(bloglink-component), ::slotted(blogheader-component), ::slotted(a), ::slotted(img), ::slotted(div) {
        transition: none;
        opacity: 0;
    }

    &.show-content {
        /* transition-delay: var(--trans-dur); */
        opacity: 1;

        @starting-style {
            opacity: 0;
        }

        ::slotted(paragraph-component), ::slotted(bloglink-component), ::slotted(blogheader-component), ::slotted(a), ::slotted(img), ::slotted(div) {
            transition: opacity var(--trans-dur) ease-out;
            transition-delay: calc(var(--trans-dur) * 2);
            opacity: 1;
            @starting-style {
                opacity: 0;
            }
        }
    }
}

paragraph-component, bloglink-component, blogheader-component {
    width: 100%;
}

.para {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;

    .para-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-weight: 200;
        width: 100%;
    }
}

.bloglink {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;

    .bloglink-head {
        display: flex;
        flex-direction: column;
        gap: 4px;

        ::slotted(a) {
            font-size: 32px !important;
        }

        slot[name=date] {
            color: var(--col-middark);
            font-size: 14px;
            font-weight: 200;
        }
    }

    slot[name=summary] {
        font-weight: 200;
    }

    padding-bottom: 20px;
    border-bottom: 1px solid var(--col-midlight);
}

.blogheader {
    display: flex;
    flex-direction: column;
    gap: 8px;

    slot[name=date] {
        color: var(--col-middark);
        font-size: 14px;
        font-weight: 200;
    }
}

.js-disabled {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: var(--col-light);
    color: var(--col-dark);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;

    background-image: linear-gradient(#FDFBFBcc, #FDFBFBcc), url(/assets/bg_pattern.svg);
    background-repeat: no-repeat, repeat;
    background-position: center top;

    img {
        width: 160px;
    }
}