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


/* ===================================================================== TYPE COLORS */

body{
    color: black;
}

.fontWhite{
    color: white !important;
}

.fontAccent{
    color: rgb(var(--gradient)) !important;
}


/* ===================================================================== BACKGROUND COLORS */

.bodyMe, .bodyAbout{
    background-color: var(--me);
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.bodyMe header{
    background-color: var(--me);
}

.bodyDesigns{
    background-color: var(--designs);
}

.bodyTeach{
    background-color: var(--teach);
}


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

.animationGradient{
    overflow: hidden;

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

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

    padding: 0;

    animation: sketch6 linear 10s 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;
        }
}



/* ===================================================================== RESPONSIVE/MEDIA QUERY */

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

}

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


}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 768px) {


}

/* Smartphones ----------- */
@media only screen and (max-width : 600px) {


  
}