@font-face { font-family: 'NotCourierSans'; src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PinyonScript'; src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg'); font-weight: normal; font-style: normal; } body{ font-family: NotCourierSans; font-weight: normal; background-color: white; position: relative; } h1 { font-family: PinyonScript; font-weight: normal; color: #003cb3; } h1 { font-size: 80px; margin-top: 0px; } p { font-family: NotCourierSans; color: #003cb3; font-size: 17px; } a { color: #003cb3; } audio{ width: 400px; } .image{ width: 400px; } .image img{ width: 400px; } .seperator{ width:100%; overflow: hidden; } div.content{z-index:20; width: 75%; margin-left: auto; margin-right: auto; background: #fffc; margin-bottom: 50%; padding: 0 1%; } /* child elements of div.content */ div.content * { width:100%; background: white; } div.content h2 {color: #FFFFFF; background-color: #000000; } div.content audio { width:75%; height:30px; } /*imgs.background z-index<10*/ div.background{z-index:-1; width:100%;} img.background{ position: fixed; z-index:-1; animation: fadein 3s; -moz-animation: fadein 3s;/* Firefox */ -webkit-animation: fadein 3s;/* Safari & Chrome */ -o-animation: fadein 3s; /* Opera */ } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } }