:root {
     --note-w: 250px;
     --note-pad: 1.1rem 1.25rem 1.5rem;
 }

 .sticky-note-yellow {
     --note-top: #fff6bf;
     --note-bottom: #ffe36b;
 }

 .sticky-note-yellow:after {
     /* this defines tape color on top*/
     background: var(--note-top);
     border-bottom: 1px solid var(--note-bottom);
 }

 .sticky-note-light-orange {
     --note-top: #ffffff;
     --note-bottom: #fce3bf;
 }

 .sticky-note-light-teal {
     --note-top: #ffffff;
     --note-bottom: #bffce3;
 }

 .sticky-note-light-green {
     --note-top: #ffffff;
     --note-bottom: #effcbf;
 }

 .sticky-note-light-pink {
     --note-top: #ffffff;
     --note-bottom: #fbbffc;

 }

 .sticky-note-sky-blue {
     --note-top: #ffffff;
     --note-bottom: #bfeafc;
 }

 /* this defines tape color on top 
.sticky-note-white:after{
   background:#e5e5e5;
    border-bottom: 1px solid var(--note-bottom ); 
}*/
 /* the sticky note itself */
 .sticky-note {
     position: relative;
     min-width: var(--note-w);
     padding: var(--note-pad);
     border-radius: 8px;
     background: linear-gradient(var(--note-top), var(--note-bottom));
     transform: rotate(-2deg);
     color: #2b2b2b;
     white-space: nowrap;
 }

 .sticky-note-shadow {
     box-shadow: 0 12px 26px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
 }

 /* table shadow underneath */
 .sticky-note::before {
     content: "";
     position: absolute;
     left: 10px;
     right: 10px;
     bottom: -10px;
     height: 16px;
     background: radial-gradient(ellipse at center,
             rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 70%);
     filter: blur(1px);
     z-index: -1;
 }

 /* the “tape” at the top */
 .sticky-note::after {
     content: "";
     position: absolute;
     top: -14px;
     left: 30%;
     width: 40%;
     height: 24px;
     border-radius: 3px;
     transform: rotate(-3deg);
     opacity: 0.85;
     mix-blend-mode: multiply;
     pointer-events: none;
 }

 .sticky-note .sticky-note-header {
     font-weight: 700;
     letter-spacing: .2px;
     margin: 0;
     font-size: clamp(1rem, 0.9vw + 0.5rem, 1.9rem);
 }

 .sticky-note p {
     margin: 0;
 }

 .fixed-center .sticky-note {
     padding-bottom: 12px;
 }