body, html {
    margin: 0px;
    font-family: 'Roboto', Helvetica, sans-serif;
    background-color: #eeeeee;
}

/* NAVIGATION */

/* Style the navigation bar */
.navbar {
    width: 100%;
    background-color: #ffffff;
    overflow: auto;
    filter: drop-shadow(0px 0px 4px #8e8e8e);
}
  
  /* Navbar links */
.navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 17px;
}
  
  /* Navbar links on mouse-over */
.navbar a:hover {
    background-color: #f2f2f2;
}
  
  
  /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
  @media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
    }
  }


  
/* GENERAL */

article {
    margin-bottom: 50px;
}

.page {
    width: 60%;
    margin: auto;
}

.shadow-box {
    padding: 2%;
    background-color: white;
    filter: drop-shadow(0px 0px 4px #8e8e8e);
}

.shadow-box.rounded {
    border-radius: 10px;
}





.ul {
    text-decoration: none;
    color: black;
    border-bottom: 5px solid #C3B1E1;
    padding:0.2%;
}

.ul.normal {
    color: black;
    border-bottom: 3px solid #C3B1E1;
    padding:0%;
}

.ul:hover {
    color: white;
    background-color: #C3B1E1;
}

/* OTHER */

.centred {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

h1 {
    font-size: 30pt;
}

footer {
    /* width:100%; */
    background-color: white;
    color:rgb(71, 71, 71);
    filter: drop-shadow(0px 0px 4px #8e8e8e);

    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
}

.footer-column {
    padding: 2%;
}