@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

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

:root {
    --veryDarkBlue: #062326;
    --darkBlue: #113A40;
    --lightBlue: #4BAABF;
    --brown: #63312D;
    --salmon: #F9A287;
    --beige: #F9DD9D;
    --ovni-image: url(https://media.giphy.com/media/YMe8ht1xm4EHNLDi9U/giphy.gif);
    --texture-image: url(https://media.giphy.com/media/xThuWlT47FLpqr1giY/giphy.gif);
    --youtube-icon: url(https://media.giphy.com/media/l1fgJpStVEY7vlqHri/giphy.gif);
    --bg-gif-body: url(https://i.gifer.com/IrF.gif);

}



body {
    --time: 16s;
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;


    animation-name: changeColor;
    animation-duration: var(--time);
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;

  
}
body::after{
    z-index: 9999;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
    opacity: 40%;
    width:  100%;
    height:  100%;
    background: var(--bg-gif-body) center/contain no-repeat ;

  mix-blend-mode: color-dodge;
}

@keyframes changeColor{
    0%{
        background-color: var(--lightBlue);
    }
    20%{
        background-color: var(--beige);
    }
    40%{
        background-color: var(--salmon);
    }
    60%{
        background-color: var(--brown);
    }
    80%{

       background-color: var(--darkBlue);
    }
}


body::before{

    --sizeOvni: 40vmin;
    content: '';
    left: calc( var(--sizeOvni) * -1);
    position: absolute;
  z-index: 1;
    background: var(--ovni-image) center/contain no-repeat;
    width: var(--sizeOvni);
    height: var(--sizeOvni);
    animation-name: leftToRight;
    animation-duration: var(--time);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes leftToRight {
    100%{
        transform: translateX(calc( var(--sizeOvni) + 100vw));
    }
}




h1 {
    display: flex;
    flex-direction: column;
    user-select: none;
    --h1-font-size: 12vmin;
    position: absolute;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--h1-font-size);
    text-transform: uppercase;
    background: var(--texture-image);
    mix-blend-mode: soft-light;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
h1 span {
    text-transform: lowercase;
    font-size: calc(var(--h1-font-size)/2);
  
}

a.youTube{

--size-icon: 14vmin;
position: absolute;
bottom: calc(var(--size-icon)/2);
right: calc(var(--size-icon)/2);

width: var(--size-icon);
height: var(--size-icon);
background: var(--youtube-icon) center/contain no-repeat;
transition: .3s linear;

}

a.youTube:hover{
    transform: scale(1.2);
}