/* Hover action */
@charset "utf-8";

/* 
header text 
*/
.nav-btn:hover span {
    background: var(--hover_color_red);
    transition:  all .2s .1s ease-out;
}

nav ul:first-child li:hover {
    color: var(--hover_color_red);
    padding-left: clamp( 20px, 1em, 25px);
    transition:  all .5s .25s ease-out;
}

nav ul:last-child li:hover {
    color: var(--hover_color_red);
    padding-left: clamp( 20px, 1em, 25px);
    transition:  all .2s .25s ease-out;
}

/* 
Portfolio link 
*/

.portfolio-card:hover {
    transform: scale(1.1);
    transition:  all .2s .1s ease-out;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
}

.kitakan:hover {
    transition:  all .2s .12s ease-out;
}

.kitakan:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.portfolio-card:hover .portfolio-content {
    position: relative;
    z-index: 100;
    opacity: 1;
    transition:  all .2s .1s ease-out;
    transform: translateY(0);
}

.portfolio-card:hover .portfolio-content a:hover {
    margin-top: 17px;
    margin-bottom: -3px;
    padding: 8px 23px;
    transition:  all .2s 0s ease-out;
}

.portfolio-card:hover .portfolio-content a:active {
    box-shadow: 0 0 0;
    transition:  all 0s 0s;
}

/* 
Footer text 
*/

.footer_link_wrap li:hover {
    color: var(--hover_color_red);
    padding-left:clamp( 20px,1em, 25px);
    transition:  all .2s .25s ease-out;
}