html{
  overflow-x: hidden;
  overflow-y: auto;
}



body {
  background-image: url("./assets/background.png");
  background-color: rgb(0,0,0);
  background-repeat: repeat repeat-x;
  background-origin: content-box;
  background-position: center top;
  /*background-attachment: fixed;*/
  background-size: cover;
  width: 100%;
  font-family: 'Dia', helvetica, arial, sans-serif;
  font-family: 'Gilda Display', serif;
  font-family: 'Manrope', sans-serif;
  font-family: 'Noto Sans Mono', monospace;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 0.8vw;  
  color: none;
  }

header{
  background-color: black;
  width: 100%;
  padding: none;
  left: 0%;
}

/* reloj */
.clock {
  position: absolute;
  padding: 2%;
  align-items: center;
  top: 0%;
  left: 45%;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  color: white;
  font-size: .85vw; 
  font-family: 'Dia', helvetica, arial, sans-serif;
  background-color: none;
}

.android{
  visibility: hidden;
}

.seccion {
  position: absolute;
  padding: 2%;
  align-items: center;
  top: -1%;
  left: 90%;
  width: 50%;
  height: 100%;
  z-index: 1000000000;
  overflow: hidden;
  color: white;
  font-size: 1vw; 
  font-family: 'Manrope', sans-serif;
  background-color: none;
}

/* banner ID */
.banner {
  float: left;
  padding-left: 1%;
  position: fixed;
  top: 0%;
  left: 0%;
  height: 100%;
  max-height: 100%;
  z-index: 100000000;
  background-color: black;
}     

.banner:hover {
  filter: drop-shadow(0 0 .7rem rgb(128, 0, 255));
}

.hover {
  pointer-events: none;
  display: inline-block;
  position: absolute;
}   

.ID {
  display: none;
  width: 70%;
  z-index: 100000;
}

.tituloprojecto:hover+.ID  {
  display: inline-block;
  position:absolute;
  top: 5%;
  left: 420%;
  width: fit-content;
  max-height: 100%;
  z-index: 100000;
}

.JR:hover+.ID  {
  display: inline-block;
  position:absolute;
  top: 35%;
  left: -10%;
  width: fit-content;
  max-height: 100%;
  z-index: 100000;
}

/* project */








body {
  margin: 0;
  padding: 0;
}













/*
.parallax {
  perspective: 100px;
  height: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
}

.parallax__layer{
  position: sticky ;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
*/

.infoo {
  visibility: hidden;
}

.android {
  visibility: hidden;
}


.parallax__layer__0{
  width: auto;
  position: absolute;
  z-index: 10000;
}


.parallax__layer__1{
  perspective: 120px;
  width: auto;
  position: absolute;
  bottom: -900vh;
}


.parallax__layer__2{
  perspective: 100px;
  width: auto;
  position: absolute;
  top: 900%;
  z-index: 1000;
}


.parallax__layer__3{
  width: auto;
  position: absolute;
  top: 60%;
  z-index: -10;
}








/*

.overlay1 {
  position: absolute;
  top: 420%;
  left: -20%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}

.overlay2 {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 10;    
}


.overlay3 {
  position: fixed;
  top: 220%;
  left: 20%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay4 {
  position: absolute;
  top: 250%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay5 {
  position: absolute;
  top: 560%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay6 {
  position: absolute;
  top: 800%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}

.overlay7 {
  position: absolute;
  top: 800%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}

.overlay8 {
  position: absolute;
  top: 900%;
  left: -27%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay10 {
  position: absolute;
  top: 32%;
  left: 5%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;   
}


.overlay11 {
  position: absolute;
  top: 400%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay12 {
  position: absolute;
  top: 700%;
  left: 5%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}



.overlay13 {
  position: absolute;
  top: 1200%;
  left: 22%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;   
  transform: rotate(90deg);
}

.overlay14 {
  position: absolute;
  top: 205%;
  left: 33%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}


.overlay15 {
  position: absolute;
  top: 720%;
  left: 10%;
  width: 100%;
  height: 100%;
  padding: 2%;
  z-index: 1000;    
}
*/

.videos {
  position: absolute;
  top: 90%;
  left: 40%;
  width: 100%;
  height: 100%;
  z-index: 1000; 
  line-height: 12vh;   
}



.syncopate-regular {
  font-family: "Syncopate", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*
.syncopate-bold {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
}
  */

.about{
  display: inline-block;
}



h2{
  font-family: "Syncopate", sans-serif;
  font-size: 0.7vw;
  color: rgba(0, 0, 0, 0.7);
  background-color: yellow;
  text-align: center;
  line-height: 1.5;
  position: fixed;
  padding: 1%;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: rgba(0, 0, 255, 1) -100px 100px 200px; 
  left: 73%;
  bottom: 0px;
  right: auto;
  z-index: 10000000000;
  
}

/* info box link style */
h2 a{
  color: red;
}

h2 a:visited{
  color: red;
}

h2 a:hover {
  color: red;
}

h2 a:active {
  color: red;
}

.lands {
  position: absolute;
  max-width: 60%;
  width: 60%;
  height: 60%;
  padding: 5%;
  top: 10%;
  left: 20%;
  z-index: 1000000000;  
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}




h2{
  font-family: "Syncopate", sans-serif;
  font-size: 0.7vw;
  color: rgba(0, 0, 0, 0.7);
  background-color: yellow;
  text-align: center;
  line-height: 1.5;
  position: fixed;
  padding: 1%;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: rgba(0, 0, 255, 1) -100px 100px 200px; 
  left: 73%;
  bottom: 0px;
  right: auto;
  z-index: 10000000000;
  
}

/* info box link style */
h2 a{
  color: red;
}

h2 a:visited{
  color: red;
}

h2 a:hover {
  color: red;
}

h2 a:active {
  color: red;
}


/* Dropdown Button */
.dropbtn {
  background-color: transparent;
  color: grey;
  padding-left: 5px;
  font-size: 16px;
  height: fit-content;
  max-height: 30px;
  position: inherit;
  border: none;
  border-radius: 8px;
  font-size: 1.5vw;
  z-index: 1000000000;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: none;
  font-family: 'Manrope', sans-serif;
  color: #000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10000000000;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  font-family: 'Manrope', sans-serif;
  padding-left: 20px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: white;
  font-family: 'Manrope', sans-serif;
  }
  


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  color: black;
  font-family: 'Playfair Display', serif;
  text-shadow: 0 0 3px #000;
  }

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: white;
  /*font-family: 'Manrope', sans-serif;*/
  text-shadow: 0 0 8px #000;
}

/* selected link */
a:active {
  color: black;
  font-family: 'Manrope', sans-serif;
}





.marquee {
  margin: 20px;
  max-width: 90%;
  height: 5vw;
  width: 100%;
  z-index: 1000;
  font-family: "miniTRAIL";
  font-size: 3vw;
  text-align: center;
  background-color: none;
  color: azure;
  overflow: hidden;
  position: sticky;
  top: 300%;
  left: 20%;
  z-index: 100;
}


.marquee div {
  display: flex;
  width: 210%;
  height: 5vw;
  position: absolute;
  overflow: hidden;
}

.marquee span {
  float: left;
  width: 90%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}




footer{
display: none;
}


footer marquee{
  display: none;
}
 







/* Responsive styles 
@media only screen and (max-width: 760px) 
*/
@media (width <= 760px) {

 html{
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #ddd;
 }

 body{
  background-image: url('./assets/Android\ Compact\ -\ 1.png');
  background-repeat: repeat repeat;
  background-origin: content-box;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
 }

 .clock {
  font-size: 2vh; 
  left: 40%;
  top: 1%;
  position: fixed;
  }

  .parallax{
    visibility: hidden;
  }

  .seccion {
    font-size: 1.7vh; 
    position: fixed;
    left: 75%;
    }

  
  .dropbtn {
  top: -1%;
  position: fixed;
  }

  .dropdown-content {
    font-size: 0px;
  }


  .banner {
    display: none;
  } 

.lands{
  visibility: visible;
  position: fixed;
  left: 20vh;
  bottom: 0;
  min-width: 15%;
  min-height: 15%;
  width: 15%;
  height: 15%;
  translate: center center;
}




.video1{
  visibility: hidden;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  /*transform: rotate(90deg);*/
}

video {
  /** Simulationg background-size: cover */
  object-fit: cover;
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;
}

h2{
  visibility: hidden;
}


footer{
  display: inline-block;
  width: 100%;
  padding: 15px;
  position: fixed;
  bottom: 0%;
  left: 0%;
  z-index: 1000000;
}


footer marquee{
  display: flex;
  border-collapse: collapse;
  position: fixed;
  bottom: 0%;
  left: 0%;
  z-index: 1000;
  padding-top: none;
	padding: 20px;
	text-align: center justify;
  background-color: rgb(116, 0, 248);;
	border: none;
    color: rgb(0, 0, 0);
    font-size: 2vh; 
    font-family: 'Dia', helvetica, arial, sans-serif;
    white-space: pre;
    line-height: 1vh;
    letter-spacing: auto;
}
 

}