@layer reset {
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        color-scheme: light dark;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        hanging-punctuation: first allow-end last;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

}

.title {
     font-family: "Audiowide", sans-serif;
    font-size: 15rem;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    letter-spacing: 5px;
}

.s {
    color: rgba(255, 0, 0, 0.1);
    background: url('https://images.pexels.com/photos/85773/pexels-photo-85773.jpeg');
    background-clip: text;
    background-size: cover;
}

.t {
    color: rgba(51, 255, 87, 0.1);
    /* background: url('https://images.pexels.com/photos/8593813/pexels-photo-8593813.jpeg'); */
    background: url('https://images.pexels.com/photos/757868/pexels-photo-757868.jpeg');
    background-size: 300%;
    background-repeat: no-repeat;
    background-position: 70% 70%;
    background-clip: text;
}

.y {
    color: rgba(51, 87, 255, 0.1);
    background: url('https://images.pexels.com/photos/1545505/pexels-photo-1545505.jpeg');
    background-size: cover;
    background-clip: text;
}

.l {
    color: rgba(0, 0, 0, 0.1);
    background: url('https://images.pexels.com/photos/1207513/pexels-photo-1207513.jpeg');
    background-size: 500%;
    background-position: -60% 50%;
    background-clip: text;
}

.e {
    color: rgba(155, 89, 182, 0.1);
    background-blend-mode: multiply;
    background: url('https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg');
    background-size: cover;
    background-clip: text;
}

.letter {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}