:root {
    
    --intro-text-color: oklch(0.91 0.09 205.98); 
    --welcome-banner-background: linear-gradient(oklch(0.22 0.06 227.38), oklch(0.34 0.15 255.28));
}.welcome-banner {
    width: 100%;
}
.header {
    position: sticky;
    background-image: var(--welcome-banner-background);
    top: 0;
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 3;
}.intro {
    color: var(--intro-text-color);
    text-align: left;
    padding-bottom: 1rem;
    padding-left: 3rem;
    display: grid;
}
h1 {
    color: rgb(201, 201, 201);
    font-size: clamp(2.1rem, 4vw, 2.5rem);
    font-weight: 300;
    text-align: left;
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    p {
        font-size: 1rem;
        text-align: left;
    }

}

@media screen and (max-width: 768px) {
    .header {
        flex-direction: column;
        text-align: center;
    }
    .intro {
        padding-left: 3rem;
    }
}