/*Ultra Bold*/
@font-face{
        font-family: 'Surco';
        src: url(fonts/BwSurco/woff/BwSurco-Black.woff);
        font-weight: 900;
        font-style: normal;
}

/*Normal*/
@font-face{
        font-family: 'Surco';
        src: url(fonts/BwSurco/woff/BwSurco-Regular.woff);
        font-weight: 400;
        font-style: normal;
}

/*Bold Italic*/
@font-face{
        font-family: 'Surco';
        src: url(fonts/BwSurco/woff/BwSurco-BoldItalic.woff);
        font-weight: 700;
        font-style: italic;
}

/* @keyframes notes */
/* "background" property defines html element's background color */
/* "color" property defines font color */
@keyframes ColorFade {
	0% {
                background: #00A9E0;
                color: #00A9E0;
	}
	25% {
                background: #343391;
                color: #343391;
	}
	50% {
                background: #932C8D;
                color: #932C8D;
	}
	75% {
                background: #E91689;
                color: #E91689;
        }
        100% {
                background: #EB2F2E;
                color: #EB2F2E;
        }
}

/* color changing text link */
@keyframes ColorFadeLink {
	0% {
                color: #00A9E0; 
	}
	25% {
                color: #343391;
	}
	50% {
                color: #932C8D;
	}
	75% {
                color: #E91689;
        }
        100% {
                color: #EB2F2E;    
        }
}

body{
        font-family: 'Surco', sans-serif;
        font-weight: 400;
	animation-name: ColorFade;
	animation-duration: 120s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
        animation-timing-function: linear; 
/*
linear is enabled default, it’s not necessary to add it make it work but it can make your code more expressive
from: https://codepen.io/StrengthandFreedom/pen/PoqZRgM
*/

}

h1{
        font-family: 'Surco', san-serif;
        font-weight: 900;
}

h2{
        font-family: 'Surco', san-serif;
        font-weight: 700;
        font-style: italic;
}

a, a:hover, a:visited, a:active{
        font-weight: 900;
        animation-name: ColorFadeLink;
        animation-duration: 120s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
        animation-timing-function: linear;
}

.holliHeader{
        /* margin: 0 0 1em 0; */
}

.holliPositioningStatement{
        padding-top: 2em;
        /* padding-bottom: 2em; */
}

/* header wave border */
.holliWaveBorder{
        height: 99px;
        background-image: url(images/HolliJohnson-WaveBorder-Small.png);
        background-repeat: repeat-x;
        margin: 0 0 1em 0;
}

/* rounded corners with white background and border */
.holliRoundedCorners{
        border: 1em solid #ffffff;
        border-radius: 1em;
        background-color: #ffffff;
        margin: 1em;
}

/* rounded corners with no background or border color (transparent) */
.holliRoundedCornersTrans{
        border: 1em solid transparent;
        border-radius: 1em;
        background-color: transparent;
        margin: 1em;
}

.holliRoundedCornersTrans h2{
        color: #ffffff;
}

.holliRoundedCornersTrans h3{
        color: #ffffff;
}