body{
    font: 110%/1.5 Lucida;
    color: rgb(138, 40, 147);
    background-image: url(Photos/trees\ background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

#wrap{
    width: 90%;
    margin: 0 auto;
    overflow: auto;
}

h1, h2, h3{
    text-align: center;
    margin: 5%;
}

h1, h2{
  text-shadow: 0.5px 0.5px rgb(60, 22, 64);
}

p{
  font-size: 200%;
  text-align: center;
}

img{
  width: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0%;
}

#media{
  width: 100%;
  height: auto;
  margin: auto;
}

#media1{
  float:left;
  margin-left: 35%;
}

#media2{
  float: right;
  margin-right: 35%;
}

#media img{
  height: 8vh;
  width: auto;
  float: left;
  text-align: center;
}



/*---media query smaller than 768---*/
@media screen and (max-width: 768px){

    h1{
      margin-top: 0;
    }
  
    h2{
      font-size: 150%;
    }

    p{
      font-size: 150%;
    }

    img{
      width: 35%;
    }

    #media img{
      height: 7vh;
      width: auto;
    }

    #media1{
      margin-left: 30%;
    }

    #media2{
      margin-right: 30%;
    }

}


/*---media query smaller than 640---*/
@media screen and (max-width: 640px){

  h1{
    font-size: 170%;
  }

}



/*---media query smaller than 588---*/
@media screen and (max-width: 588px){

  #media1{
    margin-left: 25%;
  }

  #media2{
    margin-right: 25%;
  }

}



/*---media query smaller than 425---*/
@media screen and (max-width: 425px){

  h1{
    font-size: 150%;
  }

  h3{
    font-size: 100%;
  }

  h2{
    font-size: 100%;
  }

  p{
    font-size: 100%;
  }
  
  #media1{
    margin-left: 20%;
  }

  #media2{
    margin-right: 20%;
  }

}