html { background-color: #F0F8FF; }
body {
font-family: "Open Sans", "Segoe UI", "Seravek", sans-serif;
background-color: white;
min-height: 100vh;
font-size: 130%;
position: relative;
}
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #1c1c1e;
}
}
@media screen and (min-width: 800px) {
body { padding: 7vmin; }
}
h1, h2, h3, h4, h5, h6 { font-family: "Noto Serif", "Athelas", "Palatino", serif; }
aside { -webkit-text-size-adjust: auto; overflow: hidden; }
pre { overflow: auto; }
.headline { font-size: 2em; }
.index li {
display: flex;
line-height:1.8;
}
time {
min-width: 4em;
}
article > p:first-of-type::first-letter { -webkit-initial-letter: 2; initial-letter: 2; }
/* Don't let images overflow */
img { max-width: 100%; height: auto; }
article {
max-width: 50em;
margin-top: 1em;
position: relative;
margin: 0 auto 0;
padding: 0 1.5em 3%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
a { text-decoration: none !important; }
article video { width: 100% }
footer { width: 50%; align-items: center; display: flex; justify-content: space-around; font-size: 0.8em; margin-left: auto; margin-right: auto; }
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
}
#checkout-button {
border: 2px solid #6f4e37;
font-size: 1.3em;
line-height: 1.375;
padding: 2rem;
font-weight: 700;
color: #6f4e37;
cursor: pointer;
}