@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica'), url('../fonts/Helvetica-Bold.woff') format('woff');
}

* {
    font-family: "Helvetica";
}

html {
    font-size: 22px;
}

:root {
    --main-color: #EC7914;
    --anim-height: 80vw;
    --anim-width: 80vw;
    --anim-max-height: 559px;
    --anim-max-width: 559px;
    --font-size-1: clamp(0.9rem, 5.5vw, 42px);
    --font-size-2: clamp(1rem, 5.5vw, 44px);
    --font-size-3: clamp(0.1rem, 2.5vw, 20px);
    --font-size-4: clamp(1rem, 6.5vw, 50px);
}

body {
    margin: 0;
}

main {
    height: 100dvh;
    background: #EDEFEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10%;
    overflow: scroll;
}

.logo img {
    max-width: 70%;
    display: block;
    margin: auto;
}

.anim {
    width: var(--anim-width);
    max-width: var(--anim-max-width);
    height: var(--anim-height);
    max-height: var(--anim-max-height);
}


.anim p {
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    z-index: 10;
}

.anim .row {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: var(--anim-width);
    max-width: var(--anim-max-width);
    height: calc(var(--anim-height) / 2);
    max-height: calc(var(--anim-max-height) / 2);
    position: relative;
}

.anim .row.first .date {
    padding-left: 4%;
    font-size: var(--font-size-1);
}

.anim .row.first .baseline {
    padding-left: 25%;
    font-size: 5.5vw;
    font-size: var(--font-size-2);
}

.anim .row .animItem {
    background: var(--main-color);
    border-radius: 1000px;
    display: block;
}

.anim .row .animContainer {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
}

.anim .row .round {
    width: calc(var(--anim-width) / 2);
    max-width: calc(var(--anim-max-width) / 2);
    height: calc(var(--anim-height) / 2);
    max-height: calc(var(--anim-max-height) / 2);
}

.anim .row .pill {
    width: var(--anim-width);
    max-width: var(--anim-max-width);
    height: calc(var(--anim-height) / 2);
    max-height: calc(var(--anim-max-height) / 2);
}

.anim .row.first .animContainer {
    animation: firstAnimation 6s infinite;
}

.anim .row.snd .animContainer {
    animation: sndAnimation 6s infinite;
}

.anim .row.snd .vertical {
    transform: rotate(-90deg) translateY(-115%);
    margin: 0px;
    position: absolute;
    top: 50%;
    font-size: var(--font-size-3);
}

.anim .row.snd .baseline {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin: 0;
    font-size: var(--font-size-4);
}




@media(min-width: 768px) {
    :root {
        --anim-height: 40vw;
        --anim-width: 40vw;
        --anim-max-height: 559px;
        --anim-max-width: 559px;
        --font-size-1: clamp(0.9rem, 3vw, 42px);
        --font-size-2: clamp(1rem, 3.1vw, 44px);
        --font-size-3: clamp(0.1rem, 1.5vw, 20px);
        --font-size-4: clamp(1rem, 3.7vw, 50px);
    }

    main {
        flex-direction: row;
    }

    .logo img{
        max-width: unset;
    }
}


@keyframes firstAnimation {
    0% {
        transform: translateX(-68.8%);
    }

    16.66% {
        transform: translateX(-68.8%);
    }

    33.33% {
        transform: translateX(-43.8%);
    }

    49.99% {
        transform: translateX(-43.8%);
    }

    66.66% {
        transform: translateX(-27.8%);
    }

    83.33% {
        transform: translateX(-27.8%);
    }

    100% {
        transform: translateX(-6.3%);
    }
}


@keyframes sndAnimation {
    0% {
        transform: translateX(0%);
    }

    16.66% {
        transform: translateX(0%);
    }

    33.33% {
        transform: translateX(-25%);
    }

    49.99% {
        transform: translateX(-25%);
    }

    66.66% {
        transform: translateX(-50%);
    }

    83.33% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(-75%);
    }
}