/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body,
html {
  height: 100%;
  background-color: whitesmoke;
  /* Add a font */
  font-family: Arial, Helvetica, sans-serif;
  /* Set the font-size to 20 pixels */
  font-size: 20px;
}

.bgimg {
  /* Background image */
  background-image: url('../images/runia-logo-violett.png');
  height: 40%;
  width: 40%;
  /* 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;
}

/* Position text in the top-left corner */
.topleft {}


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

/* Position text in the middle */
.middle {
  position: inherit;
  text-align: center;
  width: 90%;
  margin: auto;
}

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

/* logo styling */
#logo {
  width: 10em;
  align-content: center;
}

@media only screen and (min-width: 768px) {
  .middle {
    top: 20%;
    width: 60%;
    position: relative;
  }
}