html, body { height: 100%; } body, section, h1, h2, h3, h4, h5, h6, p, ol, ul, li { margin: 0; padding: 0; } h1 { font-size: 400%; } h2 { font-size: 250%; font-weight: normal; } h3 { font-size: 200%; font-weight: normal; } h1, h2, h3 { margin-bottom: 1rem; } ul, ol { margin-left: 2em; font-size: 200%; } li { margin: 1rem 0; } ul ul, ul ol, ol ul, ol ol { font-size: 100%; } body { background: #000; font-family: "Eras Medium ITC", sans-serif; overflow: hidden; color: #fff; font-size: 16pt; } section { width: 90%; opacity: 0; transition: all .7s ease-in-out; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 5%; background: #000; display: flex; flex-direction: column; justify-content: space-around; text-shadow: 0px 0px 10px #000; visibility: hidden; } section.current { transform: translate(0); opacity: 1; visibility: visible; } a { color: inherit; cursor: pointer; text-decoration: none; border-bottom: 2px dashed darkblue; line-height: .8em; display: inline-block; transition: all .5s; border-radius: .2em; padding: 0 .1em; } a:hover { border-color: #fff; background: darkblue; } .companyLogo { margin-top: 3rem; } section { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 70%), url("Images/logo.svg") no-repeat center bottom; background-size: contain; } li { transform: translateX(-500px); opacity: 0; transition: all .5s; } li.shown { transform: translate(0); opacity: 1; } sup { display: none; } .notes sup { display: block; background: #fff; padding: .2em; color: #000; } .notes { font-size: 12pt; } .clock { position: absolute; bottom: 0px; left: 0px; right: 0px; font-size: 2em; background: #333; height: 5px; width: 0px; transition: width 1s linear; } .counter { position: absolute; right: 5px; bottom: 5px; font-size: 1.5em; } figure { margin: 0; border-radius: .5em; padding: 1em; background: rgba(255, 255, 255, 0.3); text-align: center; height: 70%; } figure img { height: 95%; background: #fff; padding: .5em; border-radius: .5em; }