html {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #E9D9B1;
  background-image: url("images/paper.jpg");
  background-repeat: repeat;
}

a, a:link, a:visited {
    color: #CC0000;
}

.detail {
  display: grid;
  grid-template-columns: 50px 21px 1fr 170px;
  gap: 8px;
  margin: 8px 8px 8px 10px;
  grid-template-areas: "library library library library"
                       "head   head    head    pic"
                       "item   detail  detail  pic"
                       "nav    nav     nav     pic"
                       ".      divider divider pic"
                       "logo   logo    footer  pic";
}

@media (max-width: 600px) {
  .detail {
    grid-template-columns: 50px 1fr 170px;
    gap: 8px;
    margin: 8px;
    grid-template-areas: "library library library"
                       "head   head    head   "
                       "item   detail  detail "
                       "nav    nav     nav    "
                       ".      divider divider"
                       "logo   footer  pic    ";
  }
}

@media (max-width: 500px) {
  .detail {
    grid-template-columns: 50px 1fr 170px;
    gap: 8px;
    margin: 8px;
    grid-template-areas: "library library library"
                       "head   head    head   "
                       "item   detail  detail "
                       "nav    nav     nav    "
                       ".      divider divider"
                       "logo   footer  footer "
                       ".      .       pic    ";
  }

  .pic {
    margin-top: 1.5em;
  }
}

.detail > .library {
  grid-area: library;
}

.detail > header {
  grid-area: head;
}

.detail > .num {
  grid-area: item;
}

.detail > main {
  grid-area: detail;
}

.detail > nav {
  grid-area: nav;
}

.detail > .divider {
  grid-area: divider;
}

.detail > .logo {
  grid-area: logo;
  place-self: start end;
}

.detail > footer {
  grid-area: footer;
}

.detail > .pic {
  grid-area: pic;
  align-self: end;
}

.library {
  text-align: right;
}

header > h1 {
  font-size: 21px;
  font-family: Arial, sans-serif;
  color: #CC0000;
  margin: 12px 0 20px 0;
}

.num {
  font-size: 13px;
  font-family: Arial, sans-serif;
  color: #CC0000;
  text-align: right;
}

.secondcollection {
  font-size: 10px;
}

.itempic {
  margin-top: 1.5em;
}

nav {
  font-size: 13px;
  font-family: Arial, sans-serif;
  color: #CC0000;
  line-height: 140%;
}

footer {
  padding-top: 3px
}

.pic {
  font-size: 10px;
  font-family: Arial, sans-serif;
}

.pic > p {
  margin-top: 1.3em;
  text-align: center;
}