.btn,
.btn-night,
.btn-clear {
  display: inline-block;
  margin: 1rem;
  padding: 0.25rem 0.75rem;
  color: white;
  font-size: 1.2rem;
  border: none;
  border-radius: 30px;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.btn:hover,
.btn-night:hover,
.btn-clear:hover {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.btn::after, .btn::-moz-selection,
.btn-night::after,
.btn-night::-moz-selection,
.btn-clear::after,
.btn-clear::-moz-selection {
  border: none;
  outline: none;
}

.btn::after, .btn::selection,
.btn-night::after,
.btn-night::selection,
.btn-clear::after,
.btn-clear::selection {
  border: none;
  outline: none;
}

.btn:focus,
.btn-night:focus,
.btn-clear:focus {
  outline: none;
}

.btn__link,
.btn-night__link,
.btn-clear__link {
  text-decoration: none;
  color: white;
}

.btn__link:hover,
.btn-night__link:hover,
.btn-clear__link:hover {
  text-decoration: none;
  color: white;
}

.btn {
  background: -webkit-gradient(linear, left top, right bottom, from(#f8db84), to(#fbc218));
  background: linear-gradient(to bottom right, #f8db84, #fbc218);
}

.btn:hover {
  color: white;
  background: -webkit-gradient(linear, left top, right bottom, from(#fbc218), to(#f1b80b));
  background: linear-gradient(to bottom right, #fbc218, #f1b80b);
}

.btn::after, .btn::-moz-selection {
  background: linear-gradient(to bottom right, #64d168, #12b017);
}

.btn::after, .btn::selection {
  background: -webkit-gradient(linear, left top, right bottom, from(#64d168), to(#12b017));
  background: linear-gradient(to bottom right, #64d168, #12b017);
}

.btn-clear {
  background: -webkit-gradient(linear, left top, right bottom, from(#bdbdbd), to(#757575));
  background: linear-gradient(to bottom right, #bdbdbd, #757575);
}

.btn-clear:hover {
  color: white;
  background: -webkit-gradient(linear, left top, right bottom, from(#757575), to(#212121));
  background: linear-gradient(to bottom right, #757575, #212121);
}

.btn-clear::after, .btn-clear::-moz-selection {
  background: linear-gradient(to bottom right, #bdbdbd, #757575);
}

.btn-clear::after, .btn-clear::selection {
  background: -webkit-gradient(linear, left top, right bottom, from(#bdbdbd), to(#757575));
  background: linear-gradient(to bottom right, #bdbdbd, #757575);
}

.btn-night {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1200;
  background-color: white;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.btn-night__link {
  color: #2a213d;
  text-decoration: none;
}

.btn-night__link:hover {
  color: #2a213d;
  text-decoration: none;
}

.btn-night:hover {
  color: white;
  background: -webkit-gradient(linear, left top, right bottom, from(#f5f2fd), to(white));
  background: linear-gradient(to bottom right, #f5f2fd, white);
}

.btn-night::after, .btn-night::-moz-selection {
  background: linear-gradient(to bottom right, #6bdf6f, #64d168);
}

.btn-night::after, .btn-night::selection {
  background: -webkit-gradient(linear, left top, right bottom, from(#6bdf6f), to(#64d168));
  background: linear-gradient(to bottom right, #6bdf6f, #64d168);
}

.dinosaur-image__large {
  padding: 1rem;
  height: 30vh;
}

.instructions__paragraph {
  color: white;
  margin: 2rem;
  padding: 3rem;
  font-size: 1.6rem;
  border: 20px white solid;
}

.instructions__block {
  background: -webkit-gradient(linear, left top, right top, from(#fbc218), to(#f1b80b));
  background: linear-gradient(to right, #fbc218, #f1b80b);
  margin: 1rem;
}

.instructions__image {
  padding: 1rem;
  max-height: 40vh;
  margin: 1rem 4rem;
}

.introduction__block {
  margin: 2rem;
  border: 20px white solid;
}

.introduction__block--background {
  background: -webkit-gradient(linear, left top, right top, from(#fbc218), to(#f1b80b));
  background: linear-gradient(to right, #fbc218, #f1b80b);
}

.introduction__paragraph {
  padding: 0.5rem 2rem;
  font-size: 1.3rem;
}

.introduction__form--label {
  padding: 0 0.5rem 0 2rem;
  font-size: 1.2rem;
}

.introduction__form--input {
  padding: 0.5rem;
  border: none;
  background-color: #ececec;
}

.large-icon {
  font-size: 2rem;
}

.modal-window__instructions, .modal-window__stars, .modal-window__nightscreen, .modal-window__cookies {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.modal-window__instructions {
  background-color: #0390bb88;
  z-index: 500;
}

.modal-window__stars {
  background: #fe962788;
  z-index: 600;
}

.modal-window__stars-message--primary {
  font-size: 1.4rem;
  color: #fc8303;
  font-weight: 800;
}

.modal-window__stars-message--secondary {
  font-size: 1.2rem;
  padding-top: 1.5rem;
}

.modal-window__nightscreen {
  background: radial-gradient(transparent, black), url(/src/img/nightscreen-background.png);
  background-size: cover;
  z-index: 800;
}

.modal-window__container, .modal-window__container-night, .modal-window__nightscreen--overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 2rem 1rem;
  border-radius: 5px;
}

.modal-window__container {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, #ececec), color-stop(10%, white), color-stop(90%, white), color-stop(90%, #ececec));
  background: linear-gradient(to bottom right, #ececec 10%, white 10%, white 90%, #ececec 90%);
  min-width: 70vw;
}

.modal-window__container-night {
  min-width: 90vw;
}

.modal-window__nightscreen--overlay {
  background: radial-gradient(transparent, black 60%);
  min-height: 100vh;
  min-width: 100vw;
  z-index: 1000;
}

.modal-window__step {
  font-weight: 800;
  font-size: 3rem;
  color: #008463;
}

.modal-window__heading {
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  color: #008463;
}

.modal-window__paragraph {
  font-size: 1.2rem;
}

.hidden {
  opacity: 0;
  visibility: none;
  z-index: -100;
}

.nav {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.2rem;
  color: #bdbdbd;
  font-size: 0.75rem;
  text-align: right;
}

.nav__list {
  list-style: none;
}

.nav__item {
  margin-left: 1rem;
  display: inline;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.nav__item--link {
  text-decoration: none;
  color: #ececec;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.nav__item--link:hover {
  color: white;
  background-color: none;
  font-size: 0.8rem;
  cursor: pointer;
}

.nav__item--link-active {
  color: white;
}

.timer__timer-element {
  font-size: 2rem;
  font-weight: 600;
}

.carousel {
  height: 25rem;
  padding: 3rem 2rem 2rem 2rem;
  vertical-align: middle;
}

.carousel__slider--item {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #c2de5e, #9cbd23);
  border: 20px white solid;
  padding: 3rem 2rem 2rem 2rem;
  vertical-align: middle;
  opacity: 0;
  z-index: 1;
}

.carousel__slider--item-emoji {
  display: inline;
  padding: 2rem 1rem 1rem 1rem;
  border-radius: 120px;
  background-color: white;
  font-size: 8rem;
}

.carousel__slider--item-caption {
  color: white;
}

.carousel__slider--item-title {
  color: white;
  font-size: 2rem;
  font-weight: 600;
  padding: 1rem 0;
}

.carousel__slider--item-paragraph {
  color: white;
  padding: 0;
  font-size: 1.3rem;
}

.carousel__slider--item-superstar {
  font-size: 2.5rem;
  padding-bottom: 0.5rem;
}

.slider-button {
  font-size: 4rem;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.slider-button:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  cursor: pointer;
}

.button-right {
  position: absolute;
  top: 40%;
  right: 5%;
  z-index: 100;
}

.button-left {
  position: absolute;
  top: 40%;
  left: 5%;
  z-index: 100;
}

.slide {
  /* we position the slide absolutely compared to its parent #slider */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* change the value for a faster or slower transition between slides */
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* class to show the current slide */
.showing {
  opacity: 1;
  z-index: 2;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 100%;
}

@media screen and (max-width: 75em) {
  html {
    font-size: 80%;
  }
}

@media screen and (max-width: 56.25em) {
  html {
    font-size: 70%;
  }
}

@media screen and (max-width: 37.5em) {
  html {
    font-size: 60%;
  }
}

::-moz-selection {
  background-color: #03cf9c;
  color: #212121;
}

::selection {
  background-color: #03cf9c;
  color: #212121;
}

body {
  position: absolute;
  color: #757575;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.u-margin-bottom-small {
  padding-bottom: 2rem;
}

.u-margin-top-small {
  padding-top: 2rem;
}

.u-padding-top {
  padding-top: 6rem;
}

.brand-logo {
  max-height: 4rem;
}

.highlight-text {
  color: #008463;
  font-weight: 600;
  font-size: 1.4rem;
}

.highlight-text--large {
  color: #008463;
  font-weight: 600;
  font-size: 1.7rem;
}

.under-construction {
  min-height: 24rem;
  padding: 12rem;
  font-size: 2rem;
  background-color: #ececec;
}

.footer {
  padding: 2rem;
  background: -webkit-gradient(linear, left top, right top, from(#03cf9c), to(#008463));
  background: linear-gradient(to right, #03cf9c, #008463);
  color: white;
}

.footer__logo {
  max-height: 17vh;
}

@media screen and (max-width: 75em) {
  .footer__logo {
    max-height: 14vh;
  }
}

@media screen and (max-width: 37.5em) {
  .footer__logo {
    max-height: 10vh;
  }
}

.footer__attribution {
  margin: auto;
  font-size: 0.75rem;
}

.footer__attribution--logo {
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.footer__attribution--logo:hover {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.footer__attribution--music {
  font-size: 0.5rem;
}

.footer-night {
  margin: 0;
  height: 40vh;
  background: linear-gradient(120deg, #2a213d, #060509);
}

.header,
.header-night {
  position: relative;
  margin: 0;
}

.header__logo,
.header-night__logo {
  max-height: 25vh;
}

@media screen and (max-width: 56.25em) {
  .header__logo,
  .header-night__logo {
    max-height: 20vh;
  }
}

@media screen and (max-width: 37.5em) {
  .header__logo,
  .header-night__logo {
    max-height: 12vh;
    margin: 1.5rem 0 0.5rem 0;
  }
}

.header {
  background: linear-gradient(120deg, #03cf9c, #008463);
}

.header__date {
  position: absolute;
  top: 2rem;
  right: 2rem;
  text-align: left;
  color: white;
  font-size: 0.75rem;
}

@media screen and (max-width: 37.5em) {
  .header__date {
    text-align: center;
  }
}

.header__login-symbol {
  position: absolute;
  top: 4rem;
  right: 2.5rem;
  font-size: 2rem;
  color: #ececec;
  opacity: 80%;
  -webkit-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
}

.header__login-symbol:hover {
  opacity: 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.header-night {
  background: linear-gradient(120deg, #2a213d, #100d18);
}

.subheader-1,
.subheader-2,
.subheader-3 {
  margin: 0;
  padding: 1rem 0 0.6rem 0;
  color: white;
  font-size: 1.6rem;
}

.subheader-1 {
  background: -webkit-gradient(linear, left top, right bottom, from(#fdc990), color-stop(80%, #fc8303));
  background: linear-gradient(to bottom right, #fdc990, #fc8303 80%);
}

.subheader-2 {
  background: -webkit-gradient(linear, left top, right bottom, from(#fdc990), to(#008463));
  background: linear-gradient(to bottom right, #fdc990, #008463);
}

.subheader-3 {
  background: -webkit-gradient(linear, left top, right bottom, from(#6ae6d9), to(#4da2a2));
  background: linear-gradient(to bottom right, #6ae6d9, #4da2a2);
}

.row {
  margin: 0;
  padding: 0;
}
/*# sourceMappingURL=main.css.map */