body { background-color: #212121; font-family: 'Courier New', monospace; color: #dcdcdc; } html { scroll-behavior: smooth; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } .feed-container { display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-container { position: relative; text-align: center; } .bg-img { height: 100%; background-image: url("/img/bg.png"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .fade-in-image { animation: fadeIn 3s; -webkit-animation: fadeIn 3s; -moz-animation: fadeIn 3s; -o-animation: fadeIn 3s; -ms-animation: fadeIn 3s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } .headline { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%); } .headline-title { font-size: 4rem; font-weight: bold; } .one-liner { font-size: 2rem; } .postcard { padding: 0.25rem 0; } .postcard-date { font-size: smaller; } .socials { display:inline; font-size: 1.5rem; text-decoration: none; color: #dcdcdc; } .socials:hover { text-decoration: none; } .reveal-text { animation: slideIn 1.2s; animation-delay: 750ms; color: transparent; animation-fill-mode: forwards; -webkit-animation: slideIn 1.2s; -webkit-animation-delay: 750ms; -webkit-animation-fill-mode: forwards; -moz-animation: slideIn 1.2s; -moz-animation-delay: 750ms; -moz-animation-fill-mode: forwards; -o-animation: slideIn 1.2s; -o-animation-delay: 750ms; -o-animation-fill-mode: forwards; -ms-animation: slideIn 1.2s; } @keyframes slideIn { 0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);} 100% {color: #dcdcdc; clip-path: inset(0 0 0 0);} } @-moz-keyframes slideIn { 0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);} 100% {color: #dcdcdc; clip-path: inset(0 0 0 0);} } @-webkit-keyframes slideIn { 0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);} 100% {color: #dcdcdc; clip-path: inset(0 0 0 0);} } @-o-keyframes slideIn { 0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);} 100% {color: #dcdcdc; clip-path: inset(0 0 0 0);} } @-ms-keyframes slideIn { 0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);} 100% {color: #dcdcdc; clip-path: inset(0 0 0 0);} } .section-header { color: #EAA221; font-weight: bold; padding-top: 1em; } .section { display: flex; flex-wrap: wrap; } .title-link { color: #EAA221; } .title-link { text-decoration-color: #EAA221; } a { color: orange; } a:hover { color: #EAA221; } .card-img { width: 450px; } .card { background-color: transparent; border-style: solid; border-width: 3px; padding: 1em; margin: 1em; max-width: 75%; min-width: 250px; } ul.timeline { list-style-type: none; position: relative; padding-top: 1em; } ul.timeline:before { content: ' '; background: #dcdcdc; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400; } ul.timeline > li { margin: 20px 0; padding-left: 20px; } ul.timeline > li:before { content: ' '; background: #212121; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #0fc; left: 20px; width: 20px; height: 20px; z-index: 400; } .launchpad { border: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); /* Stack things vertically */ flex-direction: column; align-items: flex-start; justify-content: center; display: inline-flex; vertical-align: middle; } .launchpad > * { margin: 15px 0; width: 100%; } .launchpad-button > pre { margin: 0.3em; } /* Overriding some bootstrap shittery here */ .launchpad-button { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; text-align: left; } .launchpad-button-text { font-family: 'Courier New', monospace; margin: 0.3em; }