body {
  background-color: white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: white;
}

.labels {
  font-size: 1em;
  font-weight: bold;
}

#regtext {
  text-align: left;
  padding: 10px;
}

hr {
  border-color: hsl(210, 89%, 56%);
}

li {
  text-align: left;
}

.main-container {
  background-color: azure;

  border-radius: 10px;
  border-color: hsl(210, 89%, 56%);
  border-style: solid;
  margin: 1rem;
  margin-top: 1rem;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr minmax(310px) minmax(550px) minmax(500px) 100px;
  grid-template-areas:
    "a a a a a a a a a a a a"
    "b b b b b b b c c c c c"
    "d d d d d d d d d h h h"
    "e e e e e e e e e h h h"
    "f f f f f f f f f h h h"
    "g g g g g g g g g h h h";
}

#navdiv {
  grid-area: a;
  text-align: center;
  display: grid;
  grid-gap: 5px;
  color: white;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  background-color: hsl(210, 89%, 56%);
  padding-left: 1em;
}

#namediv {
  grid-area: b;
  text-align: left;
  margin-top: 0.5em;
  background-color: hsl(210, 89%, 56%);
  padding: 10px;
  color: white;
  border-right: 1px;
  border-color: white;
  border-right-style: dashed;
}

#contactdiv {
  grid-area: c;
  margin-top: 0.5em;
  text-align: left;
  padding: 10px;
  background-color: hsl(210, 89%, 56%);
  color: white;
}

#profilediv {
  grid-area: d;

  text-align: center;
}

#prodiv {
  grid-area: e;
  text-align: center;
}

#expdiv {
  grid-area: f;
  text-align: center;
  padding: 10px;
}

#edudiv {
  grid-area: g;
  text-align: center;
  padding: 10px;
}

#corediv {
  grid-area: h;
  padding: 5px;
  text-align: center;
  border-color: hsl(210, 74%, 67%);
  border-left-style: dashed;
}

@media (max-width: 700px) {
  .main-container {
    margin: 5px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto 1fr minmax(310px) minmax(550px) minmax(500px) 100px;
    grid-template-areas:
      "a"
      "b"
      "d"
      "e"
      "f"
      "g"
      "h"
      "c";
  }

  #corediv {
    grid-area: h;
    padding: 5px;
    text-align: center;
    border-color: hsl(210, 74%, 67%);
    border-left-style: none;
  }
}