:root {
    --me: #D6C4C2;
    --designs: #B3DCB2;
    --teach: #BCB5D8;
    --accent: #FF4F37;
    --gradient: 255, 79, 55;
}


/* ===================================================================== ANIMATION NAME */
.fontName{
  animation: marisa linear 30s infinite;
}

.fontName span{
  color: black;
    transition: color .25s;
        -o-transition: color .25s;
        -moz-transition: color .25s;
        -webkit-transition: color .25s;
}

.fontName:hover span{
  color: white;
    transition: color .25s;
        -o-transition: color .25s;
        -moz-transition: color .25s;
        -webkit-transition: color .25s;
}

@keyframes marisa{
  0% { width: 100%; }
  50% { width: 85%; }
  100% { width: 100%; }
}

/* =========================== ANIMATION NAME > RESPONSIVE/MEDIA QUERY */


/* iPads (landscape) ----------- */
@media only screen and (max-width : 992px) {
  .fontName{
    animation: marisa linear 20s infinite;
  }
  @keyframes marisa{
    0% { width: 100%; }
    50% { width: 90%; }
    100% { width: 100%; }
  }
}

/* Smartphones ----------- */
@media only screen and (max-width : 600px) {
  .fontName{
    animation: marisa linear 10s infinite;
    font-size: 2.5rem;
  }
}





/* ===================================================================== ANIMATION GRADIENT */

.animationGradient{
    overflow: hidden;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
}

.sketch6{
    min-height: 10vh;
    min-width: calc(100vw/7);
    background-size: 100% 200%;

    padding: 0;

    animation: sketch6 linear 3.5s infinite;

}

.bodyMe .sketch6{
    min-height: 75vh;

    animation: sketch6 linear 7s infinite;
}

.sketch6:hover{
    animation-play-state: paused;
}

.sketch6a{
    background-image: linear-gradient(to bottom, 
        rgba(var(--gradient),0) 0%, 
        rgba(var(--gradient),1) 50%, 
        rgba(var(--gradient),0) 50%, 
        rgba(var(--gradient),1) 100%);
}

.sketch6b{
    background-image: linear-gradient(to bottom, 
        rgba(var(--gradient),.25) 0%, 
        rgba(var(--gradient),1) 37.5%, 
        rgba(var(--gradient),0) 37.5%, 
        rgba(var(--gradient),1) 87.5%,
        rgba(var(--gradient),0) 87.5%,
        rgba(var(--gradient),.25) 100%);
}

.sketch6c{
    background-image: linear-gradient(to bottom, 
        rgba(var(--gradient),.5) 0%, 
        rgba(var(--gradient),1) 25%, 
        rgba(var(--gradient),0) 25%, 
        rgba(var(--gradient),1) 75%,
        rgba(var(--gradient),0) 75%,
        rgba(var(--gradient),.5) 100%);
}

.sketch6d{
    background-image: linear-gradient(to bottom, 
        rgba(var(--gradient),.75) 0%, 
        rgba(var(--gradient),1) 12.5%, 
        rgba(var(--gradient),0) 12.5%, 
        rgba(var(--gradient),1) 62.5%,
        rgba(var(--gradient),0) 62.5%,
        rgba(var(--gradient),.75) 100%);
}


@keyframes sketch6{
  from { 
            background-position: top left;
        } to { 
            background-position: bottom left;
        }
}

/* =========================== ANIMATION GRADIENT > RESPONSIVE/MEDIA QUERY */

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1200px) {

}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1024px) {
}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 768px) {
  .sketch6{
      min-width: calc(100vw/4);
    }

}





/* ===================================================================== PROJECT CARD */


.projectCard a .projectImage{
    border: 0px dotted var(--accent);
    transition: border .5s;
        -o-transition: border .5s;
        -moz-transition: border .5s;
        -webkit-transition: border .5s;

}

.projectCard a:hover .projectImage{
    border: 14px dotted var(--accent);
    transition: border .5s;
        -o-transition: border .5s;
        -moz-transition: border .5s;
        -webkit-transition: border .5s;

}