@keyframes loseQuadraticButton {
  from {
    margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
  } to {
    margin-bottom: 0.25em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
  }
}

@keyframes loseOddQuadraticButton {
  from {
    margin-bottom: 2.5em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
  } to {
    margin-bottom: 2.75em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
  }
}

.quadraticButton {
  animation-duration: 0.25s;
  animation-name: loseQuadraticButton;

  width:18em;
  height:18em;

  background-color:rgb(var(--quadraticButtonBackgroundColor));
  display:inline-block;
  cursor:pointer;
  text-align:center;
  margin:0 0.65em 0.25em;

  -webkit-border-radius: 1.0em;
     -moz-border-radius: 1.0em;
          border-radius: 1.0em;

  -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
     -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
          box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
}

.quadraticButton:nth-child(odd){
  margin-bottom:2.75em;
  animation-duration: 0.25s;
  animation-name: loseOddQuadraticButton;
}

@keyframes pressQuadraticButton {
  from {
    margin-bottom: 0.25em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
  } to {
    margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
  }
}

@keyframes pressOddQuadraticButton {
  from {
    margin-bottom: 2.75em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(var(--quadraticButtonShadowLightColor),0.25);
  } to {
    margin-bottom: 2.5em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
  }
}

.quadraticButton:hover {
  animation-duration: 0.25s;
  animation-name: pressQuadraticButton;

  margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
}

.quadraticButton:nth-child(odd):hover {
  animation-duration: 0.25s;
  animation-name: pressOddQuadraticButton;

  margin-bottom: 2.5em;
    
  -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
     -moz-box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
          box-shadow: 0 0.25em 0.25em 0em rgba(var(--quadraticButtonShadowStrongColor),0.4);
}

.quadraticButtonIcon {
  margin:3em 0 2em;
}

.quadraticButtonIcon svg {
  width:30%;
  fill:rgb(var(--darkColor));
}

.quadraticButtonToppic {
  margin-bottom:2.5em;
  font-size: 1.25em;
}

.quadraticButtonLink {
  color:rgb(var(--darkColor));
}

.quadraticButton:hover .quadraticButtonLink {
  color:rgb(var(--primaryColor));

  -webkit-filter: drop-shadow(0em 0em 0.5em rgba(var(--primaryColor), 0.4));
     -moz-filter: drop-shadow(0em 0em 0.5em rgba(var(--primaryColor), 0.4));
          filter: drop-shadow(0em 0em 0.5em rgba(var(--primaryColor), 0.4));
}

.quadraticButton:hover .quadraticButtonIcon svg {
  fill:rgb(var(--primaryColor));

  -webkit-filter: drop-shadow(0em 0em 1.5em rgba(var(--primaryColor), 0.4));
     -moz-filter: drop-shadow(0em 0em 1.5em rgba(var(--primaryColor), 0.4));
          filter: drop-shadow(0em 0em 1.5em rgba(var(--primaryColor), 0.4));
}