.hex-shadow{
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    height: 280px;
    filter: drop-shadow(-6px -6px 12px rgba(255, 255, 255, .8))
    drop-shadow(-6px -6px 8px rgba(255, 255, 255, .6))
    drop-shadow(6px 6px 6px rgba(189, 151, 97, .09))
    drop-shadow(6px 6px 6px rgba(189, 151, 97, 0.5));
    
    border: none;
    outline: none;

    transition: .2s ease-in-out;
    
    cursor: pointer;
}
.hex-shadow:hover{


    filter: drop-shadow(-2px -2px 6px rgba(255, 255, 255, .9))
    drop-shadow(-2px -2px 4px rgba(255, 255, 255, .7))
    drop-shadow(2px 2px 2px rgba(189, 151, 97, .3))
    drop-shadow(2px 2px 4px rgba(189, 151, 97, .4));
}

.hex-shadow:hover > * > *{
    color: var(--clr-primary);
}
.hex-shadow:active{
    filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 1));
}
.hex-shadow:active > * > *{
    color: var(--clr-secondary);
}

.hex-cp-btn {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    
    background: var(--clr-lighter);
    width: 250px;
    height: 280px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 6rem;
  }


  
/*HEXAGON ON DARK BG*/

.bg-revert .hex-shadow{
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  height: 280px;
  filter: drop-shadow(-6px -6px 12px rgba(46, 173, 168, .4))
  drop-shadow(-6px -6px 6px rgba(46, 173, 168, .2))
  drop-shadow(6px 6px 8px rgba(0, 0, 0, .1))
  drop-shadow(6px 6px 8px rgba(0, 0, 0, 0.5));
  

  border: none;
  outline: none;

  transition: .2s ease-in-out;
  
  cursor: pointer;
}
.bg-revert  .hex-shadow:hover{
  filter: drop-shadow(-2px -2px 5px rgba(46, 173, 168, .56))
  drop-shadow(-2px -2px 3px rgba(46, 173, 168, .4))
  drop-shadow(2px 2px 3px rgba(0, 0, 0, .9))
  drop-shadow(2px 2px 5px rgba(0, 0, 0, .5));

  transition: font-size 0.4s, opacity 0.4s;
}

.bg-revert  .hex-shadow:hover > * > *{
  font-size: 0.9em;
  opacity: 0.6;
  
  transition: font-size 0.2s, color 0.2s, opacity 0.2s;
}
.bg-revert .hex-shadow:active{
  filter: drop-shadow(0px 0px 14px rgba(46, 173, 168, .5));
  
}
.bg-revert .hex-shadow:active > * > *{
  color: var(--clr-white);
  font-size: 1em;
  opacity: 1;


}

.bg-revert .hex-cp-btn {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  
  background: var(--clr-dark);
  color: var(--clr-secondary);

  width: 250px;
  height: 280px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 6rem;
}