@import url('variables.css');

.hero {
    width: 100%;
    height: 100vh;

    background-image: var(--background-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    animation: var(--background-animation);
    text-align: left;
}

body:has(#check:checked) .hero h1 {
    animation: rainbow-background 3s linear infinite;
}

body:has(#check:checked) .hero h1>:first-child {
    animation: font 28s steps(1) infinite;
    transform: scaleY(-1);
}

body:has(#check:checked) .hero h1>:last-child {
    animation: font-2 28s steps(1) infinite;
}

body:has(#check:checked) .hero h3>:last-child {
    animation: font-3 28s steps(1) infinite;
}

body:has(#check:checked) .hero h3>:last-child {
    animation: font-4 28s steps(1) infinite;
}

body:has(#check:checked) .hero h3 {
    text-decoration: underline;
    transform: rotate(180deg);
    animation: rainbow-underline 4s linear infinite;
}

.hero>* {
    margin-left: 15%;
}

.hero>:first-child {
    margin-top: 5%;
}

.hero h1 {
    font-size: 5rem;
    line-height: 0.9;
}

.hero h3 {
    font-size: 1.8rem;
    transition: all 0.4s ease-in-out;
}

.hero h1, .hero h3 {
    width: 50%;
}