/*! web-ignition v2.5.0 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
/*
Letterbox Layout -- Edge-to-edge semi-opaque bar over cover background image
Usage:
HTML ():
main
section
figure.video-container
cite
*/
html {
height: auto;
background: silver no-repeat center center fixed;
background-size: cover;
}
body {
display: flex;
max-width: none;
align-items: center;
color: dimgray;
background-color: transparent;
padding: 0px;
margin: 0px;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
text-align: center;
padding: 60px 0px;
}
main >section {
background-color: rgba(255, 255, 255, 0.75);
}
main >section:first-child:last-of-type {
margin: 0px;
}
main >section:first-child {
padding: 50px 10px;
margin-bottom: 60px;
}
main >section:first-child h1 {
font-size: 2.0rem;
margin-bottom: 6px;
}
main >section:first-child h2 {
font-size: 1.3rem;
text-transform: lowercase;
margin-bottom: 30px;
}
main >section:first-child >div {
max-width: 600px;
padding: 0px 0px;
margin: 10px auto;
}
main >section:first-child #social-buttons {
margin: 30px auto 5px auto;
}
main >section .display-box {
display: inline-block;
font-size: 0.9rem;
border: 1px solid darkgray;
border-radius: 0.1rem;
padding: 15px 35px 20px 35px;
}
main >section+section {
max-width: 100%;
width: 800px;
padding: 40px;
margin: 0px auto 30px auto;
}
main >section >div >p >a {
white-space: normal;
}
main >section >figure {
margin-bottom: 30px;
}
main >section >figure.video-container {
margin-bottom: 0px;
}
main >cite {
font-size: 0.9rem;
opacity: 0.6;
}
/* Mobile devices */
@media (max-width: 667px) { /* selects iPhone SE (3rd gen) landscape and anything narrower */
main >section+section { padding: 10px; }
}
/******************************************************************************/
/* Letterbox Layout -- customize colors */
html { background-image: url(#); }