/* =======================================================
    MOBILE STYLES
   ======================================================= */
body {
   font-family: "Red Hat Display", sans-serif;
   background-color: #d6e1ff;
}

main {
   border-radius: 30px;
   background-color: white;
}

body.party {
   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
   background-size: 400% 400%;
   animation: gradient 7s ease infinite;
}

@keyframes gradient {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.switch-container {
   text-align: center;
   padding-bottom: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.switch-container p {
   padding: 0 1em;
   text-transform: uppercase;
}

.switch-container input {
   height: 0;
   width: 0;
   opacity: 0;
}

.switch {
   cursor: pointer;
   position: relative;
   display: inline-block;
   width: 70px;
   height: 34px;
   background-color: gray;
   border-radius: 34px;
}

.ball {
   position: absolute;
   height: 26px;
   width: 26px;
   left: 4px;
   bottom: 4px;
   border-radius: 50%;
   background-color: white;
   transition: transfrom 0.2s ease-out;
}

.ball.move-right {
   -webkit-transform: translateX(34px);
   -ms-transform: translateX(34px);
   transform: translateX(34px);
}

.visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

.hero-wrapper img {
   border-radius: 20px 20px 0px 0px;
   width: 100%;
}

.content-wrapper {
   padding: 1.5625rem;
   text-align: center;
}

.order-summary {
   padding: 0 1.5625rem;
}

h1 {
   line-height: 135%;
   font-size: 1.75rem;
   font-weight: 800;
}

.order-summary p {
   font-size: 0.9375rem;
   line-height: 165%;
   font-weight: 500;
   color: #717fa6;
   padding-bottom: 0.9375rem;
}

.plan-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 1fr;
   padding: 15px;
   gap: 5px;
   background-color: #f7f9ff;
   border-radius: 20px;
}

.plan-container img {
   justify-self: center;
}

.plan-title {
   color: black;
   margin: 0;
   font-size: 15px;
   line-height: 165%;
   font-weight: 900;
}

.plan-cost {
   color: #717fa6;
   grid-column: 2;
   margin: 0;
   font-weight: 500;
}

.change {
   color: #1f2e55;
   grid-column: 3;
   grid-row: 1;
   font-size: 15px;
   line-height: 165%;
   font-weight: 900;
}

.activate-change {
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.activate-change:hover {
   color: #382ae1;
}

.payment-proceed {
   background-color: #382ae1;
   padding: 15px;
   border-radius: 15px;
   color: white;
   font-size: 15px;
   line-height: 165%;
   font-weight: 900;
   box-shadow: 10px 10px 10px lightgrey;
   margin-bottom: 15px;

}

#pulse:hover {
   animation: pulse 5s infinite;
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

.payment-proceed:hover {
   background-color: #766cf1;
}

.activate-proceed {
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.activate-proceed:hover {
   color: white;
}

.payment-cancel {
   color: #717fa6;
   font-size: 15px;
   line-height: 165%;
   font-weight: 900;
}

.activate-cancel {
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.activate-cancel:hover {
   color: black;
}

/* =======================================================
    TABLET STYLES
   ======================================================= */
@media (min-width: 500px) {

   html,
   body {
      height: 100%;
      margin: 0;
      padding: 0;
   }

   body {
      display: flex;
      justify-content: center;
      flex-direction: column;
   }

   main {
      margin: auto;
   }

   .hero-image {
      display: grid;
   }

   .hero-wrapper img {
      justify-self: center;
      object-fit: fill;
      width: 100%;
   }
}

/* =======================================================
   DESKTOP STYLES 
   ========================================================*/
@media (min-width: 1024px) {

   main {
      max-width: 700px;
   }
}