@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


body {
  background-color: #ACBAC4;
  font-family: "Roboto", sans-serif;
}

#container {
  z-index: 10;
  width: auto;
  height: auto;
  margin: 0 auto;

  background-color: #ffffff;
  padding: 20px;

  /* CSS Grid */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 150px auto 150px;
  grid-template-areas:
    "a a a a b"
    "c c c c c"
    "d d d d d";
}


#a {
    grid-area: a;
    background-color: #30364F;

    h1 {
        margin: 75px;
        font-size: 3em;
        color: #c8bcad;

    }
    ul li {
        display:inline;
        padding:10px;
        font-size: 1.5em;
    }
}

#b {
    grid-area: b;
    background-color: #000000;
    h1{
        font-size: 4em;
        text-align: center;
    }
    p {
        font-size: 1.5em;
        text-align: center;
    }
}

#c {
    grid-area: c;
    background-color: #ACBAC4;
    h1{
        text-align: center;
        font-size: 3em;
    }
    h2{
        text-align: center;
        font-size: 2em;
    
    }
    p{
        text-align: center;
        font-size: 1.5em;
        padding: 0px 100px;
    }
    
     ul li {
        display:inline;
        padding:10px;
        font-size: 1.5em;
    }
}


#d {
    grid-area: d;
    background-color: #E1D9BC;
    p {
        text-align: center;
        font-size: 1.5em;
        padding-top: 15px;
    }
  }



.rmid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.cmid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo {

    height: 150px;
    width: auto;
    margin: auto;
}

#a, #b, #c, #d{
    z-index: 15;
  
}