.btnWrapper * {
    --borderWidth: 1px;
    --shadowDepth: 10px;
    --animSpeed: 300ms;
    --fontColor: white;
    --highlightFont: rgb(0, 0, 0);
    --highlightIcon: rgb(98, 255, 203);
    --highlightBG:   rgb(255, 255, 255);
    --highlightBorder: var(--highlightBG);
    --highlightTextShadow: var(--highlightIcon);
    --highlightShadow: var(--highlightIcon);
}

.btn-dark * {
    --borderWidth: 1px;
    --shadowDepth: 10px;
    --animSpeed: 300ms;
    --fontColor: rgba(20, 28, 54, 1);
    --highlightFont: rgb(117, 255, 209);
    --highlightIcon: var(--fontColor);
    --highlightBG:   rgb(255, 255, 255);
    --highlightBorder: var(--highlightBG);
    --highlightTextShadow: var(--highlightIcon);
    --highlightShadow: var(--highlightIcon); 
    /* color: var(--highlightIcon); */

}

.btnWrapper {
    --width: 180px;
    --height: 60px;
    --btnWidth: var(--width);
    --btnHeight: var(--height);
    width: var(--btnWidth);
    height: var(--btnHeight);
    transition: all 500ms ease;
    z-index: 2;

}

.floatingBtn {
    --btnWidth: calc(var(--width) / 2);
    --btnHeight: calc(var(--width) / 2);
}

.floatingBtn .contact-btn {
    border-radius: 100px;

}



.floatingBtn .contact-btn::before,
.floatingBtn .contact-btn::after {
    display: none;
}

.floatingBtn p {
    display: none;
}

.contact-btn {
        
    width: var(--btnWidth);
    height: var(--btnHeight);
    padding: 5px;

    position: relative;
    box-sizing: border-box;
    
    font-family: 'Questrial', sans-serif;
    font-size: 1.4rem;
    text-decoration: none;
    border: var(--borderWidth) solid var(--fontColor);
    background: transparent;
    color: var(--fontColor);
    cursor: pointer;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    transition: 
        width calc(var(--animSpeed) * 2.5) ease,
        height calc(var(--animSpeed) * 2.5) ease,
        top var(--animSpeed) ease,
        left var(--animSpeed) ease,
        transform var(--animSpeed) ease;
        
}

.contact-btn p {
    transition:
        font-size var(--animSpeed) ease,
        transform var(--animSpeed) ease,
        filter var(--animSpeed) ease,
        text-shadow var(--animSpeed) ease;
}

.contact-btn img,
.contact-btn svg {
    transition:
        scale var(--animSpeed) ease,
        transform var(--animSpeed) ease,
        filter var(--animSpeed) ease;
}

.contact-btn:hover,
.contact-btn:focus {
    color: var(--highlightFont);
    border-color: var(--highlightBorder);
    background: var(--highlightBorder);

    transform: 
        translate(
            calc(var(--shadowDepth)),
            calc(var(--shadowDepth) * -1)
        )
}

.contact-btn:active {
    color: var(--highlightFont);
    border-color: var(--highlightBorder);
}

.contact-btn:focus {
    outline: var(--highlightBorder);
}

.contact-btn p {
    flex: 1 1 auto;
}



.contact-btn:before,
.contact-btn:after,
.contact-btn:hover::before,
.contact-btn:hover::after,
.contact-btn:focus::before,
.contact-btn:focus::after {
    content: '';
    position: absolute;
    border: none;
    background: var(--highlightShadow);
    z-index: 1;
    transition: all var(--animSpeed) ease;
    animation-duration: var(--animSpeed);
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.contact-btn::before {
    content: '';
    top: calc(var(--borderWidth) * -1);
    left: calc(var(--borderWidth) * -1);
    height: var(--btnHeight);
    width: 0;
    transform: skew(0, -45deg);
}

.contact-btn:hover::before,
.contact-btn:focus::before  {
    content: '';
    top: calc(calc(var(--shadowDepth) / 2) - var(--borderWidth));
    left: calc(calc(var(--shadowDepth) + var(--borderWidth)) * -1);
    height: var(--btnHeight);
    width: var(--shadowDepth);
}


.contact-btn::after {
    content: '';
    top: calc(var(--btnHeight) - var(--borderWidth));
    height: 0;
    width: var(--btnWidth);
    left: calc(var(--borderWidth) * -1);
    transform: skew(-45deg, 0);
}

.contact-btn:hover::after,
.contact-btn:focus::after  {
    content: '';
    top: calc(var(--btnHeight) - var(--borderWidth));
    height: var(--shadowDepth);
    left:  calc(calc(calc(var(--shadowDepth) / 2) + var(--borderWidth)) * -1);
}

.contactIconWrapper {
    flex: 1 1 auto;
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.contactIconWrapper svg {
    height: calc(var(--btnHeight) / 2);
    width: calc(var(--btnHeight) / 2);
}

.msgIcon {
    transition: color 0 ease;
    fill: white;
}

.contact-btn:hover .msgIcon,
.contact-btn:focus .msgIcon {
    fill: var(--highlightFont);
}

.contact-btn:hover svg,
.contact-btn:hover img,
.contact-btn:hover p,
.contact-btn:focus svg,
.contact-btn:focus img,
.contact-btn:focus p,
.floatingBtn .contact-btn:hover  {
    --shadowColor: var(--highlightTextShadow);
    --x: -0.1rem;
    --y: 0.1rem;


    transform: 
        translate(
            calc(var(--x) * -2),
            calc(var(--y) * -2)
        )
        scale(1.2);
    
    filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));

    -webkit-filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));
}

.contact-btn:hover p,
.contact-btn:focus p  {
    font-size: 1.4rem;
    font-weight: 800;
}

.floatingBtn .contact-btn:hover {
    
    --shadowColor: var(--highlightTextShadow);
    --x: -0.1rem;
    --y: 0.1rem;

    transition:
    scale var(--animSpeed) ease,
    transform var(--animSpeed) ease,
    filter var(--animSpeed) ease;

    filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));
}

.floatingBtn .contact-btn:hover {
    transform: scale(1);
    transition:
    scale var(--animSpeed) ease,
    transform var(--animSpeed) ease,
    filter var(--animSpeed) ease;
}