.Shape-Anim { position: absolute; right: 0; bottom:

Question

.Shape-Anim { position: absolute; right: 0; bottom:

0;
}
.shape-anim::before {
position: absolute;
content: "";
width: 530px;
height: 530px;
background: linear-gradient(#ec9f05, #ff4e00);
border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
will-change: border-radius, transform, opacity;
animation: sliderShape 5s linear infinite;
display: block;
z-index: -1;
-webkit-animation: sliderShape 5s linear infinite;
}

@keyframes sliderShape{
0%,100%{
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
34%{
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
transform: translate3d(0,5px,0) rotateZ(0.01deg);
}
50%{
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
67%{
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
}
}
Помогите пожалуйста новичку - выше написал код анимированного шейпа. Его размер 530px на 530px.
Вопрос что и куда надо дописать, чтобы этот шейп на МОБИЛЬНОМ телефоне был размером 200px на 200px? Знаю, что это медиа запрос, но вот как и куда его прописать никак не получается...