.glue{display:flex;flex-wrap:wrap;
    width:100%;
}
.sniplets{width:150px;height:fit-content;margin:1%;padding:1%;
background-color:white;color:black;
}


:root{
  --leaf-colour:#75976a;
  --flower-colour:#cc5b76;
  --leaf-width:50px;
  --leaf-copy:-50px;
  --lady-height:30px;
  --lady-width:90px;
  --lady-radius:40px;
  --lady-bodco:black;
  --lady-wigco:red;
}
.clover-container{display:flex;align-items:center;align-content:center;justify-content:center;width: calc(var(--leaf-width)*4);height:calc(var(--leaf-width)*4);margin:-25px;}
.clover{position:absolute;display:grid;grid-template-columns:repeat(2, calc(var(--leaf-width)*2));grid-template-rows:repeat(2, calc(var(--leaf-width)*2));width: calc(var(--leaf-width)*4);height:calc(var(--leaf-width)*4);}
.clover-container>.content{z-index:5;width: calc(var(--leaf-width) + 20%);height:calc(var(--leaf-width) + 20%);background-color:var(--leaf-colour);padding:2%;justify-self:center;align-content:center;text-align:center;color:black;overflow-y:auto;overflow-x:hidden;}
.leaf-one, .leaf-two, .leaf-three, .leaf-four{position:relative;width:var(--leaf-width);height:var(--leaf-width);background-color:var(--leaf-colour);border-radius:60% / 60% 0% 60% 60%;}
.leaf-one::before, .leaf-two:before, .leaf-three:before, .leaf-four:before {content:"";position:absolute;width:var(--leaf-width);height:var(--leaf-width);background-color:var(--leaf-colour);border-radius: 60% / 60% 0% 60% 60%;top:var(--leaf-copy);left:0px;rotate:90deg;}
.leaf-one{rotate:90deg;justify-self:start;align-self:start;left:50%;top:25%;}
.leaf-two{rotate:180deg;justify-self:end;align-self:start;top:50%;left:-25%;}
.leaf-three{rotate:0deg;justify-self:start;align-self:end;top:-50%;left:25%;}
.leaf-four{rotate:-90deg;justify-self:end;align-self:end;top:-25%;left:-50%;}

.flower-n-stem{display:grid;align-items:center;width: calc(var(--leaf-width)*2);height:calc(var(--leaf-width)*3);margin-top:4%;justify-self:center;}
.flower-leaf {position:relative;width:var(--leaf-width);height:var(--leaf-width);rotate:90deg;background-color:var(--leaf-colour);border-radius: 90% 0% 70% 10%;}
.flower-leaf::before {content:"";position:absolute;width:var(--leaf-width);height:var(--leaf-width);background-color:var(--leaf-colour);border-radius: 70% 0% 90% 10%;top:var(--leaf-copy);left:0px;rotate:90deg;}
.flower-leaf::after {content:"";position:absolute;width:calc(var(--leaf-width)*2);height:calc(var(--leaf-width)/5) ;background-color:var(--leaf-colour);top:-4px;left:var(--leaf-copy);}
.flower-petals {z-index:1;border-radius:100%;position:relative;left:25%;height:var(--leaf-width);width:var(--leaf-width);rotate:-17deg;background-color:var(--flower-colour);box-shadow:20px 0px var(--flower-colour),6px 19px var(--flower-colour),-16px 12px var(--flower-colour),-16px -12px var(--flower-colour),6px -19px var(--flower-colour);}
.flower-n-stem:hover .flower-petals{animation:spin 10s infinite linear;}

.ladybug {display:grid;grid-template-rows:repeat(2, 1fr);grid-template-columns:1fr;position:relative;margin-bottom:50px;margin-top:20px;}
.lady-head {background:var(--lady-bodco);height:var(--lady-height);width:calc(var(--lady-width)/1.88);border-radius:40px;justify-self:center;align-self:end;display:flex;justify-content:space-evenly;}
.lady-head>.antenna{background:var(--lady-bodco);height:var(--lady-height);width:calc(var(--lady-height)/3);position:relative;border-radius:var(--lady-radius);bottom:13px;}
.lady-body {background:var(--lady-bodco);height:calc(var(--lady-height)*2.5);width:var(--lady-width);justify-self:center;align-self:start;position:absolute;top:calc(var(--lady-height) - 15%);border-radius:var(--lady-radius);}
.lady-legs{background:var(--lady-bodco);height:calc(var(--lady-height)/2.88);width:calc(var(--lady-width)*1.15);border-radius:var(--lady-radius);position:relative;justify-self:center;top:10px;box-shadow:0px 20px var(--lady-bodco),0px 40px var(--lady-bodco);display:grid;grid-template-rows:1fr;grid-template-columns:repeat(2, 1fr);}
.lady-wing-left {background:var(--lady-wigco);height:calc(var(--lady-height)*2.36);width:calc(var(--lady-width)/1.9);z-index:1;position:relative;border-radius:130% 10% 20% 100%;top:-6px;justify-self:end;align-self:center;}
.lady-wing-right {background:var(--lady-wigco);height:calc(var(--lady-height)*2.36);width:calc(var(--lady-width)/1.9);z-index:1;position:relative;border-radius:130% 10% 20% 100%;top:-6px;justify-self:start;align-self:center;transform:rotateY(180deg);}
.lady-wing-left::before {content:'';z-index:5;background-color:var(--lady-bodco);width:calc(var(--lady-width)/4);height:calc(var(--lady-width)/4);border-radius:100%;left:3px;top:20px;position:absolute;box-shadow:17px 27px var(--lady-bodco),33px -25px var(--lady-bodco);}
.lady-wing-right::before {content:'';z-index:5;background-color:var(--lady-bodco);width:calc(var(--lady-width)/4);height:calc(var(--lady-width)/4);border-radius:100%;left:3px;top:20px;position:absolute;box-shadow:17px 27px var(--lady-bodco),33px -23px var(--lady-bodco);}
.ladybug:hover .lady-wing-left {animation:left-wing 1s infinite alternate ease-in-out;}
.ladybug:hover .lady-wing-right {animation:right-wing 1s infinite alternate ease-in-out;}

@keyframes left-wing {0% {rotate:0deg;top:-6px;}100% {rotate:10deg;top:-6px;left:-1.5px;}}
@keyframes right-wing {0% {rotate:0deg;top:-6px;}100% {rotate:-10deg;top:-6px;right:-1.5px;}}
@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg)}}
textarea{margin:1%;width:95%;height:120px;}

.protect-the-dolls{
  display:block;justify-self:center;
  width:88px;
  height:31px;
  padding:1px;
  background:#FFFFFF;
  color:#000000;
  border:1px solid;
  font-family:Didot,'Bodoni MT','Noto Serif Display','URW Palladio L',P052,Sylfaen,serif;
  font-weight:normal;
  font-size:12px;
  &::after{content:'PROTECT THE DOLLS';}
  &:hover{
    background:linear-gradient(0deg, 
    #5BCEFA 0% 20%, 
    #F5A9B8 20% 40%,
    #FFFFFF 40% 60%,
    #F5A9B8 60% 80%,
    #5BCEFA 80% 100%);
  }
}

.equity{
  display:block;justify-self:center;
  width:88px;
  height:31px;
  padding:0;
  background:#FFFFFF;
  color:black;
  border:1px solid;
  font-family:Bahnschrift,'DIN Alternate','Franklin Gothic Medium','Nimbus Sans Narrow',sans-serif-condensed,sans-serif;
  font-weight:normal;
  font-size:16px;
  &::after{
    content:'EQUALITY';
    filter:blur(1.5px);
    position:relative;
    top:1px;
  }
  &:hover::after{
    animation:equity 1s ease-in-out infinite alternate;
  }
}

  @keyframes equity {
0%{content:'EQUALITY';filter:blur(1.5px);}
20%{content:'EQULITY';filter:blur(1.5px);}
30%{content:'EQUITY';filter:blur(1.5px);}
40%{content:'EQUITY';filter:blur(1px);}
50%{content:'EQUITY';filter:blur(0.5px);}
60%,100%{content:'EQUITY';filter:blur(0px);}
}

:root{
    --border-px:3px;
    --bear-width:145px;
    --bear-height:50px;
    --bear-fur:beige;
    --bear-face:black;
    --border: color-mix(in srgb, var(--bear-face) 20%, var(--bear-fur));
}

.bear{
  display:block;margin-top:-20px;
  width:calc(var(--bear-width) - 0.5px + (var(--border-px)*2));
}

.bear-face{
  background-color:var(--bear-fur);
  width:var(--bear-width);
  height:var(--bear-height);
  border-radius:0 0 10px 10px;
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-bottom:var(--border-px) solid var(--border);
  color:var(--bear-face);
  display:flex;
  align-items:flex-end;
  justify-content:space-evenly;
  text-align:center;
}

.b-nose{
  background-color:var(--border);
  width:calc(var(--bear-width)/5);
  height:calc(var(--bear-height)/3);
  border-radius:100px 100px 0 0;
  box-shadow:
  5px 1px 5px var(--border),
  -5px 1px 5px var(--border),
  1px -5px 5px var(--border);
  align-content:end;
  line-height:10px; /*change to move nose placement*/
  &::after{
    content:'ᴥ';
  }
}

.bear-ear{
 display:flex;
 justify-content:space-around;
 width:calc(var(--bear-width) + (var(--border-px)*2));
}

.b-ear{
  background-color:var(--bear-fur);
  width:calc(var(--bear-width)/5);
  height:calc(var(--bear-height)/3);
  border-radius:100px 100px 0 0;
  position:relative;
  top:6px;
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-top:var(--border-px) solid var(--border);
}

.b-content{
  background-color:var(--bear-fur);
  color:var(--bear-face);
  padding:5%;
  position:relative;
  top:calc((var(--bear-width)/10) + 2px + var(--border-px));
  height:calc(var(--bear-height)*2);
  width:var();
  border-radius:10px 10px 0 0;
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-top:var(--border-px) solid var(--border);
  overflow:auto;
}

.b-eye{
  background-color:var(--bear-face);
  width:10px;
  height:3px;
  border-radius:10px;
  align-self:center;
  animation:close-eye 1s;
}

.bear:hover .b-eye{
  background-color:var(--bear-face);
  width:10px;
  height:10px;
  animation:open-eye 1s;
}

@keyframes close-eye {
    from {width:10px;height:10px;}
    to {width:10px;height:3px;}
}
@keyframes open-eye {
    0%   {width:10px;height:3px;}
    100% {width:10px;height:10px;}
}