/* */ html { background-color: black; margin: 0em; color: #3a1c00; } body {background-color: black; color: white; } @font-face { font-family: frizQuadrata; src: url(graphics/fonts/QuidBold.otf); } .main { margin-left: 15vw; margin-bottom: 5%; margin-top: 0%; } h1, h2, h3, h4, h5, h6 { font-family: frizQuadrata, Helvetica, Arial, sans-serif; font-weight: normal; color: #0a0; } h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0px; margin-left: inherit; font-weight: normal; font-family: serif; font-size: 75%; font-style: italic; color: white; } h1 { font-size: 200%; } h2 { font-size: 1.5em; margin-left: 2%; } h3 { font-size: 1.2em; margin-left: 4%; font-style: italic; } h4 { font-size: 1.1em; margin-left: 6%;} h5 { font-size: 1em; margin-left: 8%; } h6 { font-size: 1em; margin-left: 9%; } p { color: white; text-align: left; } blockquote p { margin-left: +2em; margin-right: +2em; text-indent: -2em; } p.topic { margin-top: 1em; text-indent: 0em;} ol, ul, dl { margin-top: .2em; margin-left: 10%; margin-right: 10%; padding-left: 1em;} ol ol, ul ul, dl dl, ol ul, ol dl, ul dl, ul ol, dl ul, dl ol { margin-top: .2em; margin-left: 0em; margin-right: 0em;} li { text-align:left; margin-left: 2em;} dt, dd { margin-left: 2em; margin-right: 2em; } dt { text-indent: -1em; font-weight: bold; padding-top: .5em; } sup { font-size: .75em; line-height: 0em; } p+p { margin-top: -1em; text-indent: +2em; } h2, h3, h4, h5, h6 { padding-left: 1em; margin-bottom: -.25em } table { margin-left: 10%; margin-right: 10%; margin-top: .5em; } td { padding-left: 1em; padding-right: 1em; } td.rule { border-bottom: #ccc799 groove; } a:link, a:visited { color: #0a0; text-decoration: none; } .btnbox { display: inline-block; color: black; width: 20vw; margin: 6px; padding: 6px; vertical-align: baseline; height: 1em; border-radius: 0.5em; background-color: #0a0; border: 4px outset #0a0; } .navbox { display: inline-block; color: black; width: 90%; margin: 3px; padding: 3px; vertical-align: baseline; height: 1em; border-radius: 0.5em; background-color: #0a0; font-size: 1vw; border: 2px outset #0a0; } .btn { display: inline-block; width: 90%; height: 75%; color: inherit; background-color: #0a0; font-family: frizQuadrata; text-align: center; vertical-align: top; } .btnbox:hover { box-shadow: 0 0 20px rgb(128 256 128), 0 0 80px rgb(128 236 128); color: gold; } .navbox:hover { box-shadow: 0 0 15px rgb(64 256 64), 0 0 60px rgb(128 236 128); color: gold; } a img:hover { box-shadow: 0 0 20px rgb(128 254 128), 0 0 80px rgb(128 236 128); } a:hover {color: gold; } .biopicbox { clear: right; float: right; width: 20vw; margin-bottom: 1em; padding-left: 2em; padding-right: 2em; font-size: 80%; } .biopic { float: right; width: 20vw; } strong { font-style: italic; font-weight: normal; } .fadein { position: relative; display: grid; place-content: center; place-items: center; width: 60vw; height: 33vw; margin: 0 auto; } .fadein img { width: 60vw; left: 0; grid-row: 1; grid-column: 1; } /* duration is (# of pictures) * 12 seconds */ .fadeinimg { opacity: 0; -webkit-animation-name: fade; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 48s; animation-name: fade; animation-iteration-count: infinite; animation-duration: 48s; } /* timing is n*12+4 seconds */ #pic1 { animation-delay: 4s; } #pic2 { animation-delay: 16s; } #pic3 { animation-delay: 28s; } #pic4 { animation-delay: 40s; } /* Values for third position: 3 images: 25% (of 36) 4 images: 19% (of 48) 5 images: 15% (of 60) */ @-webkit-keyframes fade { 0% {opacity: 0;} 2% {opacity: 1;} 19% {opacity: 1;} 21% {opacity: 0;} 100% {opacity: 0;} } @keyframes fade { 0% {opacity: 0;} 2% {opacity: 1;} 19% {opacity: 1;} 21% {opacity: 0;} 100% {opacity: 0;} }