.bg-page{
  padding: 12px 25px;
  width: 50%;
  margin-left: 25%;
  margin-top: 15%;
  background-color: rgba(0,0,0,0.4);
}
body{
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  height: 100%;
  height: -moz-available;
  height: -webkit-fill-available;
  height: fill-available;
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.center, .center-align {
  text-align: center;
}
h4.center{
  font-family: 'Cormorant Garamond', serif;
  font-size: 105px;
  color: white;
  font-weight: 700;
}
p.center{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  color: white;
  font-style: italic;
}
.bottom{
  position: absolute;
  bottom: 0 !important;
  background-color: black;
  width: 100%;
  color: white;
  height: max-content;
  padding: 0;
}
.bottom p{
  padding: 0;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media only screen and (max-width: 768px) {
  body{
    background-image: url("../img/bg-mobile.jpg");
  }
  .bg-page{
    margin-left: 15%;
    margin-top: 40%;
    width: 70%;
  }
  h4.center{
    font-size: 70px;
  }
  p.center{
    font-size: 14px;
  }
}
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }