/* CSS for portfolio.panic.cc
 * Copyright 2022, Robert Wolff. All rights reserved.

charcoal #36454d
champagne #f4e9cd
raisin #171d2d
cinnabar #db4c40
blue green #88d0c4?

gradient created with: https://www.joshwcomeau.com/gradient-generator/
*/

/* Base */
body { font-family: Georgia, serif; background-color: #ffffff; color: #171d2d; counter-reset: sidenote-counter; }
#top { margin-top: 0; margin-bottom: 0; }
header { margin: 1em 0 0 0; }
footer { background-color: #171d2d; color: #fff; padding: 2em 0 1em 0; }
footer a:link { color: #fff; }

/* Links */
a, a:link, a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }

/* Nav */
nav { background-color: #171d2d; color: #fff; padding-left: 0 !important; }
nav a,
nav a:link,
nav a:visited,
nav a:hover { color: #fff; text-decoration: none; }
nav a:hover { text-decoration: underline; }

nav .active { background-color: #db4c40; }
nav .active a,
nav .active a:link,
nav .active a:visited { color: ##fff; }
nav .active a:hover { text-decoration: none; }

nav ul { margin-top: 0; padding: 0; }
nav .nav-item { padding: 0.7em !important; }

/* Headers and footers */
h1, h2, h3, h4, h5, h6 { font-family: Raleway, sans-serif; margin: 0; padding: 0; font-weight: 600; line-height: 1; }
h1 { color: #080808; font-size: 4em; padding-left: 84px !important; margin-top: 1.5em; margin-bottom: 0.1em;
    background-image: url(../i/portfolio-3c.png); 
    background-position: 15px center; 
    background-size: 60px; 
    background-repeat: no-repeat; }
h1 a, 
h1 a:link, 
h1 a:visited, 
h1 a:hover, 
h1 a:active { color: #fff; text-decoration: none; }
h1 a:hover { text-decoration: underline; }
h1 .parent { overflow: hidden; opacity: 0.6; filter: blur(5px); text-decoration: none; color: #f4e9cd; }
h2 { font-size: 2.667em; margin-top: 1.5em; }
h3 { font-size: 1.5em; padding: 1em 0; color: #666; font-weight: normal; }
h4 { font-size: 1.5em; margin-top: 1em; margin-bottom: 1em; }

/* Contrast Palette */
.title { background-image: linear-gradient( 3.2rad, hsl(224deg 32% 13%) 38%, hsl(209deg 34% 23%) 77%, hsl(200deg 35% 33%) 88%, hsl(192deg 32% 43%) 93%, hsl(183deg 31% 54%) 95%, hsl(170deg 43% 67%) 97%, hsl(154deg 40% 73%) 98%, hsl(127deg 33% 79%) 98%, hsl(91deg 35% 81%) 99%, hsl(63deg 38% 83%) 99%, hsl(43deg 64% 88%) 100% ); }
.title > * { color: #eee; }
.title h2 { padding-top: 0.25em; padding-bottom: 2em; font-size: 1.5em; margin-top: 0.5em; }
.subtitle { margin-top: 2em; background-color: #db4c40; }
.subtitle > * { color: #fff; }

.gallery { background-image: linear-gradient( 6.2rad, hsl(224deg 32% 13%) 38%, hsl(209deg 34% 23%) 77%, hsl(200deg 35% 33%) 88%, hsl(192deg 32% 43%) 93%, hsl(183deg 31% 54%) 95%, hsl(170deg 43% 67%) 97%, hsl(154deg 40% 73%) 98%, hsl(127deg 33% 79%) 98%, hsl(91deg 35% 81%) 99%, hsl(63deg 38% 83%) 99%, hsl(43deg 64% 88%) 100% ); }
.gallery .figure-caption { background-color: #fff; padding: 3px 6px; }
.gallery .figure-img { margin-bottom: 0; }

/* Typography */  
ul { padding: 0 0 0.5em 0; }
ul ul { margin-top: 0; margin-bottom: 1em; margin-left: 1em; }
.small-print { font-size: 0.85em; }
.small-caps { font-variant: small-caps; }
.connect { font-size: 1.5em; list-style-type: none; list-style: url(../i/b5.png); }
.connect ul { list-style: circle; margin-bottom: 0; padding-bottom: 0; }
.connect li { vertical-align: top; } /* fixes alignment of list bullet, above */
.list-style-none li { list-style-type: none; }
.life-rule { font-family: Georgia, serif; letter-spacing: 0.1em; }
.aspect-ratio { letter-spacing: 0.333em; }

/* Sections */
section p:first-child { margin-top: 0; }
main img { max-width: 100%; }
.text { margin-top: 3em; margin-bottom: 1em; }
header + .text { margin-top: 0.5em; }
.in-page-nav { font-size: 1.2em; }

/* Content */
hr { display: block; float: left; clear: both; height: 1px; width: 55%; border: 0; border-top: 1px solid #ccc; margin: 1em 0 0 0q; padding: 0; }
figure { margin-top: 2.333em; }
figcaption { margin-bottom: 1em; }
h1 + p { padding-top: 0; padding-bottom: 0; }
p { font-size: 1.4rem; padding-top: 0.5rem; padding-bottom: 0.5rem !important; }
p + p { padding-top: 0; }
.footnote { font-size: 0.85em; font-style: italic; }
ol, ul { font-size: 1.4rem; line-height: 2rem; margin-top: 1em; }
code { font-family: "Lucida Sans Typewriter", "Lucida Console", Consolas, Monaco, "Bitstream Vera Sans Mono", monospace; background-color: #eee; border: 1px dashed #aaa; padding: 1pt 3pt; }
.framed { border: 6px solid #fff; }
.form-control { display: inline; }
iframe { border: 0; }
.ratio { width: calc(100% + 30px); height: 600px; margin-left: -15px; }