.gamebutton {
  --xwidth: 39.5vw;
  --xmaxwidth: 250px;
  max-width: var(--xmaxwidth);
  width: var(--xwidth);
  height: calc(min(var(--xwidth), var(--xmaxwidth)) * 1.3076666667);
  background-blend-mode: multiply;
  border-radius: 12px;
  position: relative;
  border: 1px solid #ebebeb;
}

.buttonicon {
  overflow: hidden;
  position: absolute;
  left: 7.69%;
  right: 7.69%;
  top: 5.88%;
  bottom: 29.41%;
  border-radius: 10px;
  background: center / cover no-repeat;
  background-image: var(--button-icon);
}

/* cta styles */

.buttontext {
  position: absolute;
  left: 7.69%;
  right: 7.69%;
  top: 77.06%;
  bottom: 6.47%;
  background: rgba(217, 217, 217, 0.3);
  border-radius: 100px;
}

.buttontext::before {
  content: var(--button-text);
  font-family: 'Roboto';
  font-style: normal;
  font-size: calc(min(var(--xwidth), var(--xmaxwidth)) * 0.1);
  line-height: 16px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-weight: 500;
  font-family: 'Roboto';
}

/* button backgrounds */

.red {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #ff0800;
}

.orange {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #ff8819;
}

.yellow {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #FFE923;
}

.lime {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #b4ff1f;
}

.green {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #16f360;
}

.blue {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #91C2FC;
}

.purple {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #9C60FF;
}

.pink {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #ff00cc;
}

.teal {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #32FECD;
}

.plum {
  background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(161, 161, 161, 0.7) 100%), #cc3aff;
}