style.scss

@use "sass:math";

$pos: -25%;
$animation_speed: 1.5s;

@-webkit-keyframes gradient {
	from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
}
@-webkit-keyframes h1 {
	0%{
        transform: translateX($pos);
    }
    50%{
        transform: translateX(25%);
        color:antiquewhite;
    }
    // 95%{
    //     transform: translateX(math.div($pos, 9)*8);
    // }
    100%{
        transform: translateX($pos);
    }
}
body{
    padding-top: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;

}

.a{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10%;


    h1{
        color: #e73c7e;
        -webkit-animation: h1  $animation_speed ease infinite;
        size-adjust: 20%;
    }

	// background-size: 400% 400%;
	-webkit-animation: gradient $animation_speed ease infinite;
    animation-timing-function: linear;
}

@media  screen and (min-device-width: 1180px) {
    .a{
        width: 500px;
    }
}
@media screen and (max-device-width: 1179px) {
    
    .a{
        margin-top: 50%;
    }
}