@import '/style/header.css';
@import '/style/footer.css';
@import '/style/content.css';
@import '/style/product-overview.css';
@import '/style/text-block.css';
@import '/style/links.css';

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

/*
.josefin-sans {
    font-family: 'Josefin Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.poiret-one {
    font-family: 'Poiret One', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.special-elite {
    font-family: 'Special Elite', system-ui;
    font-weight: 400;
    font-style: normal;
}
*/

:root {
    --global-padding: 60px;
}

* {
    box-sizing: border-box;
}

html {
    background-color: black;
}

body {
    --footer-circle-opacity: 0;

    margin: 0;

    background:
        url('/assets/img/bg.png') center top / 100%,
        linear-gradient(to right, hsl(84, 59%, 5%), hsl(84, 59%, 20%));
    background-position: 0 var(--parallax, 0px), center;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: 'Josefin Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

body > * {
    z-index: 50;
}

a {
    text-decoration: none;
    color: inherit;
}

/*
 * TODO: What about mobile? 
 * It might look cool if the typing animation
 * was triggered on touch and kept going
 * while the page content is loading.
 */
a.typing {
    position: relative;
    display: inline-block;
    color: #c7c4a4;
}

a.typing::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: white;
    /*pointer-events: none;*/

    mask-image: linear-gradient(#000 0 0);
    mask-repeat: no-repeat;
    mask-size: 0% 100%;
}

a.typing:hover {
    color: #555;
}

a.typing:hover::after {
    animation: typing calc(40ms * var(--length)) steps(var(--length)) forwards;
}

@keyframes typing {
    to {
        mask-size: 100% 100%;
    }
}

body::after {
    content: '';
    position: fixed;
    width: 1200px;
    height: 1200px;
    border-radius: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    z-index: 0;
    /*
    pointer-events: none;
    */

    opacity: var(--footer-circle-opacity);
    background-color: hsla(0, 0%, 0%, 0.3);
}