body {
  padding: 0px;
  margin: 0px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
hr {
  border-color: #0ea0ff;
  width: 65%;
}

.main-grid-container {
  background-color: azure;
  border-radius: 35px;

  margin: 5rem;
  margin-top: 1rem;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows:
    minmax(350px) minmax(350px) minmax(310px) minmax(550px) minmax(100px)
    minmax(100px);
  grid-template-areas:
    "c a a a d"
    "c b b b d"
    "e e e e e"
    "f f f f f";
}

#intro {
  grid-area: a;
  padding: 10px;
  text-align: left;
}

#workdet {
  grid-area: b;
  padding: 10px;
  text-align: left;
}

#sidenavleft {
  grid-area: c;

  text-align: center;

  margin-top: 10%;
  border-bottom: 1px;
  border-right: 1px;
  border-color: #0ea0ff;
  border-right-style: solid;
  border-bottom-style: solid;
  border-bottom-right-radius: 35px;
}

#sidenavleft img {
  width: 125px;
  border-radius: 35px;

  margin-top: 10%;
  box-shadow: 1.5px 2.5px 2px 2.5px #888888;
}

#sidenavleft p {
  text-align: left;
  padding: 25px;
}

#sidenavright {
  grid-area: d;
  padding-left: 25px;
  text-align: left;
  margin-right: 20px;
  margin-top: 10%;
  border-bottom: 1px;
  border-left: 1px;
  border-color: #0ea0ff;
  border-left-style: solid;
  border-bottom-style: solid;
  border-bottom-left-radius: 35px;
}

#acti {
  text-decoration-line: underline;
}

#personal {
  grid-area: e;
  padding: 20px;
  text-align: left;
}

#workint {
  grid-area: f;
  padding: 20px;
  text-align: left;
}

@media (max-width: 700px) {
  .main-grid-container {
    background-color: azure;
    border-radius: 35px;

    margin: 1rem;
    margin-top: 1rem;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows:
      minmax(350px) minmax(350px) minmax(310px) minmax(550px) minmax(100px)
      minmax(100px);
    grid-template-areas:
      "c"
      "a"
      "b"
      "e"
      "f"
      "d";
  }
  #intro {
    grid-area: a;
    padding: 25px;
    text-align: left;
  }

  #intro h5 {
    text-align: center;
  }

  #workdet {
    grid-area: b;
    padding: 25px;
    text-align: left;
  }

  #sidenavleft {
    grid-area: c;

    text-align: center;
    margin: auto;
    margin-top: 10%;
    border-bottom: 0px;
    border-right: 0px;

    border-right-style: none;
    border-bottom-style: none;
    border-bottom-right-radius: 0px;
  }

  #sidenavleft img {
    width: 125px;
    border-radius: 35px;

    margin-top: 10%;
    box-shadow: 1.5px 2.5px 2px 2.5px #888888;
  }

  #sidenavleft p {
    text-align: left;
    padding: 25px;
  }

  #sidenavright {
    grid-area: d;
    padding-left: 25px;
    text-align: left;
    margin-right: 20px;
    margin-top: 10%;
    border-bottom: 1px;
    border-left: 1px;
    border-color: #0ea0ff;
    border-left-style: solid;
    border-bottom-style: solid;
    border-bottom-left-radius: 35px;
  }

  #acti {
    text-decoration-line: underline;
  }

  #personal {
    grid-area: e;
    padding: 20px;
    text-align: left;
  }

  #workint {
    grid-area: f;
    padding: 20px;
    text-align: left;
  }
}