html {
  --5px:  0.313rem;
  --10px: 0.625rem;
  --15px: 0.9375rem;
  --20px: 1.25rem;
}

body {
  background-color: white;
  overflow-x: hidden;
  font-family: Arial;
  font-size: 1rem;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: blue;
}

.container {
  background: radial-gradient(circle at center, rgb(251, 203, 135, .5), rgb(134, 184, 254, .5), rgb(139, 254, 189, .5), rgb(253, 139, 203, .5));
  display: grid;
  grid-template-columns: 250px 375px;
  grid-template-rows: auto;
  grid-template-areas: 
    "left right";
  column-gap: var(--10px);
  min-height: calc(400rem / 16);
  max-width: calc(635rem / 16);
  margin: calc(100rem / 16) auto auto auto;
  padding: var(--10px); 
  border: 1px dashed hotpink;
  border-radius: var(--5px);
}

.left {
  grid-area: left;
  height: calc(460rem / 16);
  padding: var(--10px); 
}

.nav {
  min-height: calc(100rem / 16);
  max-width: calc(200rem / 16);
  margin-top: var(--10px);
  padding: var(--10px);
}

.button {
  display: block;
  height: 18px;
  width: 120px;
  background-color: #B6D0FE;
  padding: var(--5px);
  border: 1px dashed blue;
  border-radius: var(--5px);
}

.button:hover {
  background-color: #87BDFF;
  color: blue;
  margin-left: var(--15px);
  transition: 0.4s ease-out;
}

.right {
  grid-area: right;
  height: calc(460rem / 16);
  padding: var(--10px); 
}

#main {
  border: 1px dashed blue;
  border-radius: var(--10px);
  background-color: rgb(134, 184, 254, .3);
}