* {
   box-sizing: border-box;
}


body {
   background-color: black;
   color: white;
   width: 100%;
}


/* ---------- Modal ---------- */
/* ---------- Modal ---------- */
/* ---------- Modal ---------- */
.modal {
   display: none;
   /* hidden by default */
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(0, 0, 0, 0.92);
   align-items: center;
   justify-content: center;
   padding: 24px;
}

.modal.is-open {
   display: flex;
}

.modal-img {
   max-width: 90vw;
   max-height: 85vh;
   display: block;
   margin: 0 auto;
}

.modal-caption {
   margin-top: 12px;
   text-align: center;
   color: #ccc;
   font-size: 0.95rem;
}

.modal-close {
   position: absolute;
   top: 16px;
   right: 20px;
   font-size: 2rem;
   line-height: 1;
   border: 0;
   background: transparent;
   color: #fff;
   cursor: pointer;
}

/* Prevent scroll when modal is open */
.body-lock {
   overflow: hidden;
}

/* ---------- Modal ---------- */
/* ---------- Modal ---------- */
/* ---------- Modal ---------- */





#roba {
   position: fixed;

}

.title {
   color: rgb(255, 69, 0);
   text-align: right;
   /* padding-right: 100px; */
   font-family: 'Amatic SC';
   font-size: 5.5em;
   font-weight: normal;
   margin: 30px 15px 0px 0px;
   z-index: 5;
   position: relative;
   top: 8px;
   right: 100px;
}


#the-o1 {
   position: relative;
   top: 4px;

}

#the-i1 {
   position: relative;
   right: 97px;
   top: 41px;
   font-size: 2.4em;
   font-weight: 100;
}


#dos {
   position: relative;
   bottom: 20px;

}



#phi {
   color: blue;
   font-weight: bold;
   font-size: 200px;
   position: relative;
   top: 20px;
}

#questions {
   display: none;
}

#container {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   /* border: 1px solid orange */
}

#ittyStar {
   display: block;
   width: 72vw;
   position: relative;
   bottom: 300px;
   z-index: -1;
}

#MammaMia_cigar {
   position: absolute;
   top: 1280px;
   left: 50px;
   border: 1px solid red;
}

#estrellas-1-container {
   /* border: 1px solid blue; */
   display: flex;
   flex-flow: row wrap;
   padding: 10px;
   justify-content: space-evenly;
   position: relative;
   top: -400px;

}

.estrella {
   object-fit: contain;
   /* border: 1px solid red; */
   max-height: 200px;
   width: auto;

}

#water-remote-11 {
   position: relative;
   top: -30px;
   left: 270px;
}

#estrellas-3-container {
   display: flex;
   flex-flow: row wrap;
   justify-content: left;
   width: 40%;
   position: relative;
   top: -400px;
   left: 930px;
   z-index: -1;
   gap: 15px;
}

.estrellas-3 {

   width: auto;
   height: 100px;
}

#setting-earth-1-container {
   width: 100%;
   position: relative;
   top: -390px;
   display: block;
   text-align: center;
   /* border: 1px solid blue; */
}


#georgia-bite {
   width: 60%;
   position: relative;
   top: -290px;
   left: 380px;
   opacity: .8;
   border: 5px solid rgb(252, 252, 228);
   padding: 10px;
   border-radius: 4px;
}

/* #setting-earth-1 {


   border: 1px solid grey;

} */


/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/

@media (max-width: 768px) {

   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   #the-o1 {
      position: relative;
      top: 4px;

   }

   #the-i1 {
      position: relative;
      right: 53px;
      top: 26px;
      font-size: 2.4em;
      font-weight: 100;
   }

   #title {
      position: relative;
      top: -20px;
      left: -90px;
      right: auto;
      text-align: center;
      padding-right: 0;
      padding-top: 0px;
      font-size: 3em;
      margin: -30px 0px 0px 0px;
      width: 100%;
      color: rgb(255, 69, 0);
      /* border: 2px solid green; */

   }

   #questions {
      display: block;
      position: relative;
      top: -380px;
      left: 0px;
      width: 90vw;
   }

   #ittyStar {
      display: block;
      width: 100vw;
      position: relative;
      bottom: 80px;
      left: 30px;
      z-index: -1;
      /* border: 2px solid white; */
   }

   #MammaMia_cigar {
      width: 80vw;
      position: relative;
      top: 20px;
      left: -10px;
      border: 1px solid red;
      opacity: 0.8;
   }

   #estrellas-1-container {
      position: relative;
      top: 0px;
      border: 1px solid blue;
      display: flex;
      flex-flow: row wrap;
      padding: none;
      margin-top: none;
      width: 100%;
      justify-content: space-evenly;
   }


   .estrella {
      border: 1px solid red;
      max-height: 100px;

   }

   #water-remote-11 {
      position: relative;
      top: 0px;
      left: 0px;
   }

   #estrellas-3-container {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      /* height: 300px; */
      width: 100%;
      position: relative;
      top: 0px;
      left: 0px
   }

   .estrellas-3 {
      height: 40px;
      border: 1px solid blue;
      object-fit: contain;
   }

   #georgia-bite {
      width: 90%;
      position: relative;
      top: -80px;
      left: 20px;
      opacity: .8;
      border: 5px solid rgb(252, 252, 228);
      padding: 10px;
      border-radius: 4px;
   }
}