/* ***************************************** CONTAINERS *****************************************/

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:0px auto;

  font-family: helvetica, arial, sans-serif;
  color: #222;

  max-width: 40rem;
  margin-bottom: 3rem;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  margin-left: 1rem;
  margin-right: 1rem;
}

/* ***************************************** HEADINGS *****************************************/

/* default */
h1 {font-size: 2.5rem; 
    background-color: #222;
    color: #fff;
    border-radius: .1rem;
    padding-left: 0.5rem; 
    padding-right: 0.5rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* large screen */
@media (min-width: 30rem) {
    h1 {
        font-size: 4.5rem;
        font-weight: 600;
        padding-left: 2rem;
        padding-right: 2rem;
        letter-spacing: .1rem;
        margin-bottom: 1.2rem;
    }

    h2 {
       font-size: 2rem;
       margin-bottom: 1.2rem;
       text-align: center;
   }
}

/* ***************************************** IMAGES *****************************************/

/* small images showing the different masks */
.imagerow > img {
  width: 7rem;
  max-width: 20vw; /* for smaller devices */
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

/* BMBF logo */
.imgbmbf {
  width: 15rem;
}


/* ***************************************** OTHER *****************************************/


p {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    text-align: justify;
}


ul {
   text-align: left;
}