:root {
    --link-color: hsl(22.7, 82.5%, 31.4%);
}

body {
    background: linear-gradient(
            -45deg,
            #fdfdfa calc(50%),
            #fbf1c7 50%,
            #fdfdfa calc(50% + 0.5px)
        )
        0 0/7px 5px;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: clamp(14px, 0.4vw + 12px, 16px);
    font-family: Inter, sans-serif;
    min-height: 100vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}

h1 {
    /*text-align: center;*/
    font-family: EBGaramond, serif;
    font-size: 2em;
    margin: 1.25em 0 0.2em;
}

h2 {
    color: var(--link-color);
    font-family: EBGaramond, serif;
    font-size: 1.5em;
    margin: 25px 0 5px;
}

a {
    color: inherit;
}

a:hover {
    color: var(--link-color);
}

ul {
    padding-left: 1.5em;
}

.email-label {
    /*text-align: center;*/
    /*margin-left: 75px;*/
    width: fit-content;

    svg use {
        fill: currentColor !important;
    }

    &:hover svg use {
        /* 1. Hide the default black fill so we only see the outlines drawing */
        fill: currentColor !important;
        fill-opacity: 0;

        /* 2. Give it a stroke color and width so the lines are visible */
        stroke: currentColor; /* Matches the text color of the parent, or use a specific color like #333 */
        stroke-width: 0.2px; /* You may need to adjust this depending on the visual scale of your SVG */

        /* 3. Your animation properties */
        stroke-dasharray: 50;

        animation: eraseAndRedraw 2s ease-in-out forwards;
    }
}

@keyframes eraseAndRedraw {
    0%,
    100% {
        fill-opacity: 1;
        stroke-opacity: 0;
        stroke-dashoffset: 0;
    }

    10%,
    90% {
        stroke-dashoffset: 0;
    }

    15%,
    85% {
        stroke-opacity: 1;
    }

    35%,
    65% {
        fill-opacity: 0;
    }

    48%,
    52% {
        stroke-dashoffset: 50;
        stroke-opacity: 1;
        fill-opacity: 0;
    }
}

.checksum-label {
    color: #606060;
    font-size: 0.9em;
    margin-left: 30px;
    font-family: sans-serif;
}

.main-content {
    flex-grow: 1;
}

.footnote {
    font-size: 0.95em;
    font-family: EBGaramond, serif;
    text-align: center;
    margin-top: 50px;
    padding: 0.75em 0;

    position: relative;
}

.footnote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0) 100%
    );
}

@font-face {
    font-family: Lato;
    src: url("./fonts/Lato.woff2");
    font-display: swap;
}

@font-face {
    font-family: EBGaramond;
    src: url("./fonts/EBGaramond.woff2");
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url("./fonts/Inter.woff2");
    font-display: swap;
}