/*
    taking inspiration from tachyons
*/

:root {
    --black: #000000;
    --near-black: #111111;

    --dark-gray: #333333;
    --mid-gray: #555555;
    --gray: #777777;

    --silver: #999999;
    --light-silver: #AAAAAA;

    --moon-gray: #CCCCCC;
    --light-gray: #EEEEEE;

    --near-white: #F4F4F4;
    --white: #FFFFFF;

    --dark-red: #E7040F;
    --red: #FF4136;
    --light-red: #FF725C;
    --washed-red: #FFDFDF;

    --orange: #FF6300;
    --light-orange:  #f6921e;
    --washed-orange: #FFBFA5;

    --gold: #FFB700;
    --yellow: #FFD700;
    --light-yellow: #FBF1A9;
    --washed-yellow: #FFFCEB;

    --purple: #5E2CA5;
    --light-purple: #A463F2;

    --dark-pink: #D5008F;
    --hot-pink: #FF41B4;
    --pink: #FF80CC;
    --light-pink: #FFA3D7;

    --dark-green: #137752;
    --green: #19A974;
    --light-green: #9EEBCF;
    --washed-green: #E8FDF5;
    
    --navy: #001B44;
    --dark-blue: #00449E;
    --blue: #357EDD;
    --light-blue: #96CCFF;
    --lightest-blue: #CDECFF;
    --washed-blue: #F6FFFE;
}

.light-orange {
    color: var(--light-orange);
}
.bg-light-orange {
    background-color: var(--light-orange);
}
.hover-bg-light-orange:hover {
    background-color: var(--light-orange);
}

.washed-orange {
    color: var(--washed-orange);
}
.bg-washed-orange {
    background-color: var(--washed-orange);
} 
.hover-bg-washed-orange:hover {
    background-color: var(--washed-orange);
}

.bg-dark-blue-gradient {
    /*dark-blue, washed-blue, lightest-blue*/
    background-image: linear-gradient(45deg, #96ccff33, #00459e65);
}

.bg-washed-blue-gradient {
    /*dark-blue, washed-blue, lightest-blue with opacity on all 3 */
    /* background-image: linear-gradient(to bottom,#00449e, #96ccff,#cdecff,#96ccff,#00449e); */
    /* background-image: linear-gradient(to bottom, #96ccff80,#,#96ccff80,#00449e80); */
    background-image: linear-gradient(45deg, #96ccff6b, #cdedffd2, #96ccff67);
}

.bg-washed-green-gradient {
    /* dark-green, washed-green, light-green with opacity 6b,d2,67 respectively */
    /* background-image: linear-gradient(45deg,var(--dark-green),var(--washed-green),var(--light-green)); */
    background-image: linear-gradient(45deg,#1377526b,#E8FDF5d2,#9EEBCF67);
}

.bg-washed-red-gradient {
    /* dark-red, washed-red, light-red with opacity 6b,d2,67 respectively */
    background-image: linear-gradient(45deg,#E7040F6b,#FFDFDFd2,#FF725C67);
}

.bg-washed-yellow-gradient {
    /* yellow, washed-yellow, light-yellow with opacity 6b, d2, 67 respectively */
    background-image: linear-gradient(45deg,#FFD7006b,#FFFCEBd2,#FBF1A967);
}

/* slide right */
.slide-right {
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    transition: -webkit-transform .5s ease-in;
    transition: transform .5s ease-in;
    transition: transform .5s ease-in, -webkit-transform .5s ease-in;
}

.slide-right:hover,
.slide-right:focus {
    -webkit-transform: translateX(1%);
    transform: translateX(1%);
}

.slide-right:active {
    -webkit-transform: translateX(2%);
    transform: translateX(2%);
}

/* nudge */
@keyframes nudge {
    0% { transform: translate(0,0);} 
    50% { transform: translate(3%,0); color: darkorange;}
    100% {transform: translate(0,0);}
}

.nudge {
    animation: nudge 20s ease-in-out infinite;
}

/* fadding in and out */
@keyframes fade-in-out {
    0% { opacity: 0;}
    100% {opacity: 1; color: darksalmon}
}

.fade-in-out {
    animation: fade-in-out 20s ease-in-out infinite alternate;
}

/* fade out */
@keyframes fade-out {
    0% { opacity: 0;}
    100% {opacity: 1; color: darksalmon}
}

.fade-out {
    animation: fade-out 20s ease infinite reverse;
}

/* pulse */
@keyframes pulse {
    0% { transform: scale(1);}
    50% { transform: scale(1.1); }
    100% {transform: scale(1);}
}
@keyframes pulse-out {
    0% { transform: scale(1);}
    100% { transform: scale(1.1); }
}

.pulse {
    animation: pulse 20s infinite ;
}

.pulse-delay {
    animation: pulse 20s infinite 5s;
}
.pulse-out-delay {
    animation: pulse-out 20s infinite 5s;
}

.minw-50 {
    min-width: 50%;
}

.hover-b:hover {
    font-weight: bold;
  }