@import url(/teaser.css);
@import url(/header.css);
@import url(/work.css);
@import url(/about.css);
@import url(/project.css);
@import url(/footer.css);

:root {
    --color-primary: #2C3ED0;
    --color-secondary: #CAD0FF;
    --color-akcent: #FE6D55;
    --color-dark: #0D0D0D;
    --color-light: #FCFDFF;
    --color-background: #FCFDFF;

    --font-title: Jost;
    --font-body: Darker Grotesque;
    --font-uppercase: uppercase;
    --font-size-h1: 230px;
    --font-size-h2: 128px;
    --font-size-h3: 60px;
    --font-size-body: 55px;   
    --font-size-body-small: 40px;

    --website-width: 1600px;
    --max-width: 90%;
}

*,
*::before,
*::after {
    margin: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}
* h1, h2, h3 {
 font-family: var(--font-title);
 font-weight: 900;
 text-transform: var(--font-uppercase);
}

* p {
    font-family: var(--font-body);
}
* a {
    text-decoration: none;
    color: inherit;
}

body {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    isolation: auto !important;
    margin: 0;
    background-color: var(--color-background);
    background: url(/Materials/noise.png);
    background-repeat: repeat;
    background-size: 600px;
    animation: grain-move 1s steps(10) infinite;
}

img,
svg,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Prevent scrolling on the index page and ensure it fits the viewport */
.index-page {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}


/* Grain animation */
@keyframes grain-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 200px;
  }
}

canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Link animations on hover */

.link:hover {
    color: var(--color-akcent);
}

.link .char {
    display: inline-block;
    transform: translateY(0);
    will-change: transform;
}

.link:hover .char {
    animation: link-wave 0.8s ease-in-out infinite;
    animation-delay: calc(var(--char-index) * 0.045s);
}

@keyframes link-wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.32em);
    }
}