/* Burger Button */
.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: scaleY(0.8) scaleX(1.2);
}
.burger-6.is-closed.hamRotate {
    transform: rotate(45deg) scale(1.2);
}
.line {
    fill: none;
    transition: 0.4s;
    stroke: #f9f9f9;
    stroke-width: 3;
    stroke-linecap: round;
}
.ham1 .top { stroke-dasharray: 40 139; }
.ham1 .bottom { stroke-dasharray: 40 180; }
.burger-6.is-closed.ham1 .top { stroke-dashoffset: -98px; }
.burger-6.is-closed.ham1 .bottom { stroke-dashoffset: -138px; }
.burger-button {
    background: rgb(55 55 55 / 100%);
    border: 0;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    scale: 0.7;
    border-radius: 8px;
    transition: 0.25s;
}  
.burger-button:hover {
    opacity: 1;
    background: var(--color-1);
}
.burger {
    position: relative;
    width: 32px;
    border: 0;
}  
.burger, .burger::before, .burger::after {
    display: block;
    border-radius: 2px;
    height: 2px;
    background: #f9f9f9;
    transition: 0.3s;
} 
.burger::before, .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}
.burger::before { top: -8px; }  
.burger::after { top: 8px; }
/* Button Contact */
.btn-contact {
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--transparent-2);
    color: var(--grey-4);
    text-decoration: none;
    transition: ease 0.3s all;
}
.btn-contact:hover { background: var(--transparent-3); }
/* Button skills */
.btn-skills {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: transparent;
    color: var(--dark-2);
    border: solid 1px var(--dark-2);
    transition: ease 0.3s all;
}
.btn-skills:hover {
    background: var(--transparent-4);
    color: var(--grey-2);
    border: solid 1px var(--grey-2);
}
/* Blue Button */
.blue-btn {
    padding: 22px 60px;
    border-radius: 16px;
    background: var(--color-1);
    color: var(--grey-4);
    text-decoration: none;
    transition: ease 0.3s all;
}
.blue-btn:hover { 
    background: var(--blue-1); 
    color: var(--grey-4);
}
/* Blue Button 2 */
.blue-btn2 {
    width: 190px;
    height: 71px;
    border-radius: 16px;
    background: var(--color-1);
    color: var(--grey-4);
    transition: ease 0.3s all;
}
.blue-btn2:hover {
    background: var(--blue-1); 
    color: var(--grey-4);
}
.border-btn {
    width: 198px;
    height: 79px;
    padding: 2px;
    border: solid 2px var(--color-1);
    border-radius: 20px;
}
/* Transparent Button */
.transparent-btn {
    padding: 22px 60px;
    border-radius: 16px;
    background: var(--transparent-1, rgba(255, 255, 255, 0.03));
    color: var(--grey-4);
    border: 1px solid var(--transparent-2, rgba(255, 255, 255, 0.13));
    backdrop-filter: blur(16.5px);
    -webkit-backdrop-filter: blur(16.5px);
    text-decoration: none;
    transition: ease 0.3s all;
}
.transparent-btn:hover { 
    background: var(--transparent-2); 
    color: var(--grey-4);
}