body { font-size: 100% }
img { border: 0 }

h1 { float: left; padding-left: 2em; margin-top: 0em;}
h2#issue { text-align: center; padding-top: 50px;}
p#kindle { text-align: center; font-weight: bold }
h3 { margin-bottom: 0em;}
img#cover { float: right; margin-left: 2em; margin-right: 2em; margin-bottom: 1em }

header { margin-bottom: 1em }

#features { clear: both }

#features h2, #regulars h2, #diy h2 { border-top-style: solid; border-top-width: 2px; border-bottom-style: solid; border-bottom-width: 2px }

.contents { padding: 0em 0.5em 0.5em 0.5em; margin-bottom: 1em }

@media screen and (max-width: 600px) {
    h1 { float: none; margin-left: auto; margin-right: auto; padding-left: 0em !important; padding-right: 0em !important; text-align: center}
    h1 img { max-width: 96%; height: auto; }
}

#sidebar { background-color: #33CCFF; border-style: solid; border-width: 1px; padding-top: 1em; padding-left: 0.5em; padding-right: 0.5em }
[data-issue="21"] #sidebar { background-color: #CCCC33; color: black }
[data-issue="22"] #sidebar{ 
  background-color: #CC8888;
  color: black;
  a { color: white; }
  a:visited { color: #333333; }
}
[data-issue="40"] #sidebar { background-color: #6666CC; color: black }
[data-issue="35"] #sidebar {
  background-color: #f1f73a;
  color: black;
  a { color: #868600; }
  a:visited { color: #BFBF30; }
}
[data-issue="41"] #sidebar {
  background-color: #A3B255;
  color: black;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="42"] #sidebar {
  background-color: #CCA9B0;
  color: black;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="43"] #sidebar {
  background-color: #D3C848;
  color: black;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="44"] #sidebar {
  background-color: #5D89AE;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="45"] #sidebar {
  background-color: #CCA9B0;
  color: black;
}
[data-issue="46"] #sidebar {
  background-color: #D3C848;
  color: black;
}
[data-issue="47"] #sidebar {
  background-color: #6666CC;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="48"] #sidebar, [data-issue="49"] #sidebar {
  background-color: #B97D34;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="50"] #sidebar {
  background-color: #7B4169;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="51"] #sidebar {
  background-color: #6666CC;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}
[data-issue="52"] #sidebar {
  background-color: #7B4169;
  color: white;
  a { color: #4E0202 }
  a:visited { color: #000 }
}

#sidebar h2 { padding-left: 0.5em ; }
#sidebar p { padding-left: 0.5em ; }
#sidebar a { color: white; }
#sidebar a:visited { color: #999999; }
#sidebar img { display: block; margin-left: auto; margin-right: auto }

.images .image { padding-top: 2em; padding-bottom: 2em; }
.images .image img { display: block ; margin-left: auto; margin-right: auto; }

.column { clear: both }

#nextmonth {
  border-style: solid; border-width: 1px; padding: 1em 0.5em; font-weight: bold;
}

div#nextmonth { margin-top: 1em; margin-bottom: 1em }

@media screen and (min-width: 1200px)
{

  main {
    display: grid;
    grid-template-columns: fit-content(25em) 1fr fit-content(300px);
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
  }

  header { grid-area: 1 / 1 / 2 / 4; }
  #features { grid-area: 2 / 2 / 3 / 3; }
  main > aside:nth-of-type(1) { grid-area: 2 / 3 / 3 / 4; }
  #regulars { grid-area: 3 / 2 / 4 / 3; }
  main > aside:nth-of-type(2) { grid-area: 3 / 3 / 4 / 4; }
  #diy { grid-area: 4 / 2 / 5 / 3; }
  main > aside:nth-of-type(3) { grid-area: 4 / 3 / 5 / 4; }
  #sidebar { grid-area: 2 / 1 / 5 / 2; }

  [data-issue="48"], [data-issue="50"], [data-issue="52"] {
      main {
          .parent {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
          }

      header { grid-area: 1 / 1 / 2 / 4; }
      #features { grid-area: 2 / 2 / 3 / 3; }
      #regulars { grid-area: 3 / 2 / 4 / 3; }
      #diy { grid-area: 4 / 2 / 5 / 3; }
      aside { grid-area: 2 / 3 / 5 / 4; }
      #sidebar { grid-area: 2 / 1 / 5 / 2; } 
      }
  }
}

aside img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; margin-top: 1em }

aside p.caption { font-weight: bold; text-align: center; }

aside div.holder { display: flex; flex-direction: column; justify-content: space-around; height: 100% }

img.afterwards {
  display: block;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 96%;
  height: auto;
}