html, body { line-height: 1.5; color: #888888; background-color: #060606; margin: 0; word-break: break-word; } .grid { display: grid; align-content: center; grid-template-areas: "header" "sidebar" "content" "footer"; } .header { grid-area: header; text-align: center; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; text-align: center; } @media only screen and (max-width: 999px) { .grid { grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "content" "footer"; } } @media only screen and (min-width: 1000px) { .grid { grid-gap: 1rem; grid-template-columns: 25% auto; grid-template-areas: "header header" "sidebar content" "footer footer"; } } @media only screen and (min-width: 1500px) { .grid { max-width: 70%; margin: 0 auto; } } a { color: #91cf91; } a:hover { color: #5cb85c; } a:visited { color: #449d44; } .license img { max-width: 10em; display: inline; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; } h1 { letter-spacing: 0.1em; font-size: 7vw; } h2 { font-size: 1.5em; margin: 5px 8px 8px 8px; } .heading { font-size: 2em; margin: 6px 0px 12px 0px; } h3 { font-size: 1.5em; } .intro-lead { font-family: 'Montserrat', sans-serif; font-size: 1em; } code { word-break: break-all; word-wrap: break-word; } dd { padding-left: 24px; } dt { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } img { display: block; margin-left: auto; margin-right: auto; width: 100%; } .sample-image { margin-bottom: 18px; } div { font-family: 'Merriweather', serif; color: white; } .sidebar a { text-decoration: none; } .recipe, .contents-list { color: white; background-color: #383838; padding: 14px; font-family: "Montserrat"; font-size: 1.2em; font-weight: bold; letter-spacing: 0.1em; border: 1px solid black; width: 100%; cursor: pointer; position: relative; padding-left: 2.8em; transition: all .5s ease-out; } .recipe:hover, .contents-list:hover { background-color: #449d44; } .recipe:before { content: "💫"; } .contents-list:before { content: "📼"; } .recipe:before, .contents-list:before { position: absolute; left: 1em; padding-right: 1em; } .recipe:hover:before, .recipe:focus:before, .recipe:active:before { transform: scale(1.5) translateX(0.1em); transition: 0.5s; } .contents-list:hover:before, .contents-list:focus:before, .contents-list:active:before { transform: scale(1.8) translateX(0.3em); transition: 0.5s; } .codeblock { font-family: monospace padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } .beware { font-size: 150%; } .footnote { font-size: 90%; }