@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&family=Funnel+Display:wght@300..800&display=swap');

:root {
    --dark: black;
    --light: white;
    --accent1: yellow;
    --accent2: teal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    overflow-x: hidden;
    color: var(--light);
    background-color: var(--dark);
}

#hero {
    height: 100vh;
    width: 100vw;
    position: sticky;
    top: 0;
    left: 0
}

.loopbanner {
    width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.loopbanner-track {
    display: inline-flex;
    will-change: transform;
    animation: loopbanner-scroll 10s linear infinite;
}

#heading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    height: 90%;
}

h1 {
    font-family: "BBH Hegarty", sans-serif;
    white-space: nowrap;
    line-height: 0.75;
}

h4 {
    font-family: "Funnel Display", sans-serif;
    font-size: 5vh;
    padding-right: 5vh
}

#canvas3d {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100vw;
}

@keyframes loopbanner-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-aspect-ratio: 2/3) {
    #canvas3d {
        opacity: 0.75
    }
}