main 
{
   background-image: url("../images/gemeenteZaltbommelCover.webp");
   /*
      make the background image not repeat itself to fill up the empty space
      and instead resize the image to make it fill the whole main
   */
   background-repeat: no-repeat;
   background-size: 100vw var(--main-height);
}

h2#coverText 
{
   position: unset;
}

article 
{
   align-items: center;
   display: flex;
   flex-direction: column;

   p 
   {
      font-size: 15px;
      width: 60%;
   }
}

/* the welcome popup */
dialog
{
   position: fixed;
   bottom: var(--footer-height);
   left: calc(100vw - 224px);
   width: 220px;
   margin: 0px;
   padding: 0px;
   height: 50px;
   display: block;
   border: 2px solid #fff;
   background-color: #161320;
   border-radius: 8px;

   /* apparently you can nest css like this, found this out recently */
   button
   {
      border: none;
      background: none;
      width: 100%;
      height: 100%;
   }
}