/* ***PALETTE*** medium blue: #365693, light blue: #9AAAC8, dark blue: #14202A, red: #EA2737 cream: #FCFCE8, light gray: #ECEEF2 */ /* fonts */ /* rubik-regular - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; src: local(''), url('fonts/rubik-v14-latin-regular.woff2') format('woff2'), url('fonts/rubik-v14-latin-regular.woff') format('woff'); } /* rubik-700 - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; src: local(''), url('fonts/rubik-v14-latin-700.woff2') format('woff2'), url('fonts/rubik-v14-latin-700.woff') format('woff'); } /* rubik-500 - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; src: local(''), url('fonts/rubik-v19-latin-500.woff') format('woff'); } /* rubik-700italic - latin */ @font-face { font-family: 'Rubik'; font-style: italic; font-weight: 700; src: local(''), url('fonts/rubik-v14-latin-700italic.woff2') format('woff2'), url('fonts/rubik-v14-latin-700italic.woff') format('woff');} /* main css */ html {background: #14202A} body { margin: 0; background-color: #9AAAC8; background: linear-gradient(to bottom, #9AAAC8, #365693); font-family: 'Rubik', sans-serif} ul,h1,h2,h3,h4,h5 { text-align: center; margin: 0; padding: .5em; font-weight: 500;} a { text-decoration: none; font-weight: 500; color: #365693} a:hover {text-decoration: underline} ul li {list-style-type: none} p { font-size: 1em; margin: 0; line-height: 1.6; margin-bottom: 1em} h1 {font-size: 3.2em; font-weight: 700} h2 {font-size: 1.5em; text-transform: uppercase} h3 {font-size: 1.8em} h4 {font-size: 1.5em} h5 {font-size: 1.1em} #book-title {font-weight: 700} strong {font-weight: 500} #all-books { background: #ECEEF2; display: flex; min-height: 100vh; flex-direction: column; padding-top: 10vh;} #the-books {background: #ECEEF2} #the-books-archive h3 {padding-top: 1em} #the-books h3 {padding-top: 5em} #book-wrapper { padding: 1em 0 3em 0; display: flex; width: 80%; max-width: 960px; margin: 0 auto; justify-content: center; flex-direction: row; flex-wrap: no-wrap} .big-book { width: 16em; padding: 1.5em; display: block; border-right: 1px dashed #9AAAC8} .big-book img { width: 13em;} .book { width: 12em; padding: 1em; display: block; border-right: 1px dashed #9AAAC8} .book img { display: block; width: 10em; height: 10em; border-radius: 50%; margin: 0 auto; margin-bottom: 1em; border: 1px solid #A3AAAE} .book:last-child, .big-book:last-child { border-right: none} .book-info {padding: 0 1em 0 1em} .book p, .big-book p{ display: block; margin: 0 auto; width: 100%; font-size: .9em; font-style: italic; line-height: 1.3; text-align: center; margin-bottom: .5em} .book-info a { font-style: normal; font-weight: 700} footer { margin-bottom: -1em; padding-bottom: 1.5em; background-color: #14202A; color: #ECEEF2} #footer-wrapper { padding-top: 1.5em; width: 80%; margin: 0 auto; display: flex; justify-content: space-between} footer li { padding-right: 1em; display: inline} footer a { font-weight: 500; color: #9AAAC8} #page-wrapper { background-color: #14202A; width: 75%; max-width: 1024px; margin: 0 auto; margin-top: -3em; margin-bottom: -4em; padding: 2em 0; position: relative; z-index: 1} /* book page styles start here */ #whatif-10x-book-wrapper, #whatif2-book-wrapper, #howto-book-wrapper, #thingex-book-wrapper, #whatif-book-wrapper { padding: 3em 0 6em 0; width: 65%; max-width: 960px; margin: 0 auto; color: #ECEEF2} #whatif-10x-book-wrapper { padding: 3em 0 6em 0; width: 65%; max-width: 960px; margin: 0 auto; color: #ECEEF2; display: block} #whatif-book-wrapper {display: flex;} #whatif2-header-wrapper {background: #14202A} #whatif-header-wrapper {background: #14202A} #howto-header-wrapper {background: #ECEEF2} #thingex-header-wrapper {background: #365693} #books-header-wrapper {background: #9AAAC8} #whatif2-header-wrapper h1, #whatif-header-wrapper h1, #howto-header-wrapper h1, #thingex-header-wrapper h1, #books-header-wrapper h1 { font-size: 2em; display: block; margin: 0 auto; text-align: center} #whatif2-header-wrapper h1 { background: #EA2737; color: #FCFCE8} #whatif-header-wrapper h1 { background: #FCFCE8; color: #EA2737} #howto-header-wrapper h1 { background: #14202A; color: #03b0a5} #thingex-header-wrapper h1 { background: #ECEEF2; color: #EA2737} #whatif2-header-wrapper p, #whatif2-header-wrapper li {color: #ECEEF2} #howto-header-wrapper p, #howto-header-wrapper li {color: #14202A} #howto-header-wrapper h5 { padding-left: 0; text-align: left; font-size: 1em; color: #14202A} #howto-header-wrapper ul {border-bottom: 1px dashed #14202A} #thingex-header-wrapper a {color: #FCFCE8; font-weight: 700;} #whatif2-book-wrapper img, #howto-book-wrapper img, #whatif-book-wrapper img, #thingex-book-wrapper img { max-width: 100%; height: auto; display: block; margin: 0 auto; width: 15em; margin-bottom: 2em} #whatif-10x-book-wrapper img { width: 12em; padding-right: 2em; float: left;} #whatif-book-wrapper img { width: 12em; padding-right: 2em; align-self: start;} #burst { width: 12em; display: block; margin: 0 auto; padding: 3em 0 1em 0;} #spacer {text-align: center;} #spacer img {width: 1.5em; padding: 0 .3em;} #thingex-book-wrapper img {border: 1px solid #ECEEF2} #whatif2-book-wrapper a {color: #9AAAC8} #whatif-book-wrapper a, #whatif-10x-book-wrapper a {color: #9AAAC8} #howto-book-wrapper a {color: #365693} #whatif2-book-wrapper ul, #howto-book-wrapper ul, #whatif-book-wrapper ul, #thingex-book-wrapper ul{ text-align: left; padding: .5em 0 1.5em 1em} #howto-book-wrapper li, #whatif-book-wrapper li, #thingex-book-wrapper li{ padding: .1em 0; list-style-type: disc} #pub-wrapper { border: 1px solid #9AAAC8; background-color: #ECEEF2; width: 70%; max-width: 1024px; margin: 0 auto; margin-top: -4em; margin-bottom: -4em; padding: 2em 0; position: relative; z-index: 1} #pub-wrapper-10x { border: 1px solid #9AAAC8; background-color: #ECEEF2; width: 70%; max-width: 1024px; margin: 0 auto; margin-top: -4em; margin-bottom: 4em; padding: 2em 0;} #pub-wrapper h3 {padding-bottom: 1em} .editions { display: block; margin: 0 auto; width: 85%} .list-10x {display: flex; flex-wrap: wrap;} .list-10x a {color: #14202A} .button-10x { padding: .6em; margin: .5em; background: #9AAAC8;} .ind-edition {margin: 0 0 1em 0} .ind-edition h4 {font-size: 1.1em} .ind-edition h4, .ind-edition h5, .ind-edition p { text-align: left; padding: .2em} .ind-edition h4 { font-weight: 400; color: #365693; text-transform: uppercase; font-size: 1em} .ind-edition p { margin-left: 1em; font-size: 1em; line-height: 1.3; margin-bottom: 0} .whatif-map, .thingexplain-map { margin: 4em 0 2em 0; width: 100%; border-radius: 15em; border: 1px dotted #ccc} #howto-map {margin-top: 2em} #retailers{ color: #FCFCE8; margin: 0 auto; text-align: center; padding-top: 2em;} #retailers h3 {font-size: 1.5em;} #retailers h4 {font-size: 1em;} #retailers h5 { font-size: .9em; text-transform: uppercase;} .retailer-buttons, .anchor-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 70%;} .retailer-buttons li, .anchor-buttons li{ text-align: center; border-radius: 10px; cursor: pointer; padding: .5em; margin: .5em; background: #FCFCE8;} #tour { color: #FCFCE8; margin: 0 auto; text-align: center; padding-top: 2em;} #tour a { border-radius: 10px; cursor: pointer; padding: .5em; margin: 1em; background: #EA2737; color: #ECEEF3; font-size: 1.1em; font-weight: 500; } .retailer-buttons li a, .retailer-buttons li a:visited { font-weight: 500; color: #EA2737;} /* media queries */ @media (max-width: 768px) { h3 {font-size: 1.5em} #intro-text p {font-size: .8em; padding: 1em} #intro-text {margin-bottom: 0} #logo-block-wrapper {padding: 1em 0} #whatif-block, #howto-block {padding: 0 1em} #whatif-title, #howto-title {font-size: 2em} .amp {font-size: 2em} #whatif-logo img, #howto-logo img {width: 100px; height: 100px} #news-wrapper {padding: 1em 0 4em 0} #news {width: 88%} #news p {font-size: .9em} .prev, .next {font-size: 1em; width: 35px; height: 35px} #submit {height: 40px} #title {font-size: 1em; line-height: 1.2} #entry-wrapper {width: 90%} #entry {width: 90%; padding: 1.5em 0 3em 0} .whatif-question, .howto-question {margin: 0 0 .5em 0; font-size: 1.2em} .refbody {position: relative; left: 0; top: 0} #book-wrapper {padding-bottom: 1em; flex-wrap: wrap} #the-books h3 {padding-top: 4em} .book {border: none} .big-book {border: none; text-align: center} #the-archive {padding: 1em 0} #archive-wrapper {width: 95%} .arch img, .arch p {width: 88px; height: 88px} .arch p {font-size: .7em; line-height: 88px} #footer-wrapper {width: 90%; font-size: .8em} #footer li {text-align: left; display: block} #page-wrapper {width: 90%; padding: 1em 0} .archive-image {height: 90px; width: 90px} .archive-entry {margin: .8em auto} .archive-title {font-size: 1em} .archive-date {font-size: .7em} #pub-wrapper {width: 90%} #pub-wrapper-10x {width: 90%} #howto-book-wrapper, #whatif-book-wrapper, #whatif-10x-book-wrapper, #thingex-book-wrapper {width: 80%} #whatif-10x-book-wrapper img {float:none; display: block; margin: 0 auto; padding-right: 0; padding-bottom: 1em;} #whatif-book-wrapper {display: block} #whatif-book-wrapper img {padding-bottom: 1em;} #footer-wrapper a {display: block; text-align: left;} } /* @media (prefers-color-scheme: dark) { #entry img {background: #ECEEF2; opacity: 85%; transition: opacity .5s ease-in-out; margin: 2em auto;} #entry-wrapper {border: 1px solid #9AAAC8; color: #ECEEF2; background-color: #14202A} #title a {color: #ECEEF2} #entry a {color: #9AAAC8} .refnum {color: #9AAAC8} .next, .prev, #submit {background: #9AAAC8; color: #14202A} .next:hover, .prev:hover, #submit:hover {background: #ECEEF2; color: #14202A} .whatif-question, .howto-question {color: #9AAAC8} } */ @media print { body {background: none; font-size: 13px} #intro-text{display: none} #header-wrapper, footer {background: #fff} #whatif-title, #howto-title {color: #000} #whatif-logo img, #howto-logo img {display: none;} .amp {padding: 0} #news-wrapper, #the-archive, #the-books {display: none} .prev, .next, #submit {display: none} #title a, .refnum {color: #000; margin: 0} #entry-wrapper {background: #fff; margin: 0 auto; border: none; width: auto;} #entry, #entry a, .whatif-question, .howto-question {color: #000} #entry {width: auto;} #entry p {break-inside: avoid; orphans: 2; widows: 2} .illustration {background: none} #footer-wrapper {margin: 0; padding: 0} footer ul {display: none} footer, footer a {color: #000} .ref {display: inline; color: #000} .refbody {position: static; display: inline-block!important; border: 1px solid #ddd; padding: 5px; margin-bottom: 0; color: #aaa} }