﻿html {
    height: 100%;
    background-color: hsla(200,40%,30%,.4);
    background-image: url('https://78.media.tumblr.com/cae86e76225a25b17332dfc9cf8b1121/tumblr_p7n8kqHMuD1uy4lhuo1_540.png'),

    

    url('images/po3.png'),
    url('images/devon2.png'),
    url('https://78.media.tumblr.com/8cd0a12b7d9d5ba2c7d26f42c25de99f/tumblr_p7n8kqHMuD1uy4lhuo2_1280.png'), 
        url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png');
    background-repeat: repeat-x;
    background-position: 0 50%, 0 100%, 0 50%, 0 100%, 0 0;
    background-size: 2500px, 800px, 800px, 500px 200px, 1000px, 400px 260px;
    animation: 50s para infinite linear;
    
}

body {
    margin: 0;
}



@keyframes para {
  100% {
    background-position: 
      -5000px 20%,
      -800px 95%,
      500px 50%,
      1000px 100%,
      400px 0;
    }
  }

  img.placeholder{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:20%;
  }

  h1{
        color:red;
        text-align:center;
        font-size:60px;
  }

  .city{
        color:red;
        text-align:center;
        font-size:30px;
        font-weight:bold;
  }

.contact {
    color: red;
    text-align: center;
    margin-bottom:100px;
    font-size:25px;
}



  a {
        color: red;
  }


  /*******************************RESPONSIVE************************************/

   /******iphone 5<*****/

  @media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio:2){

img.placeholder{
        width:100%;
        height:250px;
    }

    h1 {
        font-size: 50px;
    }

}

/******iphone x*****/

  @media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio:3){

img.placeholder{
        width:100%;
        height:450px;
    }

    h1 {
        font-size: 60px;
    }

}


/******ipad*****/
  @media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio:2){

img.placeholder{
        width:80%;
    } 

h1{
    font-size:80px;
}

}

/******galaxy fold*****/
  @media only screen
and (min-device-width: 280px)
and (max-device-width: 653px)
and (-webkit-min-device-pixel-ratio:2){

img.placeholder{
        width:80%;
        height:300px;
    }

    h1 {
        font-size: 50px;
    }

}
