@media screen and (min-width: 310px) {
#text1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 1.3em;
  left: 330px;
  top: 10px;
width:30%;
}

#text2 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 1em;
  left: 330px;
  top: 190px;
width:25%;
}
}

@media screen and (min-width: 380px) {
#text1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 1.6em;
  left: 330px;
  top: 10px;
width:38%;
}

#text2 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 1.1em;
  left: 330px;
  top: 160px;
width:34%;
}
}

@media screen and (min-width: 450px) {
#text1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 26px;
  left: 330px;
  top: 10px;
width:43%;
}

#text2 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 17px;
  left: 330px;
  top: 160px;
width:40%;
}
}



@media screen and (min-width: 590px) {
#text1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 30px;
  left: 330px;
  top: 10px;
width:45%;
}
#text2 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 18px;
  left: 330px;
  top: 170px;
width:45%;
}

}

@media only screen and (min-width: 768px) {
#text1 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 28px;
  left: 50px;
  top: -10px;
width:55%;
}

#text2 {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 18px;
  left: 50px;
  top: 160px;
width:55%;
}

}