* {
    box-sizing: border-box; 
}
body {
    background-color: #222; 
}
main {
    margin: 8px auto; 
    height: 100%; 
}


/* Carousel Styling */ 
.main-carousel {
	max-width: 800px;
    height: 100%;
	margin: auto;
	overflow: hidden;
}
.carousel-cell {
    width: 100%;
    max-width: 800px; 
    height: 100%; 
    border-radius: 5px;
    margin: auto;
}
.carousel-cell {
	&.is-selected {
			overflow: hidden;
    }}
.container {
    margin: 8px 32px;  
    padding: 16px; 
    border: 0.5px solid #888; 
    border-radius: 8px; 
    background-color: #444;
    box-shadow: 1px 1px 12px #222; 
    /*center vertically*/
    width: 90%; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
}
img {
    width: 100%; 
    margin-bottom: 4px; 
    border-radius: 6px; 
    border: 1px solid #666; 
}
.content-div {
    padding: 24px 28px 16px 28px; 
}
#title-content
{
    text-align: center; 
    margin: 40px;
}
#title-card figure {
    margin: auto; 
    width: 280px; 
}
figure {
    margin: 0; 
    padding: 0; 
}



/* Text */
@font-face {
    font-family: Geist; 
    src: url(type/Geist.ttf);
}
h1, h2, h3, p, span, a, li, figcaption {
    margin: 0; 
} 
h1, h2, h3 { font-family: Geist; color: white; }
p, span, a, li, figcaption { font-family: Helvetica; color: #ddd; }
h1 {
    font-size: 52px; 
    font-weight: 400; 
    margin-bottom: 24px;
}
h2 {
    font-size: 22px;
    font-weight: 400; 
    margin-bottom: 12px; 
}
h3 {
    font-size: 18px; 
    font-weight: 300; 
    margin-bottom: 12px; 
}
p, li { font-size: 14px; }
p {
    margin-bottom: 12px; 
    line-height: 1.6; 
}
ul {
    padding-left: 16px; 
}
li {
    margin-bottom: 8px; 
    list-style-type: "+  ";
    line-height: 1.4; 
}
figcaption {
    padding-left: 8px; 
    font-size: 10px; 
    font-style: italic;
}
a { color: #cd8dcd; }
a:hover { background-color: #3c3139; }