:root {
    --purp: #961fff;
    --grn: #00ff7d;
}
h1{
    font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
    font-size: 36pt;
}
h2{
    font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
    font-size: 24pt;
    font-style: bold;
}
body {
  font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
    font-size: 18pt;
  margin: 0;
  padding: 0;
}
header {
  background-color: var(--purp);
  color: var(--grn);
  text-align: center;
  padding: 1rem 0;
    width: 100%;
}
#wide{
    width:100%;
    max-width: 100%;
}
#centered {
   max-width:960px; /* this is the width of the center column (px, em or %) */
   text-align:left; /*resets the text alignment back to left */
   margin:0 auto; /* auto centers the div in standards complaint browsers */
}
main {
  padding: 2rem;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}
.button {
  position: relative;
  background-color: var(--purp);
  border: none;
  color: var(--grn);
  padding: 18px 36px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24pt;
  border-radius: 14px;
  transition-duration: 0.2s;
  align-content: center;
  align-self: center;
  align-items: center;
  overflow: hidden;
}

.button:hover{
    background-color: var(--grn);
    color: var(--purp);
}
.sparkle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@keyframes twinkle {
  0% { opacity: 1; filter: drop-shadow(0 0 24px currentColor); }
  50% { opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  100% { opacity: 1; filter: drop-shadow(0 0 24px currentColor); }
}

.sparkle {
    position: absolute;
    color: var(--grn);
    font-size: 16pt;
}
.button:hover .sparkle{
    color: var(--purp);
}

.mobile-element {
    display: none;
}

/* Show on screens smaller than 768px (typical tablet/mobile breakpoint) */
@media screen and (max-width: 768px) {
    .mobile-element {
        display: block;
    }
}