@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,360;0,600;1,360&family=Lato:wght@300;400;700&family=Overpass+Mono:wght@400;700&display=swap');
body { background-color: white; font-family: Fraunces; font-weight: 360; font-size: 14px; margin: 8em 0 0 0; }
header { padding: 1em 4vw 0 7.5vw; min-height: 4em; border-bottom: solid 1px #ddd; width: auto; margin: 0; text-transform: uppercase; box-shadow: 0 0 10px #ccc; background: url('../images/propensive.com/logotext.png') no-repeat top 1.25em left 3.84em #eee; background-size: 12em; position: fixed; top: 0; right: 0; left: 0; z-index: 2; }
header ul { background: url('../images/propensive.com/logo.png') no-repeat top 8px right transparent; background-size: 2.5em; padding: 1em 3em 1em 0; margin: 0 -0.75em 0 0; text-align: right; }
header ul li { display: inline-block; margin-right: 2em; }
header, footer, nav { font-family: Lato; font-weight: 700; }
header a, header a:link, header a:visited { font-weight: 700; color: gray; text-decoration: none; transition: color ease-in-out 0.4s; }
header a:hover, header a:active { color: black; }
#bannerimg2 { display: none; }
h1 { font-family: Lato; font-weight: 300; font-size: 3.2em; margin-bottom: 0.6em; }
h2 { font-weight: 300; font-size: 1.9em; margin: 1.3em 0;}
h3 { font-weight: 400; font-size: 1.35em; margin: 1.4em 0; }
main h3 { font-weight: 600; }
p { font-size: 1.25em; line-height: 1.9em; text-align: justify; }
code { font-family: 'Overpass Mono'; }
pre { background-color: white; color: white; margin: 0 -1em 0 -1em; padding: 0; font-size: 1.1em; }
main { margin: 3em 4em 3em 30vw; padding: 0; min-height: calc(100vh - 15em - 2px); }
#logo { float: right; width: 200px; height: 200px; margin: 1.2em 0 1.2em 2.4em; }
.projectLogo { float: right; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 400px; position: relative; shape-outside: circle(); padding: 0 0 20px 75px; padding-bottom: 20px; }
nav { background-color: #f9f9f9; position: fixed; width: 24vw; border-top: solid 2px silver; border-bottom: solid 2px silver; margin: 0 2.5em; padding: 1em 0; }
nav ul { margin: 0; list-style: none; padding: 0 1em; }
nav ul li { line-height: 1.5em; }
nav ul a, nav ul a:link, nav ul a:visited { text-decoration: none; color: gray; transition: color 0.4s; }
nav ul a:hover, nav ul a:active { color: black; }

nav aside { position: absolute; margin-top: 2em; }
nav aside p { margin: 0; font-weight: 500; }
nav aside p code { font-weight: 400; font-size: 90%; }
nav aside label { margin-top: 2em; }
nav aside a div { display: inline-block; margin: 1em 1em 1em 0; width: 64px; height: 64px; }
.github { height: 1.3em; display: inline-block; margin: 0 0.5em -0.2em -0.1em; }

li p { margin: 0 0 0.5em 0; line-height: inherit; text-align: left; }
footer { background-color: #f9f9f9; border-top: solid 1px #ddd; width: auto; height: 1em; margin: 0; padding: 1.5em 5vw; font-weight: 700; color: silver; overflow: hidden; }
main.full { margin: 3em 4em 0.9em; }
main.full img { width: 100%; margin: 0 0 3.2em 0; }
main.full section { column-count: 3; column-gap: 3.2em; }
main.full section div h1, main.full section div h2 { margin: 0.2em 0; }
main.full section div { overflow: hidden; padding: 0; height: calc((100vw - 8em - 6.4em)/3); margin-bottom: 3.2em; font-size: 1vw; -webkit-column-break-inside: avoid; }
main.full section div.enclosed { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background-color: #f9f9f9; padding: 1em 2em; margin-bottom: 3.2em; font-size: 1vw; }
.enclosed h2 { font-family: Lato; font-size: 2.4em; }
.enclosed p { text-align: left; }
.banner { position: absolute; margin: 4.5vw; background: transparent; border: none; }
.banner h1 { font-size: 4.5vw; color: white; margin: 0; line-height: 0.75em; }
.banner h1 small { font-size: 0.5em; }
.icon { width: 1em; opacity: 0.75; }
.icon:hover { opacity: 1; } 
label, p.important { display: block; font-family: Lato; font-weight: 700; text-transform: uppercase; margin: 0.2em 0; }
input { margin-bottom: 1.5em; border: solid 0.1em #eee; font-size: 1.1em; font-size: 1.2em; width: 16em; padding: 0.5em; font-family: Lato; font-weight: 500; }
input:focus { border: solid 0.1em black; }
input[type=submit] { margin-top: 1em; font-weight: 700; text-transform: uppercase; border: none; background-color: #4a2; width: 8em; border-bottom: solid 0.2em #251; color: white; cursor: pointer; opacity: 0.75; }
input[type=submit]:hover { opacity: 1; }
table { font-family: Lato; border-collapse: collapse; border-bottom: solid 0.1em #666; }
table td, table th { padding: 0.3em 1em; text-align: left; }
table th { background-color: #666; color: white; }
table tr:nth-child(2n) td { background-color: #eee; }
.required, .important { color: #c40; }
::selection { background: rgba(255, 150, 0, 0.3); }
::-moz-selection { background: rgba(255, 150, 0, 0.3); }

fieldset { border: none; margin-bottom: 2em; padding: 0; -moz-column-count: 3; -webkit-column-count: 3; }
fieldset label, input[type=checkbox] ~ label { display: inline-block; padding: 0.6em 0.3em; text-transform: none; }
input[type=radio], input[type=checkbox] { position: absolute; z-index: 1; display: inline-block; opacity: 0; cursor: pointer; width: 1.3em; margin: 0.4em 0 0 0; height: 1.3em; }
input[type=radio] ~ .check, input[type=checkbox] ~ .check { display: inline-block; vertical-align: -0.7em; width: 1em; height: 1em; border: solid 0.1em #ccc; border-radius: 1em; background-color: white; margin: 0.5em; }
input[type=radio]:hover ~ .check, input[type=radio]:focus ~ .check, input[type=checkbox]:hover ~ .check, input[type=checkbox]:focus ~ .check { border: solid 0.1em black; border-radius: 1em; }
input[type=radio] ~ .check div, input[type=checkbox] ~ .check div { width: 1em; height: 1em; margin: 0; background-color: black; border-radius: 1em; opacity: 0; }
input[type=radio]:checked ~ .check div, input[type=checkbox]:checked ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 1; }

input[type=checkbox] ~ .check { border-radius: 0; }
input[type=checkbox]:hover ~ .check, input[type=checkbox]:focus ~ .check { border: solid 0.1em black; border-radius: 0; }
input[type=checkbox] ~ .check div { border-radius: 0; }

#magnoliabg { color: white; background: url('../images/propensive.com/magnoliabg.jpg'); background-size: cover; }
#furybg { background: url('../images/propensive.com/furybg.jpg'); background-size: cover; border: solid 1px silver; }
#scalaworldbg { background: url('../images/propensive.com/scalaworldbg.jpg'); background-size: cover; }
#scalaonebg { background: url('../images/propensive.com/scalaonebg.jpg'); background-size: cover; }
#scalazonebg { background: url('../images/propensive.com/scalazone.webp'); background-size: cover; }
#africabg { background: url('../images/propensive.com/africabg.jpg'); background-size: cover; }
#probablybg { background: url('../images/propensive.com/probablybg.jpg'); background-size: cover; }
#kaleidoscopebg { background: url('../images/propensive.com/kaleidoscopebg.png'); background-size: cover; border: solid 1px silver; }

#bubbles { margin: auto; column-count: 1; width: 600px; }
#bubbles div { margin-bottom: 0; }
#bubbles>div { width: 300px; height: 350px; display: inline-block; vertical-align: top; overflow: visible; }
#bubbles>div>a>div {height: 300px; border-radius: 150px; overflow: visible;  opacity: 0.75; transition: opacity ease-in-out 0.25s; }
#bubbles>div>a>div:hover { opacity: 1; cursor: pointer; }
#bubbles>div.right>a>div {margin-top: 175px;}
#bubbles>div>a>div>div { height: 300px; width: 300px; line-height: 300px; }
#bubbles>div.left>a>div>div { margin-left: -325px; width: 300px; vertical-align: middle; text-align: right; }
#bubbles>div.right>a>div>div { margin-left: 325px; }
#bubbles>div>a>div>div>div { display: inline-block; vertical-align: middle;line-height: normal; }
#bubbles h3 { display: inline-block; font-family: Lato; font-weight: 300; font-size: 2.4em; margin-top: 125px; margin-bottom: 10px; }
#bubbles>div.left>a>div p { text-align: right; margin: 0; }
#bubbles>div.right>a>div p {text-align: left;margin: 0;}

#projects { column-count: 1; text-align: center; }
#projects p { width: 720px; text-align: center; margin: auto; }
#projects form { width: 320px; margin: 2em auto 2em !important; }
#projects form div { height: auto; }

.path { margin: 0; padding: 0; }
.path li { display: inline-block; font-family: Lato; font-weight: 700; }
.path li a:link, .path li a:visited { color: gray; }
.path li a:hover, .path li a:active { color: black; }
.path li::before { content: "»"; margin: 0 1em; }

main ul { list-style: none; }
main ul li p::before { content: "»"; color: #0065ff; position: absolute; margin: 0 0 0 -2em; }

a:link, a:visited { color: #007579; text-decoration: none; }
a:hover, a:active { color: #00327f; text-decoration: none; }
a div { transition: opacity ease-in-out 0.4s; color: black; opacity: 0.7; }
a:hover div { opacity: 1; }

@media screen and (min-width: 1536px) {
 header { background: url('../images/propensive.com/logotext.png') no-repeat top 1.25em left calc((100vw - 1400px)/2) #eee; background-size: 12em; }
 header ul { width: 1310px; margin: 0 auto; }
 .banner { margin: 70px; }
 .banner h1 { font-size: 70px; }
 main { width: 980px; margin: 3em auto; padding-left: 420px; }
 main.full { width: 1400px; margin: 3em auto; padding-left: 0; }
 nav { width: 360px; margin-left: calc((100vw - 1400px)/2 - 10px); }
 main.full section div { height: calc((1400px - 6.4em)/3); font-size: inherit; }
 main.full section div.enclosed { font-size: inherit; }
}

@media screen and (max-width: 1200px) {
 main.full section { column-count: 2; column-gap: 2.6em; }
 fieldset { column-count: 2; }
 main.full section div { height: calc((100vw - 6em - 5.2em)/2); margin-bottom: 2.6em; font-size: 1.5vw; }
 main.full section div.enclosed { margin-bottom: 2.6em; font-size: 1.5vw; }
  img[alt=Audience] { width: 40vw; float: left; margin: 0 2em 1em 0; }
}

@media screen and (max-width: 1000px) {
 nav { margin: 3em; position: relative; width: auto; }
 main { margin: 3em; }
 header { background: #eee; }
 .banner h1 { font-size: 8vw; color: black; }
 #bannerimg { display: none; }
 #bannerimg2 { display: block; width: 100vw; margin: -3em -4em 2.6em -4em; }
 main.full section { column-count: 1; }
 fieldset { column-count: 1; }
 main.full section div { height: auto; font-size: 1.4em !important; }
 main.full section div.enclosed { height: calc(100vw - 10em); font-size: 1.4em !important; }
}

.hljs { display: block; overflow-x: auto; padding: 1em; background: #002b36; color: #839496; }
.hljs-comment, .hljs-quote { color: #586e75; }
.hljs-keyword, .hljs-selector-tag, .hljs-addition { color: #859900; }
.hljs-number, .hljs-string, .hljs-meta .hljs-meta-string, .hljs-literal, .hljs-doctag, .hljs-regexp { color: #2aa198; }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #268bd2; }
.hljs-attribute, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-class .hljs-title, .hljs-type { color: #b58900; }
.hljs-symbol, .hljs-bullet, .hljs-subst, .hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-link { color: #cb4b16; }
.hljs-built_in, .hljs-deletion { color: #dc322f; }
.hljs-formula { background: #073642; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

img[alt=Martin] { width: 25vw; max-width: 500px; float: right; }
img[alt=Tigger] { width: 30vw; max-width: 500px; float: right; }
img[alt=Paul] { width: 30vw; max-width: 500px; float: left; margin: 0 2em 1em 0; }
img[alt=Audience] { width: 30vw; max-width: 500px; float: left; margin: 0 2em 1em 0; }
img[alt=Windermere] { width: 100%; }
img[alt='Stone Circle'] { width: 100%; }
img[alt=Grasmere] { width: 100%; margin-bottom: 1em; }
img[alt='Mountain Hall'] { width: 100%; margin-bottom: 1em; }
img[alt=Food] { width: 30vw; max-width: 500px; float: right; margin-left: 2em; }
img[alt='Magnolia flowers'] { width: 100%; }
img[alt='Lighthouse in a storm'] { width: 100%; }