@import url("main.css");
@import url("variables.css");

.head {
    background-image: url("/assets/images/general/big_band.jpg");
}

h2{
    color:#ffc400;
    text-shadow: 0px 4px 3px rgb(46, 46, 46),
                 0px 8px 13px rgba(0,0,0,1),
                 0px 18px 23px rgba(0,0,0,.5);
    margin: 1.2em 0 .5em 0;
    text-align: center;
    font-size: 3em;
    font-family: 'Cutive Mono', monospace;
}

main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


h5{
    font-family: 'Cutive Mono', monospace;
    text-shadow: 0px 4px 3px rgba(0,0,0,1),
                 0px 8px 13px rgba(0,0,0,1),
                 0px 18px 23px rgba(0,0,0,.5);
}

a, a:hover{
    text-decoration: none;
    color: white;
}

.grow { 
    transition: all .2s ease-in-out; 
}

.grow:hover { 
    transform: scale(1.07); 
}

.card-text{
    display: none; 
}

a:hover .card-text{
    display: inline-block;
}

.having_fun p {
    font-family: var(--text-font-family);
    color:black;
} 

.having_fun h3 {
    color:black;
}

#having_fun_text{
   max-width: 550px;
}

iframe {
    width: 700px;
    height: 450px;
    border-radius: 4%;
    filter: drop-shadow(8px 10px 6px rgba(0, 0, 0, 0.773));
}

/* ========================= */

.animate-charcter
{
    text-transform: uppercase;
    background-image: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
     );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 90px;
    font-family: 'Cutive Mono', monospace;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}