@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,900');

html,
    body {
      margin: 0;
      padding: 0;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 300;
    }

    section,
    footer {
      padding-left: 1em;
      padding-right: 1em;
    }

    .background-grey {
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .background-grey::before {
        content: "";
        position: absolute;
        top: -20px;
        left: -20px;
        width: calc(100% + 40px);
        height: calc(100% + 40px);
        background: url('background_small.jpeg') no-repeat center center;
        background-size:cover;
        filter: brightness(0.4) blur(5px);
        z-index: -1;

        -webkit-backface-visibility: hidden;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      
    }

    .title {
      position:relative;      
    }

    .background-blue {
        background-color: #36a;
        color: white;
    }

    section div {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    

    .title h1 {
      font-weight: 900;
      font-size: 3em;
      color: white;
    }

    .title h1::after {
      content: "";
      background-color: red;
      height: 10px;
      width: 65px;
      display: block;
      margin-top: 10px;
    }    

    footer {
        font-size: 0.8em;
      }

      a {
        color: black;
        text-decoration: none;
      }
  
      a:hover {
        color: #36a;
      }

      .background-blue a {
        color: white;
      }

      footer a {
      color:rgb(21, 42, 70)
    }

    footer a:hover {
      color:#36a;
    }

      @media only screen and (min-width: 900px) {

        section, footer {
          display: flex;
          align-items: center;
        justify-content: center;
        }

        section div, footer p{
          width: 900px;
        }
      }