.gradient-text{
    width:fit-content;
    font-family: var(--def-head-font);
    background: #12c2e9; 
    background: -webkit-linear-gradient(135deg, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); 

    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.gradient-header{
    width:fit-content;
    font-family: var(--def-head-font);

    background: #12c2e9;
    background: -webkit-linear-gradient(135deg, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); 

    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.gradient-hover:hover{
    width:fit-content;

    background: #12c2e9;  
    background: -webkit-linear-gradient(135deg, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); 

    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}


input.gradient-button, button.gradient-button, a.gradient-button{
    font-family: var(--def-head-font);
    font-size: 1.2rem;

    background: #12c2e9; 
    background: -webkit-linear-gradient(135deg, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); 

    background-color: none;
    border: none;
}

/* Wipe transition */
.color-wipe{
    position: fixed;
    top:0;
    width: 100vw;
    height: 100vh;

    z-index: 2000;

    background: #12c2e9;  /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(135deg, #f64f59, #c471ed, #12c2e9); 
}

.color-wipe-in{
    animation-name: color-wipe-in;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.color-wipe-out{
    right:0;
    animation-name: color-wipe-out;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.mobile-container{
    background-color: #dcdcdc;
}