.a-btn{
  text-decoration:none;
  color:#000;
  cursor:pointer;
}
:root{
    --w-btn-width:310px;
    --w-btn-height:190px;
    --cat-width:295px;
    --cat-height:90px;
    --cat-p-size:22px;
    --cat-p-margin:30px 0 0 0;
    --dog-width:82px;
    --dog-height:82px;
    --dog-left:106px;
    --dog-top:10px;
    --translate:30px;
}
@media screen and (max-width: 960px) {
  :root{
    --w-btn-width:265px;
    --w-btn-height:183px;
    --cat-width:265px;
    --cat-height:75px;
    --cat-p-size:20px;
    --cat-p-margin:27px 0 0 0;
    --dog-width:72px;
    --dog-height:72px;
    --dog-left:95px;
    --dog-top:8px;
    --translate:20px;
    }
}
@media screen and (max-width: 640px) {
  :root{
    --w-btn-width:245px;
    --w-btn-height:143px;
    --cat-width:245px;
    --cat-height:65px;
    --cat-p-size:19px;
    --cat-p-margin:23px 0 0 0;
    --dog-width:65px;
    --dog-height:65px;
    --dog-left:90px;
    --dog-top:6px;
    --translate:10px;
    }
}
@media screen and (max-width: 480px) {
  :root{
    --w-btn-width:200px;
    --w-btn-height:133px;
    --cat-width:200px;
    --cat-height:55px;
    --cat-p-size:17px;
    --cat-p-margin:17px 0 0 0;
    --dog-left:66px;
    --dog-top:4px;
    --translate:8px;
    }
}
.w-btn{
  width: var(--w-btn-width);
  height:var(--w-btn-height);
  filter:url("#old-goo");
}
.group-new{
  filter:url("#fancy-goo");
}
.cat{
  width:var(--cat-width);
  height:var(--cat-height);
  border-top: solid 5px #00FF94;
  border-left: solid 5px #00FF94;
  border-right: solid 5px #00FF94;
  border-bottom: solid 5px transparent;
  background-image:linear-gradient(white, white),linear-gradient(to right, #00FF94 20%, #fff 35%, #fff 68%, #00FF94 80%, #00FF94 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-radius:27px;
  background-color:#fff;
    > p {
        font-family: "Manrope", sans-serif;
        font-size:var(--cat-p-size);
        font-weight:600;
        margin:var(--cat-p-margin);
        text-align:center;
        color:#000;
    }
}

.dog{
  width:var(--dog-width);
  height:var(--dog-height);
  position:relative;
  left:var(--dog-left);
  top:var(--dog-top);
  border-radius:50%;
  animation: 6s infinite normal slidein;
  z-index:4;
  border: solid 5px transparent;
  background-image:linear-gradient(white, white),
     linear-gradient(to bottom, #fff 28%, #00FF94 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  > svg{
    margin-top:20px;
  }
}
@keyframes slidein {
  50%{
    transform: translate(0, var(--translate));
  }

  100%{
    transform: translate(0, 0px);
  }
}
/*---------------------------------------------------------*/
.bottom-svg path{
  filter: none;
/* 	filter: url(#inset-shadow); */
}
.top-svg{
	position:absolute;
	top:0px;
	left:0px;
	box-sizing: border-box;
}
.steam-btn{
	text-decoration: none;
}
@media screen and (min-width: 1200px) {
  .steam-btn:hover > .bottom-svg path {
	filter: url(#inset-shadow);
  }
  .opacity:hover{
    opacity:1;
    cursor:pointer;
  }
}
.steam-btn:active> .bottom-svg path {
	filter: url(#inset-shadow);
}
.steam-btn > p{
	position:absolute;
	top:-10px;
	left:20px;
	color:#fff;
    font-size:18px;
    font-family: "Inter", sans-serif;
	top:14px !important;
    left:45px !important;
    margin:0;
    letter-spacing: -0.7px;
}
.opacity{
    opacity:0.2;
}
.opacity:active{
    opacity:1;
    cursor:pointer;
}