html, body { height: 100%; width: 100%; }

              h1 {
            font-family: 'Roboto', sans-serif;
        font-size: 4.2vw;
        margin-left:0px;
       }
        
        p {
            font-family: 'Roboto', sans-serif;
            font-size: 1.15em;
            line-height: 130%;
            padding-left: 80px;
            padding-right: 80px;
           }
        
          img {
                max-width: 100%;
                height: auto;
          }
          
        img.title {
                max-width: 70%;
                height: auto;
            padding-bottom: 15%;
          }

        div {
  display: inline-block;
  vertical-align: top;
  width: 47%;
  height: auto;
  margin: 1%;
}

div.container {width: 100%;}
             


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 

{
img.title {
                max-width: 50%;
                height: auto;
            padding-bottom: 5%;
          }
    body {font-size: 13px;}
     p {
            padding-left: 0px;
            padding-right: 0px;
           }
    div {
  vertical-align: top;
  width: 94%;}
}

    
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)


{
img.title {
                max-width: 50%;
                height: auto;
            padding-bottom: 5%;
          }
    
    body {font-size: 13px;}
     p {
            padding-left: 0px;
            padding-right: 0px;
           }
    div {
  width: 94%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) 
    

{
    body {font-size: 14px;}
img.title {
                max-width: 50%;
                height: auto;
            padding-bottom: 5%;
          }
    p {
            padding-left: 40px;
            padding-right: 40px;
           }
        div {
  width: 94%;}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) 

{
    body {font-size: 14px;}
    img.title {
                max-width: 70%;
                height: auto;
            padding-bottom: 10%;
          }
    p {
            padding-left: 50px;
            padding-right: 50px;
           }
    div {
  width: 47%;}

}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 

{
    body {font-size: 17px;}
         .grid-container {
         grid-template-columns: 50% 50%;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1900px) 

{
    body {font-size: 19px;}
         .grid-container {
         grid-template-columns: 50% 50%;}
}