:root {
    --art-width: 80vw;
    --art-height: 120vh;
    --padding: 0.8;
    --img-scale: 0.8;
}

@keyframes text {
    0% {
        color: pink;
    }
    49% {
        color: lightblue;
    }
    50% {
        color: lightblue;
    }
    100% {
        color: pink;    
    }
}

html {
    background-image: url("./assets/bannars.gif");
    background-repeat: repeat;
}

* {
    animation: text 4s ease-in infinite;
}


body>h1 {
    font-size: 4em;
    text-align: center;
}

article {
    position: relative;
    border-radius: 6px;
    padding: 0.8vw 0.4vw;
    width: var(--art-width);
    height: var(--art-height);
    margin: 0 auto;
    background-color: #fefefe;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #101010;

}

article>div {
    position: absolute;
    width: calc(var(--art-width) / 2);
    height: calc(var(--art-height) / 4);
}

article>.a1 {
    top: 0px;
}

article>.a2 {
    top: calc(var(--art-height) / 4 * 1 * var(--padding));
    right: 0px;
}

article>.a3 {
    top: calc(var(--art-height) / 4 * 2 * var(--padding));
}

article>.a4 {
    top: calc(var(--art-height) / 4 * 3 * var(--padding));
    right: 0px;
}

article>div>img {
    width: auto;
    height: calc(var(--art-height) / 4 * var(--img-scale));
}

@media screen and (max-width: 1070px) {
    :root {
        --img-scale: 0.3 !important;
    }

    body>h1 {
        font-size: 2em !important;
    }
}