*, *::after, *::before {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 body {
     display: grid;
     font-family: "League Spartan", system-ui, sans-serif;
     font-size: 1.1rem;
     line-height: 1.2;
     min-height: 100vh;
     color: white;
}
 .course-main {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 10px;
}
 h1 {
     text-align: center;
     font-size:30px;
     font-weight: bold;
     letter-spacing: 1.2px;
     text-transform: uppercase;
}
 ul {
     list-style: none;
}
 li, p {
     font-size: 15px;
     text-align: left;
}
 .main {
     width: 70%;
     padding: 20px 0;
     align-self: center;
}
 .cards {
     position: relative;
}
 .cards__inner {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 2.5em;
}
 .card {
     --flow-space: 0.5em;
     --hsl: var(--hue), var(--saturation), var(--lightness);
     flex: 1 1 14rem;
     padding: 1.5em 2em;
     display: flex;
     flex-direction: column;
     grid-template-rows: auto auto auto 1fr;
     align-items: center;
     gap: 1.25em;
     color: #eceff1;
     border: 1px solid #eceff133;
     border-radius: 15px;
}
 .card {
     --hue: 291.34;
     --saturation: 95.9%;
     --lightness: 61.76%;
}
 .card__bullets {
     line-height: 1.4;
}
 .card__bullets li::before {
     display: inline-block;
     transform: translatey(0.25ch);
     margin-right: 1ch;
}
 .card__heading {
     font-size: 20px;
     font-weight: 600;
}
 .flow > * + * {
     margin-top: var(--flow-space, 1.25em);
}
 .cta {
     display: block;
     align-self: center;
     margin: 1em 0 0.5em 0;
     text-align: center;
     text-decoration: none;
     color: #000000;
     background-color: yellow;
     padding: 10px 50px;
     border-radius: 10px;
     font-size: 1rem;
     font-weight: 600;
}
 .cta a {
     text-decoration: none;
     color: #000;
     font-size: small;
}
 .overlay {
     position: absolute;
     inset: 0;
     pointer-events: none;
     user-select: none;
     opacity: var(--opacity, 0);
     -webkit-mask: radial-gradient( 25rem 25rem at var(--x) var(--y), #000 1%, transparent 50% );
     mask: radial-gradient( 25rem 25rem at var(--x) var(--y), #000 1%, transparent 50% );
     transition: 400ms mask ease;
     will-change: mask;
}
 .overlay .card {
     background-color: hsla(var(--hsl), 0.15);
     border-color: hsla(var(--hsl), 1);
     box-shadow: 0 0 0 1px inset hsl(var(--hsl));
}
 .overlay .cta {
     display: none;
     cursor: pointer;
}
 :not(.overlay) > .card {
     transition: 400ms background ease;
     will-change: background;
}
 :not(.overlay) > .card:hover {
     --lightness: 95%;
     background: hsla(var(--hsl), 0.1);
}
 @media only screen and (max-width: 600px) {
     .main {
         width: 90%;
    }
}
 footer {
     background-color: #0000005b;
     color: #fff;
     text-align: center;
     padding: 20px 0;
     position: relative;
     bottom: 0;
     width: 100%;
     margin-top: 20px;
}