@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,700);

.light-theme {

    /**
     * light theme colors 
     */
  
    --background-primary: hsl(0, 0%, 100%);
    --background-secondary: hsl(0, 0%, 97%);
    --background-contact: hsl(353, 21%, 16%);
    --background-contact2:hsl(229, 76%, 66%);
    --action-primary: hsl(214, 32%, 91%);
    --action-secondary: hsl(210, 38%, 95%);
  
    --foreground-primary: hsl(218, 23%, 23%);
    --foreground-secondary: hsl(216, 15%, 52%);
    --foreground-tertiary: hsl(214, 20%, 69%);
    --foreground-contact: hsl(0, 0%, 93%);
    --accent: hsl(229, 76%, 66%);
  
  }
  
  .dark-theme {
  
    /**
     * dark theme colors 
     */
  
    --background-primary: hsl(218, 23%, 23%);
    --background-secondary: hsl(220, 26%, 14%);
    --background-contact: hsl(0, 0%, 92%);
    --background-contact2:hsl(0, 0%, 92%);
    --action-primary: hsl(216, 15%, 52%);
    --action-secondary: hsl(218, 23%, 23%);
  
    --foreground-primary: hsl(210, 38%, 95%);
    --foreground-secondary: hsl(211, 25%, 84%);
    --foreground-tertiary: hsl(214, 20%, 69%);
    --foreground-contact: hsl(355, 93%, 42%);
    --accent: hsl(229, 76%, 66%);
  
  }





.button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    cursor: url(/assets/images/mouse.png),auto;
    margin:  0;
    padding: 0;
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    
}

.icon-paperplane {
    font-size: 1em;
    color: var(--background-primary);
    margin-left: 1px;
    margin-top: 5px;

}

.contact-button {
    background-color: var(--accent2);
    position: relative;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    color: var(--background-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 1em;
    border-radius: 50px;
    /* padding: 20px 60px 20px 55px; */
    padding: 10px 30px; /* size of blue button */
    transition: .3s ease-in-out;
    margin:5px;
}
.contact-button:hover {
    transition: 0.3s ease-in-out;
    /* border: 2px solid var(--background-primary); */
    border-radius: 50px;
    background-color: var(--background-primary);
    color:var(--background-primary);
    
}

.contact-button span {
    text-transform: none;
    position: absolute;
    color:var(--background-contact);   /* bazzofx@outlook.com */
    font-size: 1.4rem;
    top: 37px; 
    left: 15px;
    opacity: 0;
    transition: all 0s ease 0s;
}

.contact-button:hover > span {
    opacity: 1;
    transition: all 0.25s ease-in-out 0.1s;
    cursor: url('/assets/images/hands11.cur'),auto;
}

.contact-button:hover:before {
    /* available to work text Hoover*/
    transition: 0.3s ease-in-out;
    background-color:var(--background-primary);


}

.contact-button:before,
.contact-button:after {
    content: "";
    position: absolute;
    top: -18px;
    left: -12px;
    width: 100px;
    height: 30px;
    cursor: url('/assets/images/hands11.cur'),auto;

}

.contact-button:before {
    background-color: var(--background-contact); /* color top background 'say hello' */
    transform: skew(-25deg);
    transition: 0.3s ease-in-out;
}
.contact-button:after {
    /* available to work text */
    content: "Say hello :)";
    font-size: .72em;
    top: -14px;
    left: -4px;
    color:var(--foreground-contact);

    
}

.contact-button:hover:after {
    /* available to work text */
    content: "Let's chat";
    font-size: .72em;
    top: -7px;
    left: 0px;
    color:var(--background-contact);
}

@media(width>50px){
    .contact-button{
        display:none !important;
    }
}
@media(width>760px){
    .contact-button{
        display:block !important;
    }
}