body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    animation: backgroundmulticolor 10s infinite; 
    background-color: #000000;
    transition: background-color 0.5s ease;
 
}

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0px 0;
}

.navbar {
    
    background-color: #00000044;
    opacity: 1;
    background-image:  linear-gradient(135deg, #000000 25%, transparent 25%), linear-gradient(225deg, #000000 25%, transparent 25%), linear-gradient(45deg, #000000 25%, transparent 25%), linear-gradient(315deg, #000000 25%, #362e2e 25%);
    background-position:  26px 0, 26px 0, 0 0, 0 0;
    background-size: 26px 26px;
    background-repeat: repeat;


    color: #fff;
    padding: 21px 0;/* jump street*/


    border-bottom:5px solid  ;
    animation: 10s mcolortext infinite;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    animation: 2s multicolor;
    font-family: 'Pixelify Sans', sans-serif;
    
}



.pathways {
    
    list-style: none;
    padding: 0;
    margin: 0;
}

.pathways li {
    display: inline;
    margin-right: 21px;
}

.pathways li:last-child {
    margin-right: 0;
    
}

.pathways {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    animation: 2s multicolor;
    
}

@keyframes multicolor {
    0% {
        color: #000000;
    }
    33% {
        color: #ff0000;
    }
    66% {
        color: #9e8dff;
    }
    100% {
        color: #FFF;
    }
}

/* only for titles*/
@keyframes mcolortext {
    0% {
        color: #c2b5e6;
    }
    25% {
        color: #7c5a46;
    }
    50% {
        color: #add9be;
    }
    75% {
        color: #4d746f;
    }
    100% {
        color: #c2b5e6;
    }
}








/* i love css*/
@keyframes backgroundmulticolor {
    0% {
        background-color: #9b84d9;
    }
    25% {
        background-color: #cd916c;
    }
    50% {
        background-color: #7dc99a;
    }
    75% {
        background-color: #78b9af;
    }
    100% {
        background-color: #9b84d9;
    }
}







.pathways:hover {
    color: #9e8dff; /* this is my favorite color :)*/
    
}

.bigmeal {
    color: #ffffff;
    padding: 40px;
    text-align: center;
}

.bigmeal h1{
   font-size: 40px;
    animation: 10s mcolortext infinite, mover 4s infinite;
    font-family: 'Pixelify Sans', sans-serif;
}

.bigmeal p {
    font-family: 'DotGothic16', sans-serif;
}




.movingName {
    
    color: #ffffff;
    font-family: 'Pixelify Sans', sans-serif;
    animation: mover 11s infinite;
    
}


@keyframes mover {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
 

 


@keyframes merchSquisher {
    0% {
        
        transform: scale(1);
        
    }

    20% {
        transform: scale(1.12);
    }

    
    100% {
        transform: scale(1);
        
    }
}









/* walk across animationi*/
.gif-container {
   
    width: 100%; 
    height: auto;
}




.gif-container img {
    
    z-index: -2;
    opacity: .8;
    position: absolute;
    top: 55%; 
    left: -100px; 
    width: 50px;
    transform: translate(-50%, -50%); 
    animation: moveRight 30s linear infinite; 

    animation-delay: 6s;
}



@keyframes moveRight {
    from {
        left: -100px; 
    }
    to {
        left: calc(100% + 100px); 
    }
}

























.merchGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.merch {
    animation: translateY(0) 2s ease-in-out;
    filter: drop-shadow(5px 5px 9px rgb(11, 5, 30)); /*color shadow change*/
    padding: 20px;
    border-radius: 6px;
    text-align: center;
}

.merch img {
    animation: translateY(0) 2s ease-in-out;
   /* animation: merchSquisher 4s ease-in-out infinite;  */
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    transition: transform 0.4s ease;
    border-radius: 2%;
}

.merch:hover{
    animation: 5s merchSquisher infinite ease-in-out; /* zoom */
  
}







.merch h3 {
    animation: 2s multicolor;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
}

.merch p {
    animation: 2s multicolor;
    font-size: 14px;
    color: #e3dfff;
}







.footer {
    background-color: #000000;
    color: #fff;
    padding: 20px 0;
    text-align: center;
list-style: none;

border-top:5px solid  ;
animation: 10s mcolortext infinite;
}




.gif-container{ 
    cursor:pointer 
}
.gif-container2{
    cursor:pointer 
}



img.background-gif{ /*THIS IS THE BACKGROUND*/
    position: fixed; 
       top: 0;
       left: -300px;
       object-fit: cover; 
       z-index: -4; 
       opacity: 0.1;
       
    filter: brightness(950%);

       /*zoom: 185%; does not work with safari*/

       width: 200vw;
    height: 200vh; 
       -webkit-transform: scale(1.65);
        transform: scale(1.65);

     }