/**yosoloqueriajugar.com
*/


body {background-color: #000;
color: white;}

a:link {
  color: #FFF;
}

  #info {
    z-index:1;
position: absolute;
background-color:;
    margin-top:-15px;
}
#zetha {z-index:3;
  position: absolute;
left: 20px;
top: 10px;
}

.img-fluid {
max-width: 100%;
height: auto;
}

@media screen and (min-width:1px) and (max-width:320px) {
  
#principal {
width: 240px;
margin: auto;
}

#info {
float:left;
min-width: 200px;
padding-top: px;
}
    #zetha {

}

#retrato {
}
}

@media screen and (min-width:321px) and (max-width:354px) {
#principal {
width: 320px;
margin: auto;
}

#info {background-color:;
float:left;
width: 300px;
}
  
#zetha {
width: 250px;
float:left;
}

#retrato {

}
}

@media screen and (min-width:355px) and (max-width:403px) {
  #principal {
width: 340px;
margin: auto;
}
  #info {
float:left;
width: 340px;
}
  
  #zetha {
width: 300px;
float:left;
}
#retrato {
}
}

@media screen and (min-width:404px) and (max-width:760px) {
  #principal {
width: 390px;
margin: auto;
}
  #info {
float:left;
width: 390px;
}
  
  #zetha {
width: 300px;
float:left;
}
#retrato {
  margin: auto;

}
}

@media screen and (min-width:761px) and (max-width:1100px) {

  #principal {
width: 800px;
margin: auto;
}
  #info {
float:left;
width: 800px;

}
#retrato {

}
}
@media screen and (min-width:1101px) and (max-width:5000px) {
  #principal {
width: 950px;
margin: auto;
}
  #info {
width: 950px;
float:left;
}
#retrato {

}
}