@charset "UTF-8";
@font-face {
  font-family: 'dienasty';
  src: url("../fonts/dienasty.ttf") format("truetype");
}

* {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

body {
  overflow: hidden;
  height: 100vh;
  background: var(--theme-hl);
}

article {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: calc(50vh - .5*72.91667em);
  left: calc(50vw - .5*100em);
  border: solid 4em transparent;
  width: 100em;
  height: 72.91667em;
  border-radius: calc(4em + 5px);
  transform: translate(calc(7.5em - .5*(100em + 100vw)));
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), var(--img) 50%/cover var(--theme-hl);
  background-clip: content-box;
  background-blend-mode: screen, luminosity;
  font: 1vw trebuchet ms, tahoma, sans-serif;
}

article.curr {
  transform: none;
}

article.curr:before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  box-shadow: 2px 2px 0.5rem rgba(105, 105, 105, 0.35);
  content: '';
}

article.curr~article {
  transform: translate(100vw);
}

article.curr+article {
  transform: translate(calc(.5*(100em + 100vw) - 7.5em));
}

@media (min-aspect-ratio: 96 / 70) {
  article {
    font-size: 1.37143vh;
  }
}

h1 {
  color: var(--theme-hl);
  font-size: 35em;
  font-weight: 900;
  text-shadow: 4px 2px 4px dimgrey;
  filter: brightness(0.75);
  mix-blend-mode: color-burn;
}

h2 {
  font-size: 12.5em;
}

h3 {
  font-size: 7em;
}

h4 {
  font-size: 6.25em;
}

code {
  font: 1.125em consolas, monaco, monospace;
}

li {
  font-size: 3.5em;
  line-height: 2;
}

form {
  font-size: 4em;
}

input:not([type='range']) {
  position: absolute;
  opacity: .001;
  left: -200vw;
  pointer-events: none;
}

input:not([type='range'])+label {
  display: flex;
  align-items: center;
  padding: .5em;
  color: var(--c-sel, var(--c-hl, dimgrey));
  font: 1em/ 1 consolas, monaco, monospace;
  cursor: pointer;
}

input:not([type='range'])+label:before {
  margin-right: .375em;
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 0.125em var(--c-sel, var(--c-hl, dimgrey));
  color: var(--c-sel, transparent);
  text-align: center;
}

footer {
  width: 85%;
  text-align: right;
}

span {
  color: var(--theme-hl);
}

.title {
  --img: url(../img/17_09_hamburg_bg_05.jpg);
}

.title footer {
  color: dimgrey;
  font: 900 4em allura, cursive;
}

.title .author {
  color: var(--theme-hl);
}

.title--no {
  --img: url(../img/17_09_hamburg_bg_01.jpg);
  font-family: gochi hand, cursive;
}

.title--no h2 {
  opacity: .7;
}

.title--no section {
  display: flex;
}

.title--no figure {
  --s: -1;
  padding: .5rem .5rem 0;
  border-radius: .5rem;
  transform: translate(calc(var(--s)*-20%), -10%) rotate(calc(var(--s)*15deg));
  box-shadow: 1px 1px 4px rgba(51, 51, 51, 0.25);
  background: #e7decf;
}

.title--no figure:nth-child(2) {
  --s: 1;
}

.title--no img {
  width: 43em;
  max-width: 600px;
  border-radius: 3px;
}

.title--no figcaption {
  font-size: 2em;
  text-align: center;
}

.title--ok {
  align-items: flex-end;
  justify-content: space-between;
  --img: url(../img/17_09_kiss_bg.jpg);
}

.title--ok h2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3.5vmin;
  margin: 2.5vmin;
  font-size: 8em;
  font-weight: 900;
}

.title--ok div {
  padding: 0 .375em;
  border-radius: .5rem;
  box-shadow: 0 0 0 1vmin #fff, 1px 1px 5px 1vmin rgba(51, 51, 51, 0.25);
  background: url(../img/17_09_pink_marble_bg.jpg) #ddd;
  background-blend-mode: overlay;
  line-height: 2.125;
  text-align: center;
}

.title--ok div:first-letter {
  color: var(--theme-hl);
  text-transform: uppercase;
}

.title--ok p {
  padding-right: 1em;
  font: 5em/ 2 gochi hand, cursive;
}

.kiss__style {
  font-family: dienasty, sans-serif;
}

.controls--no {
  --img: url(../img/17_09_hamburg_bg_07.jpg);
}

.controls--no p:last-child {
  color: var(--theme-hl);
  font: 4.75em/ 2 gochi hand, cursive;
}

.controls--no p:last-child:after {
  filter: sepia(0.5) hue-rotate(-60deg);
  content: '😱';
}

.controls--ok {
  --img: url(../img/17_09_hamburg_bg_03.jpg);
}

.horror {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  color: gold;
  font: 9em/ 2 gochi hand, cursive;
  text-shadow: 4px 4px var(--theme-hl), -4px 4px var(--theme-hl), -4px -4px var(--theme-hl), 4px -4px var(--theme-hl);
  text-transform: uppercase;
}

[class*='ex'] footer {
  display: flex;
  justify-content: flex-end;
  font-size: 2em;
}

.ex--check {
  --img: url(../img/17_09_hamburg_bg_08.jpg);
}

.ex--check [type='checkbox']+label:before {
  content: '✔';
}

.ex--check [type='checkbox']:focus+label,
.ex--check [type='checkbox']:hover+label {
  --c-hl: #a20722;
}

.ex--check [type='checkbox']:checked+label {
  --c-sel: var(--theme-hl);
}

.ex--radio {
  --img: url(../img/17_09_hamburg_bg_09.jpg);
}

.ex--radio [type='radio']+label:before {
  box-sizing: border-box;
  padding: .125em;
  border-radius: 50%;
  background: var(--c-sel, transparent) content-box;
  content: '';
}

.ex--radio [type='radio']:hover+label {
  --c-hl: #a20722;
}

.ex--radio [type='radio']:checked+label {
  --c-sel: var(--theme-hl);
}

.ex--range {
  --img: url(../img/17_09_hamburg_bg_10.jpg);
}

.ex--range form {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  margin: 0 auto;
  width: calc(20em + 1.25em);
}

.ex--range [type='range'] {
  border: solid 0 transparent;
  padding: .25em 0;
  width: 100%;
  height: calc(1.5*1.25em);
  background: transparent;
  cursor: pointer;
}

.ex--range [type='range']::-webkit-slider-runnable-track,
.ex--range [type='range']::-webkit-slider-thumb,
.ex--range [type='range'] {
  -webkit-appearance: none;
}

.ex--range [type='range']::-webkit-slider-runnable-track {
  border: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 0.375rem;
  background: dimgrey;
  background: radial-gradient(circle at 50% 50%, #ddd 0.375rem, transparent 0) calc(.5*(1.25em - calc(20em/var(--rmax)))) 50%/0 0, radial-gradient(circle at calc(var(--rval)/var(--rmax)*(20em) + .5*1.25em) 50%, transparent 0.625em, dimgrey 0);
  transition: background-size 0.3s;
}

.ex--range [type='range']::-moz-range-track {
  border: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 0.375rem;
  background: dimgrey;
  background: radial-gradient(circle at 50% 50%, #ddd 0.375rem, transparent 0) calc(.5*(1.25em - calc(20em/var(--rmax)))) 50%/0 0, radial-gradient(circle at calc(var(--rval)/var(--rmax)*(20em) + .5*1.25em) 50%, transparent 0.625em, dimgrey 0);
  transition: background-size 0.3s;
}

.ex--range [type='range']::-ms-track {
  border: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 0.375rem;
  background: dimgrey;
  background: radial-gradient(circle at 50% 50%, #ddd 0.375rem, transparent 0) calc(.5*(1.25em - calc(20em/var(--rmax)))) 50%/0 0, radial-gradient(circle at calc(var(--rval)/var(--rmax)*(20em) + .5*1.25em) 50%, transparent 0.625em, dimgrey 0);
  transition: background-size 0.3s;
  color: transparent;
}

.ex--range [type='range']::-webkit-slider-thumb {
  margin-top: calc(.5*(0.75rem - 1.25em));
  box-sizing: border-box;
  border: solid .25em transparent;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: dimgrey content-box;
  transition: 0.3s;
}

.ex--range [type='range']::-moz-range-thumb {
  box-sizing: border-box;
  border: solid .25em transparent;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: dimgrey content-box;
  transition: 0.3s;
  cursor: ew-resize;
}

.ex--range [type='range']::-ms-thumb {
  margin-top: 0;
  box-sizing: border-box;
  border: solid .25em transparent;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: dimgrey content-box;
  transition: 0.3s;
}

.ex--range [type='range']::-ms-fill-lower,
.ex--range [type='range']::-ms-fill-upper {
  background: transparent;
}

.ex--range [type='range']::-ms-tooltip {
  display: none;
}

.ex--range [type='range']:focus {
  outline: none;
}

.ex--range [type='range']:focus::-webkit-slider-runnable-track {
  background-size: calc(20em/var(--rmax)) 100%, 100%;
}

.ex--range [type='range']:focus::-moz-range-track {
  background-size: calc(20em/var(--rmax)) 100%, 100%;
}

.ex--range [type='range']:focus::-ms-track {
  background-size: calc(20em/var(--rmax)) 100%, 100%;
}

.ex--range [type='range']:focus::-webkit-slider-thumb {
  border-width: 0;
  background: var(--theme-hl);
}

.ex--range [type='range']:focus::-moz-range-thumb {
  border-width: 0;
  background: var(--theme-hl);
}

.ex--range [type='range']:focus::-ms-thumb {
  border-width: 0;
  background: var(--theme-hl);
}

.ex--range [type='range']:focus~output {
  --f: 1;
}

.ex--range label:after {
  content: ':';
}

.ex--range output {
  --f: 0;
  position: absolute;
  top: calc(100% - .25em);
  left: calc(.5*1.25em);
  padding: .125em .5em;
  border-radius: .5rem;
  transform: translate(calc(var(--rval)/var(--rmax)*(20em) - 50%)) scale(var(--f));
  background: var(--theme-hl);
  color: #ddd;
  opacity: var(--f);
  transition: opacity 0.3s;
}

.ex--toggle {
  --img: url(../img/17_09_hamburg_bg_04.jpg);
}

.ex--toggle [type='checkbox']+label {
  --i: 0;
  display: block;
  position: relative;
  margin: 1em auto;
  padding: 0;
  width: 2em;
  height: 1em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 2px currentcolor;
  color: dimgrey;
  text-indent: -200vw;
  transition: 0.3s;
  cursor: pointer;
}

.ex--toggle [type='checkbox']+label:before {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transform: translate(calc(var(--f, 0)*100%)) scale(calc(.75 + var(--f, var(--i))*.15));
  box-shadow: none;
  background: currentcolor;
  color: inherit;
  transition: 0.3s;
  content: '';
}

.ex--toggle [type='checkbox']:focus+label,
.ex--toggle [type='checkbox']:hover+label {
  --i: .35;
}

.ex--toggle [type='checkbox']:checked+label {
  --f: 1;
  color: var(--theme-hl);
}

.icn {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  padding: .375em;
  width: 2em;
  height: 2em;
  box-shadow: 2px 2px 5px rgba(105, 105, 105, 0.5);
  opacity: .5;
  background: #fff;
  color: var(--theme-hl);
  line-height: 2;
}

.icn svg {
  display: block;
  width: inherit;
  height: inherit;
}

.icn:hover {
  opacity: .999;
}

.icn[href*='codepen']:hover,
.icn[href*='github']:hover {
  color: #000;
}

.icn[href*='youtube']:hover [x2]+[d] {
  fill: url(#l);
}

.icn[href*='css-tricks']:hover {
  color: #ff9800;
}

.icn[href*='stackoverflow']:hover {
  color: #f82;
}

.icn[href*='stackoverflow']:hover [d*='v'] {
  color: #bbb;
}

.icn[href*='twitter']:hover {
  color: #2af;
}

.refs {
  --img: url(../img/17_09_hamburg_bg_02.jpg);
}

.refs li {
  margin: .5rem 0;
  font-size: 2.25em;
  line-height: 1.5;
  filter: grayscale(0.875);
  transition: 0.3s;
}

.refs li:hover {
  filter: none;
}

.refs a {
  text-decoration: none;
  transition: 0.3s;
}

.refs a:hover {
  color: var(--theme-hl);
}

.tag {
  display: inline-block;
  margin: 0 .5rem;
  padding: 0 1rem;
  border-radius: .5rem;
  color: dimgrey;
}

.tag--edge {
  background: #0AAEFF;
}

.tag--firefox {
  background: #FDB93A;
}

.tag--bug {
  background: #E1077F;
  color: #ddd;
}

.fix--full {
  background: #ADFF17;
}

.fix--semi {
  background: #E8FB2D;
}

.mylinks {
  --img: url(../img/17_09_hamburg_bg_00.jpg);
  font-family: gochi hand, cursive;
}

.mylinks ul {
  display: flex;
}

.mylinks li {
  margin: .5em;
  list-style: none;
}

.thx {
  --img: url(../img/17_09_hamburg_bg_06.jpg);
}

.thx h2 {
  font: 19em allura, cursive;
}

.thx h2:first-letter {
  text-transform: uppercase;
}

.thx footer span {
  display: inline-block;
  overflow: hidden;
  width: 1em;
  height: 1.125em;
}

.thx footer span:before {
  display: inline-block;
  width: inherit;
  content: '❤';
}

.thx a {
  text-decoration: none;
  color: var(--theme-hl);
}

.sl-unit {
  filter: saturate(0.5);
}

:not(h2)>.sl-unit {
  opacity: .5;
}

.sl-unit.hidden {
  opacity: .01;
}

.sl-unit.curr {
  opacity: .99;
  filter: none;
}

.btn--yp {
  position: fixed;
  z-index: 9;
  bottom: 1rem;
  right: 1rem;
  border: solid 1rem transparent;
  width: 4.625rem;
  height: 3.25rem;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;
  text-indent: 200vw;
  text-shadow: none;
  filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
  transition: .5s;
  white-space: nowrap;
}

.btn--yp:before {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 1rem -.5rem;
  padding: .5rem;
  width: 100%;
  border-radius: 5px;
  background: #e8e0e0;
  color: #000;
  font: 1rem/1.25rem trebuchet ms, sans-serif;
  text-align: center;
  text-decoration: none;
  text-indent: 0vw;
  white-space: normal;
  animation: float 1s ease-in-out infinite alternate;
  content: 'see video';
}

.btn--yp:hover,
.btn--yp:focus {
  outline: none;
  filter: grayscale(0) drop-shadow(0 0 2px #000);
}

@keyframes float {
  to {
    transform: translateY(0.75rem);
  }
}