@property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    #card {
      margin: 0 auto;
      padding: 2em;
      width: 75%;
      height: 300px;
      text-align: center;
      border-radius: 15%  30%/ 10px 5% 30%;
      position: relative;
      box-sizing: content-box;
      background-image: conic-gradient(from 1800deg, #f8c96bb8, #ae00ffbc,  #f8c96bb8, #4389f9c2, #f8c96bb8, #ae00ffca, #f8c96bb8, #4389f9c6 ,#ba69e0c8, #f8c96bb8) ;
    }


    #card::after, #card::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background-image: conic-gradient(from var(--angle),#f8c96b, #ad00ff,  #f8c96b, #4389f9, #f8c96b, #ad00ff, #f8c96b, #4389f9 ,#bb69e0, #f8c96b);
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: -1;
      padding: 10px;
      border-radius: 15%  30%/ 10px 5% 30%;
      animation: 10s spin linear infinite;
    }


    #card::before {
      filter:blur(3rem);
      opacity: 1;

    }

    @keyframes spin{
      from {
        --angle: 0deg;
      }
      to {
        --angle: 360deg;
      }
    }

body {
      background: rgb(254, 226, 255);
      padding-bottom: 80px;
      padding-top: 60px;
    }

  header { 
      background-image: conic-gradient(from 90deg, #f8c96b, #ad00ff,  #f8c96b, #4389f9, #f8c96b, #ad00ff, #f8c96b, #4389f9 ,#bb69e0, #f8c96b) ;
      line-height: 1;
      cursor: pointer;
    }

    h1.headingh1 {
     display: block;
      color: #000000;
      background-color: none;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 50px;
      padding-right: 50px;
      border-radius: 5px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      font-size: 40px;

    }

    .secondary { 
      display: inline-block;
      color: #000;
      background-image: conic-gradient(from 0deg, #f8c96b, #ad00ff, #f8c96b, #4389f9, #f8c96b, #bb69e0, #f8c96b) ;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 50px;
      padding-right: 50px;
      margin: 30px;
      width: 70%;
      border-radius: 40%  70% 10px 15% / 40%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
    }

    h2 {
        display: block;
        color: #000;
        background-color: #C58940;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 50px;
        padding-right: 50px;
        border-radius: 50%  50% 90px 15% / 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
    }

h1, h2, h3, h4, h5, h6 {
  font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
  margin: 0.5em 0 0.2em 0;
  font-size: 45px; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.headingp1 {
  font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(111, 120, 111);
  margin: 0.2em 0 0.5em 0;
  font-size: 23px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  text-align: center;
}

.headingp2 {
  font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #8d04af;
  font-size: 23px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  text-align: center;
}

p {
  font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  color: #000000;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}



a {
  font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
    color: #8d04af;
    margin: 0.2em 0 0.5em 0;
    font-size: 20px;
    padding-top: 20px;
    text-align: center;
    display: block;
}

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, rgb(172, 227, 95), #cd2acd, rgb(172, 227, 95));
  margin: 5px 0;
}

#clickMe {
    font-size: 16px;
    color: #8d04af;
  font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
}

.button-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonHeader {
    transition: 300ms;
    background-color: #d634ff;
    color: #000;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 10px;
    font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: none;
    text-align: center;
   
}

.buttonHeader:hover {
    transition: 300ms;
    background-color: #fb76fb;
    color: #000;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 10px;
    font-family: "Story Script", sans-serif;
  font-weight: 600;
  font-style: normal;
    font-size: 16px;
    letter-spacing: 1px;
}