:root {
/* Colour palette */
--indigo: #48166Eff;
--red-crayola: #EC164Fff;
--thistle: #C8BBCCff;
--african-violet: #9680ABff;
--indigo-2: #48166Cff;
}

  body {
    font-family: 'Overpass', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e0f2f1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  header {
    background-color: #FFF; 
    color: var(--thistle);
    text-align: center;
    padding: 2em;
    width: 100%;
    position: relative;
    margin: 1em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  header h1, header h2 {
    margin: 0; 
  }

  .container {
    width: 70%; 
    max-width: 800px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    margin-top: 1em;
  }

  .bio, .contact, header {
    width: 100%; 
  }
  .image-container {
    text-align:center;
  }

  .bio, .contact {
    background-color: #fff;
    padding: 2em;
    margin: 1em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .material-icons {
    vertical-align: middle;
  }

  h1, h2 {
    color: var(--indigo); 
  }

  p {
    line-height: 1.6;
  }

  a {
    color: #80cbc4; 
    text-decoration: none;
  }