@import url(./output.css);

#banner {
  background-image: url(../images/banner.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.silver-card {
  background: rgb(230, 230, 230);
  background: linear-gradient(0deg, rgba(230, 230, 230, 1) 0%, rgba(153, 153, 153, 1) 47%, rgba(230, 230, 230, 1) 100%);
}

.silver-card>div {
  background: rgb(166, 166, 166);
  background: linear-gradient(137deg, rgba(166, 166, 166, 1) 0%, rgba(240, 240, 240, 1) 47%, rgba(166, 166, 166, 1) 100%);
}

.gold-card {
  background: rgb(219, 176, 0);
  background: linear-gradient(0deg, rgba(219, 176, 0, 1) 0%, rgba(117, 94, 0, 1) 51%, rgba(219, 176, 0, 1) 100%);
}

.gold-card>div {
  background: rgb(117, 94, 0);
  background: linear-gradient(137deg, rgba(117, 94, 0, 1) 0%, rgba(219, 176, 0, 1) 23%, rgba(219, 176, 0, 1) 77%, rgba(117, 94, 0, 1) 100%);
}

button {
  background-color: transparent;
}

button.active {
  background-color: #AF8E1C;
}

button.inactive {
  background-color: transparent;
}

.plan-description p {
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

@supports selector(:focus-visible) {
  .theme__toggle:focus {
    box-shadow: 0 0 0 0.125em var(--primaryT);
  }

  .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em var(--primary);
  }
}


@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
  #banner {
    background-image: url(../images/banner768.png);
    background-position-x: 60px;
    background-color: #dddddd;
  }
}

@media screen and (max-width: 480px) {
  #banner {
    background-image: none;
    background-color: #dddddd;
  }
}

@media screen and (max-width: 380px) {}

@media screen and (max-width: 320px) {}