:root{
    --purple-highlight: #E6DAED;
    --purple-shadow: #9A87A5;
    --purple-light: #cdb4db;
    --purple-light-mid: #B698C7;
    --purple-mid: #9F7BB3;
    --purple-filling: #70428A;
    --purple-crackle: #7C5195;
    
    --pink-light: #FFC8DD;
    --pink-dark: #FFAFCC;
    
    --blue-light: #DEF0FF;
    --blue-dark: #A2D2FF;
  }
  
  #macaron::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    
    background-image: radial-gradient(ellipse, var(--purple-highlight) 1%, transparent 30%);
    background-size: 90% 20%;
    background-position: -20% 48%;
    
    transform: rotate(6deg);
  }
  
  #macaron {
    height: 250px;
    width: 250px;
    position:relative;
    background-repeat: no-repeat;
    
    background-image: 
      radial-gradient(ellipse, var(--purple-light) 50%, var(--purple-light-mid) 60%, transparent 60.75%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-mid) 60%, transparent 60.75%),
      radial-gradient(ellipse, var(--purple-filling) 52%, var(--purple-filling) 60%, transparent 60.75%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-crackle) 60%, transparent 65%),
      radial-gradient(ellipse, var(--purple-mid) 45%, var(--purple-mid) 60%, transparent 60.75%),
      radial-gradient(ellipse, var(--purple-light-mid) 50%, var(--purple-light) 60%, transparent 60.75%),
      radial-gradient(ellipse, black, transparent 70%);
    background-size:
      90% 45%,
      25% 37%,
      25% 33%,
      25% 33%,
      30% 37%,
      30% 37%,
      90% 45%,
      87% 40%,
      25% 37%,
      25% 33%,
      25% 33%,
      30% 37%,
      30% 37%,
      90% 40%,
      90% 45%,
      90% 45%;
    background-position: 
      50% 25%,
      50% 39%,
      15% 32%,
      85% 32%,
      70% 37%,
      30% 37%,
      50% 39%,
      50% 50%,
      
      50% 56%,
      15% 48.5%,
      85% 49%,
      70% 53%,
      30% 53%,
      50% 60%,
      50% 66%,
      120% 73%;
  }