@font-face {
  font-family: "National Park Regular";
  src: url(../fonts/NationalPark-Regular.otf);
}

@font-face {
  font-family: "Fredoka One";
  src: url(../fonts/FredokaOne-Regular.otf);
}

.cs { filter: grayscale(100%); opacity: 0.2; }

.header { position: relative; background-color: #eaeaea; padding: 20px; overflow: hidden; }
.header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 100%;
    width: 150%;
    height: 100%;
    background-color: #70a2d6;
    bottom: -85%;
    left: -25%;
    z-index: 1;
}

.intro { padding: 80px 0px 160px 0px; }
.intro p { font-family: "National Park Regular"; font-size: 24pt; color: #414141; text-align: center; margin-top: 40px; font-weight: bold; }

.markets { padding: 20px 0px 20px 0px; }
.marketlink { padding: 8px; }
.marketlink img { width: 180px; border-radius: 8px; }

.description { background-color: #70a2d6; font-family: "National Park Regular"; font-size: 18pt; color: #eee; padding-top: 60px; padding-bottom: 60px; }
.description img { margin-bottom: 24px; border-radius: 8px; }
.description .thumbnailscale { transition: transform 0.1s; }
.description .thumbnailscale:hover { cursor: pointer; transform: scale(1.03, 1.03); }
.description .trailer { margin-bottom: 24px; border-radius: 10px; }
.description .desc1 { padding: 10px 30px 10px 30px; }
.description .desc2 { padding: 10px 30px 10px 30px; }
.description .desc3 { padding: 0px 30px 0px 30px; }

.stuck { background-color: #70a2d6; font-family: "National Park Regular"; font-size: 18pt; color: #414141; padding-top: 10px; padding-bottom: 60px; }
.stuck .desc1 { margin: 10px 30px 10px 30px; }
.stuck .desc2 { margin: 10px 30px 10px 30px; }
.stuck .desc3 { margin: 10px 30px 10px 30px; padding: 4px 20px 8px 20px; background-color: #cf5653; text-align: center; border-radius: 8px; width: 220px; text-decoration: none; color: #eaeaea; }
.stuck .desc3:hover { color: #ddd; background-color: #bc4d4a; }
.stuck .row { border-radius: 32px; margin: 24px; position: relative; z-index: 1; background-color: #eaeaea; padding: 24px 16px 0px 16px; }
.stuck .row::after {
  content: "";
  background-image: url("../img/calculations.png");
  background-size: cover;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  border-radius: 32px;
}
.stuck .img-max { max-width: 320px; width: 100%; }

.subscribe { background-color: #70a2d6; padding-bottom: 80px; }
.subscribe p { font-family: "National Park Regular"; font-size: 24pt; color: #414141; text-align: center; margin-bottom: 20px; font-weight: bold; }
.subscribe input { font-family: "National Park Regular"; font-size: 18pt; color: #414141; }
.subscribe input[type=text] { padding: 8px 16px; margin: 0px; box-sizing: border-box; border: 0px; border-radius: 8px 0px 0px 8px; }
.subscribe input[type=submit] { padding: 8px 16px; margin: 0px; box-sizing: border-box; border: 0px; border-radius: 0px 8px 8px 0px; background-color: #eaeaea; }
.subscribe input[type=submit]:hover { cursor: pointer; }

.buttons { background-color: #70a2d6; padding-bottom: 100px; }
.buttons p { font-family: "Fredoka One"; font-size: 24pt; color: #414141; text-align: center; padding: 6px 16px; margin-bottom: 32px; }
.buttons a { background-color: #eaeaea; border: 0px; font-family: "National Park Regular"; font-size: 18pt; color: #414141; text-align: center; border-radius: 8px; padding: 6px 16px; text-decoration: none; }
.buttons a:hover { color: #212121; background-color: #ddd; }

.embedded { background-color: #70a2d6; padding-bottom: 80px; }

.footer { background-color: #70a2d6; padding-bottom: 10px; padding-top: 10px; }
.footer .human { width: 256px; }
.footer .twitter { width: 48px; }
.footer .itch { width: 48px; }


.origin { display: block; position: absolute; top: 0px; left: 50%; width: 1920px; height: 1080px; transform: translate(-50%, 0px); }

.floatingcouch { position: absolute; width: 360px; z-index: -100; }

.fc1 { top: -18%; left: 26%; }
.fc1 img { width: 360px; transform: rotate(9deg) scale(0.7); filter: blur(2px); }

.fc2 { top: -10%; right: 3%; }
.fc2 img { width: 360px; transform: rotate(8deg) scale(0.5); filter: blur(10px); }

.fc3 { top: 0%; left: 2%; }
.fc3 img { width: 360px; transform: rotate(-20deg) scale(1.0); filter: blur(1px); }

.fc4 { top: -12%; right: 25%; }
.fc4 img { width: 360px; transform: rotate(-15deg) scale(0.9); filter: blur(2px); }

.fc5 { top: 20%; left: 12%; }
.fc5 img { width: 360px; transform: rotate(8deg) scale(0.5); filter: blur(7px); }

.fc6 { top: 20%; right: 9%; }
.fc6 img { width: 360px; transform: rotate(-12deg) scale(1.0); filter: blur(1px); }

.fc7 { top: 45%; left: 4%; }
.fc7 img { width: 360px; transform: rotate(25deg) scale(0.8); filter: blur(2px); }

.fc8 { top: 43%; right: 12%; }
.fc8 img { width: 360px; transform: rotate(-18deg) scale(0.6); filter: blur(4px); }

.fc9 { top: 30%; right: 32%; }
.fc9 img { width: 360px; transform: rotate(36deg) scale(0.5); filter: blur(8px); }

.fc10 { top: 46%; left: 30%; }
.fc10 img { width: 360px; transform: rotate(-15deg) scale(1.0); filter: blur(1px); }

.fc11 { top: 15%; left: 35%; }
.fc11 img { width: 360px; transform: rotate(-8deg) scale(0.6); filter: blur(5px); }



@media (min-width: 240px) {
  .intro { padding: 40px 0px 100px 0px; }
  .intro p { margin-top: 20px; }
  .header:before { width: 300%; left: -100%; }
  .origin { display: none; }
  .newline { display: none; }
}

@media (min-width: 576px) {
  .intro { padding: 80px 0px 160px 0px; }
  .intro p { margin-top: 40px; }
  .header:before { width: 250%; left: -75%; }
  .origin { display: none; }
  .newline { display: none; }
}

@media (min-width: 768px) {
  .intro { padding: 80px 0px 160px 0px; }
  .intro p { margin-top: 40px; }
  .header:before { width: 250%; left: -75%; }
  .origin { display: none; }
  .newline { display: none; }
}

@media (min-width: 992px) {
  .intro { padding: 80px 0px 160px 0px; }
  .intro p { margin-top: 40px; }
  .header:before { width: 200%; left: -50%; }
  .origin { display: block; }
  .newline { display: none; }
}

@media (min-width: 1200px) {
  .intro { padding: 80px 0px 160px 0px; }
  .intro p { margin-top: 40px; }
  .header:before { width: 150%; left: -25%; }
  .origin { display: block; }
  .newline { display: inline; }
}