@media (min-width: 540px) {
  body {
    display: grid;
    grid-template-columns: 15% 1fr 12%;

    gap: 0em 1em;
    grid-template-areas:
      "menu main toc"
      "footer footer footer";
  }

  .toc {
    top: 0;
    height: 100vh;
    position: sticky;
  }
}

@media (max-width: 539px) {
 .a, .m {
   max-width: 90%;
 }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  max-width: 1300px;
}

h1 {
  text-shadow: 2px 2px 3px black,  0 0 0.1rem;
}

.main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding-left: 0.2rem;
}

form {
  padding: .2rem;
  display: flex;
  justify-content: flex-end;
  width: 50%;
  margin: auto;
}

label {
  padding: .5em 1em .5em 0;
}

input {
  flex: 1;
}

.backTop {
  content: "top";
}

.menu {
  grid-area: menu;
  font-size: .9rem;
}

.toc {
  grid-area: toc;
  font-size: .8rem;
}

.toc ul {
  position: relative;
  padding: 0 0 0 .5em;
  overflow-y: auto;
}

.toc li {
  list-style: none;
}

p {
  margin: .1em 0;
  padding: .2em;
}

.m,
.a {
  max-width: 70%;
  min-width: 1%;
  padding: 5px 10px;
  border-radius: .4em;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.m {
  background-color: #323348;
  box-shadow: -1px 3px 5px 0px #1e1f2c;
  align-self: flex-start;
}

.a {
  box-shadow: 1px 3px 5px 0px #1b1b1b;
  background-color: #292929;
  align-self: flex-end;
  text-align: left;
}

.linkTop {
  position: fixed;
  bottom: 3em;
  right: 3em;
}

h3 {
  padding: .2em .3em;
}

.footer {
  grid-area: footer;
}