/*MAPS */
/* Variables*/
/* Importo una fuente de googlefonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");
/* Importo al proyecto */
@font-face {
  font-family: "JetBrains";
  src: url("JetBrainsMono.ttf"); }

/* Mixin */
.sp-background-img, .sp-color-sky, .sp-background-image {
  background-image: url(../image/estrellas.png); }

/* reseteo de la web con el selector universal*/
* {
  margin: 0;
  padding: 0; }

body {
  background: linear-gradient(to bottom right, #cd7f38 0%, #16161d 15%);
  /* min-height: 100%;     */ }

.sp-family-roboto {
  font-family: "roboto" !important; }

.sp-family-jetbrains {
  font-family: "jetbrains" !important; }

.sp-color-head {
  color: #84c3eb !important; }

.sp-color-cont {
  color: #f0c080 !important; }

.sp-color-sky {
  background-color: #16161d; }

.sp-color-foot {
  color: #000000 !important;
  font-weight: bold; }

.footer__p {
  background-color: #bbb8b8de; }

td, th {
  color: #f0c080 !important; }

.sp-item-link:hover {
  color: #ffffff !important;
  font-weight: bolder;
  text-decoration: underline; }

.sp-background-luna {
  background-color: #bbb8b8;
  background-image: url(../image/suelo.png);
  background-repeat: repeat; }

input:invalid {
  background-color: rgba(255, 251, 0, 0.699); }

/* ================================================================= */
/* ========================= Desktop / Laptop ====================== */
/* ================================================================= */
/*Desktop/laptop [769px -> xxxxpx]*/
@media (min-width: 769px) {
  article iframe {
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #4b4b4b;
    width: 650px;
    height: 450px; }
  .sp-img-sistemaSolar {
    width: 800px;
    height: 450px; }
  p {
    font-family: "jetbrains";
    color: #f0c080;
    font-size: 1.2rem; }
  li p::first-letter {
    font-size: 2.5rem; }
  .ufo {
    position: absolute;
    width: 100%;
    top: 80px; }
  .ufo-animation {
    position: relative;
    width: 100px;
    height: 75px;
    right: 100px;
    animation-name: vuelo;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-duration: 10s;
    animation-delay: 2s; }
  .sp-title {
    font-size: 1.5rem; }
  .main__div__2__form__input__nombre {
    width: 250px;
    display: block; }
  .main__div__2__form__input__mail {
    width: 250px;
    display: block; }
  .main__div__2__form__input__fecha {
    display: block; }
  textarea {
    width: 500px;
    height: 300px; }
  .main__div__2__p-tipDoc {
    margin-bottom: 5px; }
  .main__div__2__input-dni {
    margin-left: 9px; }
  .main__div__2__div {
    display: flex;
    justify-content: left; }
  .main__div__2__form__input__nro-doc {
    display: block; }
  .main__div__2__div__boton {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px; }
  .main__cards-horizontal {
    width: 100%;
    height: 450px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-vertical {
    width: 100%;
    height: 932px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-background-text {
    background-color: #1a1919;
    width: 100%;
    display: flex;
    justify-content: center; }
  .main__cards-text {
    color: #f0c080;
    font-family: "jetbrains";
    font-size: 1rem; }
  .main__bordedr-cards {
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin: 2px;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .sp-cointainer__col3__rocket {
    position: relative;
    flex-basis: 20%; }
  .sp-cointainer__col3__rocket__img {
    position: absolute;
    bottom: -25px;
    left: 40%;
    width: 45px;
    right: 45px;
    z-index: 9999; }
    .sp-cointainer__col3__rocket__img:hover {
      animation-name: despegue;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 2s; }
  #la-constelacion-cygnus {
    content: url("../image/1024w/la-constelacion-cygnus.jpg"); }
  #la-nebulosa-de-la-quilla {
    content: url("../image/1024w/la-nebulosa-de-la-quilla.jpeg"); }
  #los-pilares-de-la-creacion {
    content: url("../image/1024w/los-pilares-de-la-creacion.jpeg"); }
  #la-nebulosa-del-velo {
    content: url("../image/1024w/la-nebulosa-del-velo.jpeg"); }
  #lluvia-de-meteoritos-aurora-boreal {
    content: url("../image/1024w/lluvia-de-meteoritos-aurora-boreal.jpg"); }
  #la-nebulosa-de-la-mariposa {
    content: url("../image/1024w/la-nebulosa-de-la-mariposa.jpeg"); }
  #galaxia-del-sombrero {
    content: url("../image/1024w/galaxia-del-sombrero.jpeg"); }
  #galaxia-color {
    content: url("../image/1024w/galaxia-color.jpg"); }
  #galaxias-espirales {
    content: url("../image/1024w/galaxias-espirales.jpeg"); } }

/* ================================================================= */
/* ============================ Tablet ============================= */
/* ================================================================= */
/*Tablet [427px -> 768px]*/
@media (max-width: 768px) {
  article iframe {
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #4b4b4b;
    width: 350px;
    height: 250px; }
  p {
    font-family: "jetbrains";
    color: #f0c080;
    font-size: 1rem; }
  li p::first-letter {
    font-size: 2rem; }
  .sp-img-sistemaSolar {
    width: 600px;
    height: 300px; }
  .ufo {
    display: none; }
  .sp-title {
    font-size: 1.5rem; }
  .main__div__2__form__input__nombre {
    width: 250px;
    display: block; }
  .main__div__2__form__input__mail {
    width: 250px;
    display: block; }
  .main__div__2__form__input__fecha {
    display: block; }
  textarea {
    width: 400px;
    height: 250px; }
  .main__div__2__p-tipDoc {
    margin-bottom: 5px; }
  .main__div__2__input-dni {
    margin-left: 10px; }
  .main__div__2__form__input__nro-doc {
    display: block; }
  .main__div__2__div {
    display: flex;
    justify-content: left; }
  .main__div__2__div__boton {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px; }
  .main__cards-horizontal {
    width: 100%;
    height: 180px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-vertical {
    width: 100%;
    height: 380px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-background-text {
    background-color: #1a1919;
    width: 100%;
    display: flex;
    justify-content: center; }
  .main__cards-text {
    color: #f0c080;
    font-family: "jetbrains";
    font-size: 0.5rem; }
  .main__bordedr-cards {
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin: 2px;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .sp-cointainer__col3__rocket {
    display: none; }
  #la-constelacion-cygnus {
    content: url("../image/768w/la-constelacion-cygnus.jpg"); }
  #la-nebulosa-de-la-quilla {
    content: url("../image/768w/la-nebulosa-de-la-quilla.jpeg"); }
  #los-pilares-de-la-creacion {
    content: url("../image/768w/los-pilares-de-la-creacion.jpeg"); }
  #la-nebulosa-del-velo {
    content: url("../image/768w/la-nebulosa-del-velo.jpeg"); }
  #lluvia-de-meteoritos-aurora-boreal {
    content: url("../image/768w/lluvia-de-meteoritos-aurora-boreal.jpg"); }
  #la-nebulosa-de-la-mariposa {
    content: url("../image/768w/la-nebulosa-de-la-mariposa.jpeg"); }
  #galaxia-del-sombrero {
    content: url("../image/768w/galaxia-del-sombrero.jpeg"); }
  #galaxia-color {
    content: url("../image/768w/galaxia-color.jpg"); }
  #galaxias-espirales {
    content: url("../image/768w/galaxias-espirales.jpeg"); } }

/* ================================================================= */
/* ============================ Mobile ============================= */
/* ================================================================= */
/*smartphones [xxxpx -> 426px]*/
@media (max-width: 426px) {
  article iframe {
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #4b4b4b;
    width: 270px;
    height: 200px; }
  p {
    font-family: "jetbrains";
    color: #f0c080;
    font-size: 0.8rem; }
  li p::first-letter {
    font-size: 1.5rem; }
  .sp-img-sistemaSolar {
    width: 280px;
    height: 150px; }
  .ufo {
    display: none; }
  .sp-container-col1 {
    display: none; }
  .sp-container-col2 {
    margin-left: 13px; }
  .sp-title {
    font-size: 1rem; }
  .main__div__2__form__input__nombre {
    width: 250px;
    display: block; }
  .main__div__2__form__input__mail {
    width: 250px;
    display: block; }
  .main__div__2__form__input__fecha {
    display: block; }
  textarea {
    width: 300px;
    height: 200px; }
  .main__div__2__p-tipDoc {
    margin-bottom: 5px; }
  .main__div__2__input-dni {
    margin-left: 6px; }
  .main__div__2__div {
    display: flex;
    justify-content: center; }
  .main__div__2__form__input__nro-doc {
    display: block; }
  .main__div__2__div__boton {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px; }
  .main__cards-horizontal {
    width: 100%;
    height: 70px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-vertical {
    width: 100%;
    height: 155px;
    border-style: solid none;
    border-width: 1px;
    border-color: white; }
  .main__cards-background-text {
    background-color: #1a1919;
    width: 100%;
    display: flex;
    justify-content: center; }
  .main__cards-text {
    color: #f0c080;
    font-family: "jetbrains";
    font-size: 0.3rem; }
  .main__bordedr-cards {
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin: 2px;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .sp-cointainer__col3__rocket {
    display: none; }
  #la-constelacion-cygnus {
    content: url("../image/425w/la-constelacion-cygnus.jpg"); }
  #la-nebulosa-de-la-quilla {
    content: url("../image/425w/la-nebulosa-de-la-quilla.jpeg"); }
  #los-pilares-de-la-creacion {
    content: url("../image/425w/los-pilares-de-la-creacion.jpeg"); }
  #la-nebulosa-del-velo {
    content: url("../image/425w/la-nebulosa-del-velo.jpeg"); }
  #lluvia-de-meteoritos-aurora-boreal {
    content: url("../image/425w/lluvia-de-meteoritos-aurora-boreal.jpg"); }
  #la-nebulosa-de-la-mariposa {
    content: url("../image/425w/la-nebulosa-de-la-mariposa.jpeg"); }
  #galaxia-del-sombrero {
    content: url("../image/425w/galaxia-del-sombrero.jpeg"); }
  #galaxia-color {
    content: url("../image/425w/galaxia-color.jpg"); }
  #galaxias-espirales {
    content: url("../image/425w/galaxias-espirales.jpeg"); } }

/* ================================================================= */
/* ======================= Animaciones ============================= */
/* ================================================================= */
@keyframes despegue {
  2% {
    transform: rotate(5deg);
    display: block; }
  4% {
    transform: rotate(0deg);
    display: i; }
  6% {
    transform: rotate(-5deg);
    display: absolute; }
  8% {
    transform: rotate(0deg);
    display: absolute; }
  10% {
    transform: rotate(5deg);
    display: absolute; }
  12% {
    transform: rotate(0deg);
    display: absolute; }
  14% {
    transform: rotate(-5deg); }
  16% {
    transform: rotate(0deg); }
  18% {
    transform: rotate(5deg); }
  20% {
    transform: rotate(5deg); }
  22% {
    transform: rotate(0deg); }
  24% {
    transform: rotate(-5deg); }
  26% {
    transform: rotate(0deg); }
  28% {
    transform: rotate(5deg); }
  30% {
    transform: rotate(0deg); }
  32% {
    transform: rotate(-5deg); }
  34% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes vuelo {
  2% {
    left: -100px; }
  8% {
    left: 50px; }
  10% {
    transform: rotate(-5deg); }
  12% {
    transform: rotate(0deg); }
  14% {
    transform: rotate(5deg); }
  16% {
    transform: rotate(0deg); }
  18% {
    transform: rotate(-5deg); }
  20% {
    transform: rotate(0deg); }
  22% {
    transform: rotate(5deg); }
  24% {
    transform: rotate(0deg); }
  26% {
    width: 75px;
    height: 50px; }
  30% {
    width: 50px;
    height: 25px; }
  100% {
    width: 0px;
    height: 0px; } }