/* reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* variables */
:root {
  --color-1: #B3B38A;
  --color-2: #834D4B;
  --color-3: #B2B35A;
  --color-4: #451E20;
  --color-5: darkgray;
  --bd-clr: black;
  --clr-dk: #26292F;
  --clr-li: white;
  --spcl: ;
}

/* structure elements */
html {
  background-color: var(--clr-li);
}
body {
  display: grid;
  grid-template-areas:
  /*-------------------*/
    " .     header  . "
  /*-------------------*/
    "aside main    nav"
  /*-------------------*/
    " .     footer  . ";
  /*-------------------*/
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;

  background-color: var(--clr-dk);
  font: italic bold .8em
    "Segoe Script", cursive;
  line-height: 1.1;
  text-align: center;
  color: var(--bd-clr);

  width: 90%;
  max-width: 1350px;
  padding: 10px;
  margin: 0 auto;
  gap: 15px;
}
header {
  grid-area: header;
  background-color: var(--color-5);
}
nav {
  grid-area: nav;
  background-color: var(--clr-dk);

  ul {
    list-style-type: none;

    :not(:first-child) {
      border: 1px solid  var(--clr-dk);
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
    }
    a {
      background-color: var(--color-1);
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;

      font-variant: small-caps;
      writing-mode: vertical-lr;
    }
  }
}
main {
  grid-area: main;
  display: grid;
  grid-template-rows: 3fr 1fr;

  background-color: var(--color-1);
  margin: 0 -16px;
  padding: 15px;
  gap: 15px;
}
section {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr auto;

  background-color: var(--color-1);
  padding: 20px;
  gap: 10px;

  @media screen and (max-width: 700px) {
    display: flex;
    flex-direction: column;
  }
}
article {
  background-color: var(--color-3);
  border: 2px solid var(--bd-clr);
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px 550px;

  margin-left: -55px;
  margin-bottom: 2px;
}
aside {
  grid-area: aside;

  background-color: var(--color-4);
  border: 1px solid var(--bd-clr);
  border-top-left-radius: 200px;
  border-bottom-left-radius: 250px 950px;

  padding-top: 55px;
}
footer {
  grid-area: footer;
  background-color: var(--color-2);
}

/* content elements */
a, h1, h2 {
  display: block;
  color: var(--clr-li);
  text-align: center;
  text-decoration: none;
  padding: 15px;
}
img {
  max-width: 100%;
}