:root {
  --main-bg-color: #000000;
  --main-fg-color: #ffffff;
  --b-tablet: 768px;
  --b-desktop: 1024px;
  --b-minimum: 300px;
}

html {
  font-family: "Roboto";
  font-size: 16px;
}

body {
  margin: 0px;
}

.navigation {
  grid-area: navigation;
  align-self: stretch;
  background-color: var(--main-bg-color);
  color: var(--main-fg-color);
  padding: 0.5rem;

  display: grid;
  grid-template-areas: "logo list";
  grid-template-columns: minmax(1rem, auto) 1fr;
  grid-template-rows: minmax(1rem, 2rem);

  .list {
    justify-self: end;
    grid-area: list;
    margin: 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 1rem;

    .list-item {
        line-height: 1;
    }
  }
  .logo {
    grid-area: logo;
    justify-self: center;
    align-self: center;
    min-height: 10px;
    display: grid;

    img {
        min-height: 0px;
        max-height: 2rem;
    }
  }
}


.main {
    margin-top: 1rem;
    display: grid;
    grid-template-areas:
      ". header ."
      ". address ."
      ". experience ."
      ". about .";
    grid-template-columns: 1fr minmax(var(--b-minimum),var(--b-tablet)) 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
  
    .address {
      grid-area: address;
    }
    .experience {
      grid-area: experience;

      .experience-detail {
        dt {
            font-weight: bold;
        }
      }
    }
    .about {
      grid-area: about;
    }

    .header {
        grid-area: header;
        display: grid;
        grid-template-areas:
          "name "
          "subtitle";
        grid-template-columns: minmax(25vw, 250px) 1fr;
        gap: 1rem;

      
        .name {
          grid-area: name;
          justify-self: start;
          align-self: end;
          margin: 0px;
        }
      
        .subtitle {
          grid-area: subtitle;
          justify-self: start;
          align-self: start;
          margin: 0px;
        }
      }

  }