* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "Americana Std Bold";
  src: url(../fonts/AmericanaStdBold.ttf);
}
html {
  font-size: 62.5%;
}
body {
  /* background: #11111e; */
  background: #121120;
  /* border: 0.3rem solid #f2cca2; */
  font-family: Americana Std Bold, Helvetica, sans-serif;
}

.yellow-border {
  margin: 2.2rem 2.2rem;
  border: 0.1rem solid #f2cca2;
}

.video {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo {
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 10rem;
  margin-top: 2rem;
  margin-left: 2rem;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2rem;
}

#moreInfo,
.download {
  margin: 2rem;
}

button {
  padding: 0.5rem 3rem;
  background: #f2cca2;
  border: none;
  border-radius: 5%;
  color: rgb(0, 0, 0);
  font-size: 2.4rem;
  cursor: pointer;
  font-family: Americana Std Bold, Helvetica, sans-serif;
  /* text-align: center;
  vertical-align: middle; */
}

#downloadVideo,
#download-info {
  padding-top: 1rem;
}

.modal {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #ffffff;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 2rem;
  border: 0.5rem solid #f2cca2;
  width: 50%; /* Could be more or less, depending on screen size */
  font-size: 1.8rem;
}

h2 {
  color: rgb(26, 46, 59);
  letter-spacing: 0.05rem;
  line-height: 1.33333;
  font-size: 2.125rem;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  line-height: 2.5rem;
  font-size: 3.125rem;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.downloadPanel {
  padding: 2.5625rem;
  background-color: #fff;
  font-size: 0.875rem;
  overflow: auto;
  border-radius: 0 0 0.1875rem 0.1875rem;
}

.donwloadContent {
  position: relative;
}

.downloadContentIndividual {
  border-bottom: 0.0625rem solid #e3e8e9;
  height: 6.4375rem;
  display: flex;
}

.contentName {
  display: flex;
  font-weight: 700;
  color: #1a2e3b;
  width: 30%;
  font-size: 1.74rem;
  padding-top: 1rem;
  justify-content: flex-start;
  align-items: center;
}

.contentSizeDownload {
  width: 70%;
  text-align: right;
  padding: 1.8rem 0;
  display: inline-block;
  text-decoration: none;
}

.contentSize {
  color: #8a9599;
  margin-right: 0.625rem;
  font-size: 1.74rem;
}

.contentDownload {
  margin-right: 0px;
  width: auto;
  position: relative;
  outline: currentcolor none 0px;
  border-width: 0.0625rem;
  border-style: solid;
  transition: all 0.1s ease-in-out 0s;
  text-align: center;
  -moz-box-align: center;
  -moz-box-pack: center;
  justify-content: center;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  min-height: 2rem;
  padding: 0px 0.625rem;
  font-size: 1.5rem;
  border-radius: 0.1875rem;
  background-color: #f2cca2;
  border-color: rgb(238, 241, 242);
  color: rgb(73, 69, 69);
  display: inline-flex;
  margin: 0px 0px 0.5rem;
  margin-right: 0px;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: 0.1px;
  align-items: center;
  min-width: 4.25rem;
  line-height: 2.14286;
}

.contentDownloadText {
  display: inline-flex;
  width: 100%;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  text-decoration: none;
  padding-top: 0.35rem;
}

a {
  text-decoration: none;
}

a:visited {
  color: #f2cca2;
}

.contentDownloadButton {
  z-index: 1;
  left: -0.25rem;
  position: absolute;
  width: calc(100% + 0.5rem);
  height: calc(100% + 0.5rem);
  pointer-events: none;
  border: 0.0625rem solid rgba(243, 67, 24, 0);
  transition: border 150ms ease 0s, transform 150ms ease 0s;
  top: -0.25rem;
  transform: scale(0.94);
  border-radius: 0.375rem;
}

.night-three {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  /* grid-template-rows: repeat(8, 6rem); */
  grid-row-gap: 0.75rem;
  grid-template-areas:
    "location location"
    "sunset-sunrise moon-info"
    "visible-planets visible-planets"
    "highlighted-cons highlighted-cons"
    "cons-set-one cons-set-one"
    "cons-set-two cons-set-two"
    "big-dip-expl big-dip-expl"
    "how-it-works how-it-works"
    "share share"
    "social-links social-links"
    "url-link url-link";
}

.night-one {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  /* grid-template-rows: repeat(8, 6rem); */
  grid-row-gap: 0.75rem;
  grid-template-areas:
    "location location"
    "sunset-sunrise moon-info"
    "visible-planets visible-planets"
    "highlighted-cons highlighted-cons"
    "cons-set-two cons-set-two"
    "big-dip-expl big-dip-expl"
    "how-it-works how-it-works"
    "share share"
    "social-links social-links"
    "url-link url-link";
}

.title {
  color: #f2cca2;
  font-size: 2.5rem;
}

.value {
  color: rgb(239, 239, 239);
  font-size: 2.5rem;
  padding-left: 1rem;
}

/* location */
.location {
  grid-area: location;
  width: 75%;
  text-align: center;
  align-self: center;
  justify-self: center;
}

/* sunset time & sunrise time */
.sunset-sunrise {
  grid-area: sunset-sunrise;
  align-self: center;
  justify-self: center;
  line-height: 3.5rem;
}

/* moon phase & moon illumination */
.moon-info {
  grid-area: moon-info;
  align-self: center;
  justify-self: center;
  line-height: 3.5rem;
}

/* visible planets */
.visible-planets {
  grid-area: visible-planets;
  align-self: center;
  justify-self: center;
  text-align: center;
}

/* highlighted constellations */
.highlighted-cons {
  grid-area: highlighted-cons;
  align-self: center;
  justify-self: center;
}

/* constellations set 1 */
.cons-set-one {
  grid-area: cons-set-one;
  align-self: center;
  justify-self: center;
}

/* constellations set 2 */
.cons-set-two {
  grid-area: cons-set-two;
  width: 65%;
  padding-top: 0.75rem;
  align-self: center;
  justify-self: center;
}

/* Bid Dipper  */
.big-dip-expl {
  grid-area: big-dip-expl;
  align-self: center;
  justify-self: center;
  padding-bottom: 2rem;
}

/* how it works */
.how-it-works {
  grid-area: how-it-works;
  width: 65%;
  align-self: center;
  justify-self: center;
  padding-bottom: 2rem;
}

.share {
  grid-area: share;
  justify-self: center;
}

.share-text {
  color: #ffffff;
  font-size: 1.5rem;
}

.social-links {
  grid-area: social-links;
  justify-self: center;
  align-self: center;
}

.facebook-icon {
  width: 7rem;
  background-color: #f2cca2;
}

.url-link {
  grid-area: url-link;
  align-self: center;
  justify-self: center;
  padding-bottom: 2rem;
  color: #f2cca2;
  font-size: 2.3rem;
}
.double {
  display: flex;
  justify-content: space-between;
}

.left {
  padding-left: 25rem;
}

.right {
  padding-right: 25rem;
}

.const {
  color: rgb(239, 239, 239);
  font-size: 2rem;
  text-align: center;
}

#bigDip {
  color: rgb(239, 239, 239);
  font-size: 1.5rem;
  text-align: center;
}

.explanation {
  color: rgb(200, 200, 200);
  font-size: 1.75rem;
  text-align: center;
}

.hidden {
  display: none;
}

@media (max-width: 1350px) {
  .night-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-one cons-set-one"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }

  .night-one {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }
  .left {
    padding-left: 0rem;
  }

  .right {
    padding-right: 0rem;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 50%;
  }
  .night-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-one cons-set-one"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }
  .night-one {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }
  .left {
    padding-left: 0rem;
  }

  .right {
    padding-right: 0rem;
  }
}

@media (max-width: 375px) {
  html {
    font-size: 50%;
  }
  .night-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-one cons-set-one"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }
  .night-one {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    /* grid-template-rows: repeat(8, 6rem); */
    grid-row-gap: 0.85rem;
    grid-template-areas:
      "location location"
      "sunset-sunrise sunset-sunrise"
      "moon-info moon-info"
      "visible-planets visible-planets"
      "highlighted-cons highlighted-cons"
      "cons-set-two cons-set-two"
      "big-dip-expl big-dip-expl"
      "how-it-works how-it-works"
      "share share"
      "social-links social-links"
      "url-link url-link";
  }
  .title {
    color: #f2cca2;
    font-size: 2rem;
  }

  .value {
    color: #ffffff;
    font-size: 2rem;
    padding-left: 1rem;
  }

  .left {
    padding-left: 0rem;
  }

  .right {
    padding-right: 0rem;
  }
}




.vimeo_loader {display: flex;align-items: center;justify-content: center;}
.error_messege {font-size: 14px;color: red;}