body, html {
  height: 100%;
  margin: 0;
  font-family: 'Arial', 'Helvetica', sans-serif;
}


@media all and (min-width: 960px) {
    body{
        font-size: 50px;
    }
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    body{
        font-size: 25px;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    body{
        font-size: 16px;
    }
 
}



.image-box {
 
  /* Basic background styles */
   background-image: url("../img/bg_light.jpg");
     background-position: center center;
     background-repeat: no-repeat;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Add a transition, just for fun */
  transition: box-shadow .5s ease-out;
}

}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
    color: rgb(30, 65, 138);
}

p1
        { color:rgb(30, 65, 138);
            background-color:#dde9fc;
            font-family: 'Arial', sans-serif;
            line-height: 1.1;
            letter-spacing: 1px; 
            width: 100px;
    height: 100px;
               
}

p2
        { color:rgb(30, 65, 138);
            background-color:#dde9fc;
            text-align:center;
            font-family: 'Arial', sans-serif;
            line-height: 1.1;
            letter-spacing: 1px; 
            width: 100px;
    height: 100px;
               
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

hr {
  margin: auto;
  width: 40%;
}

#demo {
    text-align: center;
    color:rgb(233, 239, 252);
    background-color:rgba(30, 65, 138, 0.77);
    padding:10px;
}

}