html, body {
  height: 100%;
  width: 100%; /* #020418 */
}

:root {
  --clr-one: rgb(119, 119, 119);
  --clr-two: rgb(255, 16, 80);
  --clr-three: rgb(255, 187, 47);
  --clr-bg: #1d1e22;
}

.card-title {
  font-size: 24px;
}

.card-text {
  font-size: 18px;
}

.bi-check2{
  color: lightgreen;
  font-size: 20px;
  font-weight: bold;
}

.bi-x{
  color: red;
  font-size: 20px;
  font-weight: bolder;
}

.default-c { 
  margin-bottom: 20px;
  box-shadow: 0 0 20px 7px #FF1050;
  border-radius:25px;
}

.default-c:hover {
  box-shadow: 0 0 50px 15px #FF1050;
  transition: 0.5s ease-in-out;
}

.free-c { 
  margin-bottom: 20px;
  box-shadow: 0 0 20px 7px #777777;
  border-radius:25px;
}

.free-c:hover {
  box-shadow: 0 0 50px 15px #777777;
  transition: 0.5s ease-in-out;
}

.premium-c{
  border-radius:25px;
  box-shadow: 0px 0px 20px 7px #FFAA2F;
  animation: neon 3s linear infinite;
}

.premium-c:hover{
  box-shadow: 0px 0px 50px 15px #FFAA2F;
  transition: 0.5s ease-in-out;
}

#row{
  margin-top: 100px;
}

.premium-card-title{
  background-clip: text;
  font-size: 35px;
  background-image: linear-gradient(45deg, #FFCC2F, #EF5734);
  font-weight: bolder;
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.default-card-title{
  background-clip: text;
  font-size: 35px;
  background-image: linear-gradient(45deg, #FF2792, #400F1A);
  font-weight: bolder;
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.free-card-title{
  background-clip: text;
  font-size: 35px;
  background-image: linear-gradient(45deg, #101010, #dddddd);
  font-weight: bolder;
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

main > div > h1 {
  text-shadow: lightblue 0 0 15px;
  font-size: 60px;
  font-weight: bolder;
  text-align: center;
  margin-top:20px;
}

@keyframes neon {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.neon-button {
  font-size: 1rem;

  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1em;
  margin: 2rem;
  border-radius: 0.25em;
  position: relative;
}

.neon-button__1 {
  color: #777777;
  border: #777777 0.125em solid;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em #777777;
  box-shadow: inset 0 0 0.5em 0 #777777, 0 0 0.5em 0 #777777;
}

.neon-button__2 {
  color: #FF1050;
  border: #FF1050 0.125em solid;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em #FF1050;
  box-shadow: inset 0 0 0.5em 0 #FF1050, 0 0 0.5em 0 #FF1050;
}

.neon-button__3 {
  color: #FFBB2F;
  border: #FFBB2F 0.125em solid;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em #FFBB2F;
  box-shadow: inset 0 0 0.5em 0 #FFBB2F, 0 0 0.5em 0 #FFBB2F;
}

.neon-button::before {
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1.5em) rotateX(45deg) scale(0.8, 0.3);
  filter: blur(1.5em);
  opacity: 0.7;
  pointer-events: none;
}

.neon-button__1::before {
  background-color: #777777;
  transition: 0.5s;
}

.neon-button__2::before {
  background-color: #FF1050;
  transition: 0.5s;
}

.neon-button__3::before {
  background-color: #FFBB2F;
  transition: 0.5s;
}

.neon-button__1:hover {
  background-color: #777777;
  color: black;
  transition: 0.5s ease-in-out;
}

.neon-button__2:hover {
  background-color: #FF1050;
  color: black;
  transition: 0.5s ease-in-out;
}

.neon-button__3:hover {
  background-color: #FFBB2F;
  color: black;
  transition: 0.5s ease-in-out; 
}

.neon-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 100ms linear;
}

.neon-button:hover::before,
.neon-button:focus::before {
  opacity: 1;
}

.neon-button:hover::after,
.neon-button:focus::after {
  opacity: 1;
}
@keyframes scalingShadow {
  0% {
    top: 120%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.8, 0.3);
  }
  50% {
    top: 165%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.75, 0.3);
  }
  100% {
    top: 120%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.8, 0.3);
  }
}