/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
  height: 100%;
  margin: auto;
  font-size:25px;
}

h1 {
    font-size: 2.3em;
}
h2 {
    font-size: 1.875em;
}
p {
    font-size: 1em;
}

 @media screen and (max-width: 768px) {
 body {
font-size: 0.9em;
}
}
 @media screen and (max-width: 640px) {
 body {
font-size: 0.8em;
}
}
 @media screen and (max-width: 480px) {
 body {
font-size: 0.6em;
}
}
@media screen and (max-width: 390px) {
body {
font-size: 0.5em;
}
p {
  font-size: 1.2em;
}
}

.bgimg {
  /* Background image */
  background-image: url("images/background.jpeg");
  /* Full-screen */
  height: 100%;
  /* Center the background image */
  background-position: center;
  /* Scale and zoom in the image */
  background-size: cover;
  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  position: relative;
  /* Add a white text color to all elements inside the .bgimg container */
  color: white;
  /* Add a font */
  font-family: Arial, "Courier New", Courier, monospace;
  /* Set the font-size to 25 pixels */
  text-shadow: 1px 1px 2px black;
}

/* Position text in the top-left corner */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

/* Position text in the bottom-left corner */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

/* Position text in the middle */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Style the <hr> element */
hr {
  margin: auto;
  width: 40%;
}

a {
  color: inherit;
}