header {
  background-image: url(../img/m-h-day.jpg); }

.section_banner {
  background: linear-gradient(90deg, #739d07, #3261cb); }

.section_text::before {
  background-color: #14a0c7; }

.section_banner_heading::before {
  background-color: #14a0c7; }

.header_heading::before {
  background-color: #14a0c7; }

.header_button {
  background-color: rgba(142, 214, 26, 0.767); }

.section_banner_button {
  background-color: rgba(142, 214, 26, 0.767); }

.section_text {
  color: #2c2f3c; }

.header_heading {
  color: #2c2f3c; }

body,
*,
::after,
::before {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box; }

body {
  background-color: white; }

a, button {
  cursor: pointer; }

.section_card_right_container, .header, .header_text, .section_banner_heading, .section_banner_text, .footer_text, .footer_logo.landing-logo p, .footer_logo.landing-logo span {
  font-family: "Source Sans Pro", sans-serif; }

header {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-right-radius: 35%;
  margin-bottom: 50px; }

.section_card_wrap {
  max-width: 80%;
  margin: 0 auto; }

.section_card {
  display: flex;
  height: 300px;
  background-color: #363636;
  margin: 15px 0 15px 0;
  border-radius: 10px; }
  .section_card_img {
    width: 550px;
    padding: 20px; }
  .section_card_right_container {
    padding: 40px 60px 20px 40px;
    text-align: justify; }
  .section_card_heading {
    color: white;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px; }
  .section_card_text {
    color: white;
    font-size: 20px;
    line-height: 1.5em;
    margin-bottom: 20px; }

header .header-wrap {
  padding-top: 20px;
  max-width: 80%;
  margin: 0 auto; }

.landing-logo {
  display: inline-block;
  width: 200px;
  margin: 10px 0 40px 0; }
  .landing-logo p {
    display: inline-block;
    font-size: 25px;
    margin-left: 10px; }
  .landing-logo span {
    display: block;
    position: relative;
    font-size: 12px;
    margin-left: 10px; }

.header-navbar {
  display: flex;
  justify-content: space-between; }

:root {
  --thumb-color:#FFCC33;
  --toggle-h:20rem;
  --toggle-w:50rem;
  --thumb-size:22rem;
  --crater1-w: 4.1;
  --crater1-h: 3.6;
  --crater2-w: 3.8;
  --crater2-h: 4;
  --crater3-w: 2.1;
  --crater3-h: 1.5;
  --wave-size: 7.7rem;
  --star-size: 0.6rem; }

* {
  transition: 1s all ease-in-out; }

HTML {
  font-size: 2px; }

.container {
  width: 100vw;
  height: 10vh;
  position: relative;
  font-family: 'Pacifico', cursive;
  will-change: color; }
  .container .inspired-by-day {
    left: 0; }
  .container .inspired-by-night {
    font-family: 'Staatliches', cursive;
    letter-spacing: 0.1rem;
    color: #FFF;
    left: -100rem;
    opacity: 0; }
  .container.nighttime {
    background-color: #151D29; }
    .container.nighttime A {
      box-shadow: none; }
  .container P {
    color: #000;
    font-size: 1.7rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--toggle-h) * 1.5);
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-shadow: 0.1rem 0.1rem 0.1rem white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    .container P a {
      color: gold;
      margin-left: 0.5rem;
      text-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.5); }
  @media (max-width: 849px) {
    .container {
      --toggle-h: 10rem;
      --toggle-w: 25rem;
      --thumb-size: 11rem;
      --wave-size: 3.85rem;
      --star-size: 0.3rem; }
      .container .toggle-thumb {
        width: 11rem;
        width: var(--thumb-size);
        height: 11rem;
        height: var(--thumb-size); }
        .container .toggle-thumb .crater-1, .container .toggle-thumb .crater-2, .container .toggle-thumb .crater-3 {
          --crater1-w: 2.05;
          --crater1-h: 1.8;
          --crater2-w: 1.9;
          --crater2-h: 2;
          --crater3-w: 1.05;
          --crater3-h: 0.75; } }

.toggle-wrapper {
  position: absolute;
  width: 50rem;
  width: var(--toggle-w, 50rem);
  height: 20rem;
  height: var(--toggle-h, 20rem);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 20rem;
  border-radius: var(--toggle-h, 20rem);
  display: flex;
  align-items: center;
  cursor: pointer; }
.toggle-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 20rem;
  border-radius: var(--toggle-h, 20rem); }
.toggle-thumb {
  width: 22rem;
  width: var(--thumb-size);
  height: 22rem;
  height: var(--thumb-size);
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  background: gold;
  box-shadow: 0 0 5rem 0.5rem gold, inset 0 0 0 0.5rem rgba(197, 198, 197, 0), inset 0 0 0 0.1rem rgba(206, 206, 206, 0), inset 0 0 0 0.1rem rgba(214, 214, 214, 0), inset 0 0 0 0.2rem rgba(222, 222, 222, 0), inset 0 0 0 0.2rem rgba(231, 231, 232, 0), inset 0 0 0 0.3rem rgba(231, 231, 232, 0);
  left: -0.6rem;
  transform: rotate(-270deg); }
  .toggle-thumb .crater-1, .toggle-thumb .crater-2, .toggle-thumb .crater-3 {
    background: #E7E7E8;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVQYV2O8detWmpqa2iwYzcjAwMCALMhIUAUAAJId7b0H06UAAAAASUVORK5CYII=);
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 0.1rem 0.1rem 0.3rem 0.1rem #D6D6D6;
    opacity: 0; }
  .toggle-thumb .crater-1 {
    width: 4.1rem;
    width: calc(var(--crater1-w) * 1rem);
    height: 3.6rem;
    height: calc(var(--crater1-h) * 1rem);
    top: 15%;
    left: 25%;
    transform: skew(-15deg); }
  .toggle-thumb .crater-2 {
    width: 3.8rem;
    width: calc(var(--crater2-w) * 1rem);
    height: 4rem;
    height: calc(var(--crater2-h) * 1rem);
    top: 50%;
    right: 10%; }
  .toggle-thumb .crater-3 {
    width: 2.1rem;
    width: calc(var(--crater3-w) * 1rem);
    height: 1.5rem;
    height: calc(var(--crater3-h) * 1rem);
    bottom: 15%;
    left: 30%; }
.toggle-day, .toggle-night {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: 20rem;
  border-radius: var(--toggle-h, 20rem);
  overflow: hidden; }
.toggle-day {
  left: 0;
  opacity: 1; }
  .toggle-day .waves {
    list-style: none;
    height: 100%;
    width: 100%;
    background: #40B5F8;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: auto;
    white-space: nowrap;
    text-align: right; }
    .toggle-day .waves li {
      width: 7.7rem;
      width: var(--wave-size);
      height: 80%;
      border-radius: 0 0 var(--wave-size) var(--wave-size);
      display: inline-block;
      background: red;
      position: relative;
      margin: 0 -1rem;
      margin: 0 calc(var(--wave-size) / -10);
      background: linear-gradient(to bottom, #99CCFF 0%, #FFFFFF 100%); }
  .toggle-day .surfer {
    width: 10rem;
    height: 10rem;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66763/surfer1.png);
    background-size: cover;
    position: absolute;
    right: 30%;
    bottom: 40%;
    z-index: 10; }
.toggle-night {
  left: calc(calc(100% - calc(var(--thumb-size) - 0.6rem)) * -1);
  background: linear-gradient(to bottom, #003333 0%, #6666CC 100%);
  opacity: 0; }
  .toggle-night .astronaut {
    width: 13rem;
    height: 9rem;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66763/astronaut.png);
    background-size: cover;
    position: absolute;
    left: -5%;
    bottom: 5%;
    z-index: 10;
    transform: rotate(-360deg); }
  .toggle-night .stars {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    .toggle-night .stars li {
      width: 0.6rem;
      width: var(--star-size);
      height: 0.6rem;
      height: var(--star-size);
      background: #E7DEC7;
      position: absolute;
      transform: rotate(45deg) translateY(-10000%) translateX(-5000%); }
      .toggle-night .stars li:nth-child(1) {
        top: 18%;
        left: 23.60%;
        opacity: 1; }
      .toggle-night .stars li:nth-child(2) {
        top: 32.8%;
        left: 11.60%;
        opacity: 0.8; }
      .toggle-night .stars li:nth-child(3) {
        top: 28%;
        left: 41.60%;
        opacity: 0.8; }
      .toggle-night .stars li:nth-child(4) {
        top: 47.8%;
        left: 35.60%;
        opacity: 0.6; }
      .toggle-night .stars li:nth-child(5) {
        top: 58%;
        left: 19.60%;
        opacity: 0.6; }
      .toggle-night .stars li:nth-child(6) {
        top: 68%;
        left: 47.60%;
        opacity: 0.4; }
      .toggle-night .stars li:nth-child(7) {
        top: 73%;
        left: 7.60%;
        opacity: 0.2; }
      .toggle-night .stars li:nth-child(8) {
        top: 78%;
        left: 29.5%;
        opacity: 0.2; }
.toggle-checkbox {
  display: none; }
  .toggle-checkbox:checked + .toggle-wrapper .toggle-thumb {
    transform: rotate(0);
    left: calc(100% - calc(22rem - 0.6rem));
    left: calc(100% - calc(var(--thumb-size) - 0.6rem));
    background-color: #F7F7F7;
    box-shadow: 0 0 0 0 gold, inset 0 0 0 0.5rem rgba(197, 198, 197, 0.5), inset 0 0 0 1rem rgba(206, 206, 206, 0.5), inset 0 0 0 1.5rem rgba(214, 214, 214, 0.5), inset 0 0 0 2rem rgba(222, 222, 222, 0.5), inset 0 0 0 2.5rem rgba(231, 231, 232, 0.5), inset 0 0 0 3rem rgba(231, 231, 232, 0.5); }
    .toggle-checkbox:checked + .toggle-wrapper .toggle-thumb .crater-1, .toggle-checkbox:checked + .toggle-wrapper .toggle-thumb .crater-2, .toggle-checkbox:checked + .toggle-wrapper .toggle-thumb .crater-3 {
      opacity: 1; }
  .toggle-checkbox:checked + .toggle-wrapper .toggle-day {
    left: calc(100% - calc(var(--thumb-size) - 0.6rem));
    opacity: 0; }
    .toggle-checkbox:checked + .toggle-wrapper .toggle-day .surfer {
      bottom: -100%; }
    .toggle-checkbox:checked + .toggle-wrapper .toggle-day .waves {
      height: 200%;
      bottom: -100%; }
  .toggle-checkbox:checked + .toggle-wrapper .toggle-night {
    left: 0;
    opacity: 1; }
    .toggle-checkbox:checked + .toggle-wrapper .toggle-night .astronaut {
      left: 25%;
      bottom: 35%;
      z-index: 10;
      transform: rotate(15deg); }
    .toggle-checkbox:checked + .toggle-wrapper .toggle-night .stars li {
      transform: rotate(45deg); }

.header_heading {
  font-size: 80px;
  position: relative;
  z-index: 1;
  width: 600px;
  font-weight: 700;
  letter-spacing: -0.5px; }
  .header_heading::before {
    content: "";
    z-index: -1;
    position: absolute;
    width: 333px;
    height: 55px;
    top: 130px; }

.header_text {
  white-space: pre-line;
  font-size: 18px;
  line-height: 1.5em;
  margin-bottom: 50px; }

.login {
  font-weight: 600;
  font-size: 23px;
  margin-left: 150px;
  color: white; }

.section_link {
  font-weight: 600;
  font-size: 23px;
  color: white;
  margin-left: 40%; }

.header_button {
  border-radius: 5px;
  padding: 15px 50px;
  font-size: 18px;
  font-weight: 600;
  color: white; }

.section_text {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 auto 38px;
  position: relative;
  width: 470px;
  z-index: 1; }
  .section_text::before {
    content: "";
    z-index: -1;
    position: absolute;
    width: 190px;
    height: 47px;
    bottom: 4px;
    right: 38px;
    line-height: 50px; }

.section_banner {
  display: flex;
  justify-content: space-around;
  max-width: 90%;
  height: 150px;
  margin: 0 auto;
  position: relative;
  top: 70px;
  border-radius: 5px; }
  .section_banner_heading {
    font-size: 30px;
    font-weight: 800;
    padding-top: 30px; }
    .section_banner_heading::before {
      content: "start";
      position: absolute;
      width: 70px;
      height: 47px;
      margin-left: 120px;
      top: 25px;
      line-height: 50px; }
  .section_banner_text {
    color: white;
    font-size: 22px; }

.footer {
  background-color: #363636; }
  .footer_text {
    font-size: 20px;
    margin: 100px 0 50px 0;
    width: 400px;
    bottom: 50px;
    color: white; }

.footer-cr {
  width: 200px;
  font-size: 14px;
  bottom: 50px;
  margin-top: 100px;
  color: white; }

footer .footer-wrap {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; }

.footer_logo.landing-logo {
  width: 200px;
  bottom: 50px;
  margin-top: 100px; }
  .footer_logo.landing-logo p {
    display: inline-block;
    font-size: 25px;
    color: white; }
  .footer_logo.landing-logo span {
    display: block;
    position: relative;
    font-size: 12px; }

.section_banner_button {
  border-radius: 5px;
  margin: 50px;
  padding: 0 50px;
  font-size: 18px;
  font-weight: 600;
  color: white; }