@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.log-in-href{
  text-decoration: none;
}
.log-in-href:hover, .logo:hover{
  opacity:0.8;
}
.log-in-btn{
  width:180px;
  height:54px;
  background:#1F1F1F;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:100px;
  gap:7px;
}
.log-in-btn > p{
  color:#fff;
  font-size:14px;
  font-family: "Roboto", sans-serif;
}
.green-a{
  display:block;
  width:280px;
  height:70px;
  text-decoration: none;
}
@media screen and (min-width: 1200px){
.green-a:hover > .green-btn > svg {
  /*transform: rotate(180deg);*/
  -webkit-animation: rotate 3s ease-in-out infinite;
  -moz-animation: rotate 3s ease-in-out infinite;
   animation: rotate 3s ease-in-out infinite;
}
.green-a:hover {
  opacity:0.8;
}
.green-a:hover > .shadow {
  opacity:0.8;
} 
}
.green-a:active {
  opacity:0.8;
  -webkit-tap-highlight-color: transparent;
}
.green-a:active > .shadow {
  opacity:0.8;
  -webkit-tap-highlight-color: transparent;
} 
@keyframes rotate {
  50%{
    transform: rotate(180deg);
  }
}

.green-btn{
  width:100%;
  height:100%;
  background:#57FFBB;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.green-btn > p{
  text-transform:uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size:22px;
  margin:0;
  color:black;
}
.shadow{
  position: relative;
  top:-3px;
  width:280px;
  height:57px;
  /*background: linear-gradient(3deg, rgba(87,255,187,0) 45%, rgba(87,255,187,1) 100%);*/
  background:linear-gradient(0deg, transparent 30%, #57FFBB);
  transform: translateY(-3%) skewY(3deg);
  transform-origin:right;
  -webkit-animation: wave 5s ease-in-out infinite;
  -moz-animation: wave 5s ease-in-out infinite;
  animation: wave 5s ease-in-out infinite;
}

@-webkit-keyframes wave {
  50%{
    transform: translateY(-3%) skewY(-3deg);
    transform-origin:left;
  }
}
@-moz-keyframes wave {
  50%{
    transform: translateY(-3%) skewY(-3deg);
    transform-origin:left;
  }
}
@keyframes wave {
  50%{
    transform: translateY(-3%) skewY(-3deg);
    transform-origin:left;
  }
}
:root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(255, 255, 255, 1);
	--c2: rgba(255, 255, 255, 0.1);
	--box-width:235px;
	--box-r-width:345px;
	--box-r-l-width:235px;
	--box-height:85px;
	--box-r-height:101px;
	--left-clip-path:polygon(0 0, 94% 0, 78% 100%, 0% 100%);
	--small-right-clip-path:polygon(37% 0, 100% 0%, 100% 100%, 20% 100%);
	--right-clip-path:polygon(24% 0, 100% 0%, 100% 100%, 11% 100%);
	--ellipse-small-width:188px;
	--ellipse-small-height:127px;
	--ellipse-width:422px;
	--ellipse-height:200px;
}
@media screen and (max-width: 960px) {
    :root {
    --box-r-l-width:190px;
    --box-r-width:273px;
	--box-width:190px;
	--box-height:72px;
	--box-r-height:84px;
	--small-right-clip-path:polygon(38% 0, 100% 0%, 100% 100%, 20% 100%);
	--right-clip-path:polygon(25% 0, 100% 0%, 100% 100%, 12% 100%);
	--ellipse-small-height:110px;
	--ellipse-width:362px;
	--ellipse-height:168px;
    }
}
@media screen and (max-width: 640px) {
    :root {
    --box-r-l-width:123px;
	--box-width:136px;
	--box-r-width:198px;
	--box-height:56px;
	--box-r-height:68px;
	--left-clip-path:polygon(0 0, 92% 0, 73% 100%, 0% 100%);
	--small-right-clip-path:polygon(34% 0, 100% 0%, 100% 100%, 15% 100%);
	--right-clip-path:polygon(25% 0, 100% 0%, 100% 100%, 10% 100%);
	--ellipse-small-width:112px;
	--ellipse-small-height:86px;
	--ellipse-width:248px;
	--ellipse-height:126px;
    }
}
@media screen and (max-width: 480px) {
    :root {
    --box-r-l-width:109px;
    --box-r-width:170px;
	--box-width:109px;
	--box-height:49px;
	--box-r-height:56px;
	--small-right-clip-path:polygon(36% 0, 100% 0%, 100% 100%, 15% 100%);
	--ellipse-width:219px;
	--ellipse-height:126px;
    }
}
.ellipse-small{
  width:var(--ellipse-small-width);
  height:var(--ellipse-small-height);
  background:rgba(87, 255, 187, 0.5);
  background:radial-gradient(rgba(87, 255, 187, 1) 0%, transparent 70%);
  clip-path: polygon(0 0, 73% 0, 45% 100%, 0 100%);
}
.ellipse{
  width:var(--ellipse-width);
  height:var(--ellipse-height);
  background:rgba(87, 255, 187, 0.5);
  background:radial-gradient(rgba(87, 255, 187, 1) 0%, transparent 70%);
  clip-path: polygon(51% 0, 100% 0%, 100% 100%, 33% 100%);
}
.opacity{
    opacity:0.2;
}
.opacity:hover{
    opacity:1;
    cursor:pointer;
}