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_h { clear: both }

.heading { transform: translate(1em, 2.5em); background-color: white  }

[data-issue="21"] .heading { background-color: #CC9933 }

#features_h { width: 150px }
#regulars_h { width: 165px }
#diy_h { width: 128px }

.heading img {transform: skewY(-10deg); }

.contents { border-style: solid; border-width: 1px; padding: 0em 0.5em 0.5em 0.5em; margin-bottom: 1em }

[data-issue="15"] .contents,
[data-issue="16"] .contents,
[data-issue="17"] .contents,
[data-issue="18"] .contents,
[data-issue="19"] .contents,
[data-issue="20"] .contents { background-color: white }

[data-issue="21"] .contents { background-color: inherit }

[data-issue="15"] {
  #features_h img { filter: invert(68%) sepia(62%) saturate(337%) hue-rotate(75deg) brightness(92%) contrast(92%); }
  #features h3, #features :link { color: #68CC72 }
  #features :visited { color: #505a31 }

  #diy_h img { filter: invert(30%) sepia(16%) saturate(4435%) hue-rotate(243deg) brightness(103%) contrast(91%); }
  #diy h3, #diy :link { color: #8545BC }
  #diy :visited { color: #482566 }

  #regulars_h img { filter: invert(74%) sepia(9%) saturate(3098%) hue-rotate(165deg) brightness(98%) contrast(91%); }
  #regulars h3, #regulars :link { color: #5EC4EF }
  #regulars :visited { color: #2D5F72 }
}

[data-issue="16"], [data-issue="20"] {
  #features_h img { filter: invert(28%) sepia(61%) saturate(2505%) hue-rotate(342deg) brightness(89%) contrast(94%); }
  #features h3, #features :link { color: #DD2E2D }
  #features :visited { color: #931F1F }

  #diy_h img { filter: invert(30%) sepia(16%) saturate(4435%) hue-rotate(243deg) brightness(103%) contrast(91%); }
  #diy h3, #diy :link { color: #8545BC }
  #diy :visited { color: #482566 }

  #regulars_h img { filter: invert(68%) sepia(62%) saturate(337%) hue-rotate(75deg) brightness(92%) contrast(92%); }
  #regulars h3, #regulars :link { color: #68CC72 }
  #regulars :visited { color: #505a31 }
}

[data-issue="17"] {
  #features_h img { filter: invert(28%) sepia(61%) saturate(2505%) hue-rotate(342deg) brightness(89%) contrast(94%);}
  #features h3, #features :link { color: #DD2E2D }
  #features :visited { color: #931F1F }

  #diy_h img { filter: invert(68%) sepia(62%) saturate(337%) hue-rotate(75deg) brightness(92%) contrast(92%); }
  #diy h3, #diy :link { color: #68CC72 }
  #diy :visited { color: #505a31 }

  #regulars_h img { filter: invert(30%) sepia(16%) saturate(4435%) hue-rotate(243deg) brightness(103%) contrast(91%); }
  #regulars h3, #regulars :link { color: #8545BC }
  #regulars :visited { color: #482566 }
}

[data-issue="18"] {
  #features_h img { filter: invert(30%) sepia(16%) saturate(4435%) hue-rotate(243deg) brightness(103%) contrast(91%); }
  #features h3, #features :link { color: #8545BC }
  #features :visited { color: #482566 }

  #diy_h img { filter: invert(74%) sepia(9%) saturate(3098%) hue-rotate(165deg) brightness(98%) contrast(91%); }
  #diy h3, #diy :link { color: #5EC4EF }
  #diy :visited { color: #2D5F72 }

  #regulars_h img { filter: invert(68%) sepia(62%) saturate(337%) hue-rotate(75deg) brightness(92%) contrast(92%); }
  #regulars h3, #regulars :link { color: #68CC72 }
  #regulars :visited { color: #505a31 }
}

[data-issue="19"] {
  #features_h img { filter: invert(74%) sepia(9%) saturate(3098%) hue-rotate(165deg) brightness(98%) contrast(91%); }
  #features h3, #features :link { color: #5EC4EF }
  #features :visited { color: #2D5F72 }

  #diy_h img { filter: invert(68%) sepia(62%) saturate(337%) hue-rotate(75deg) brightness(92%) contrast(92%); }
  #diy h3, #diy :link { color: #68CC72 }
  #diy :visited { color: #505a31 }

  #regulars_h img { filter: invert(30%) sepia(16%) saturate(4435%) hue-rotate(243deg) brightness(103%) contrast(91%); }
  #regulars h3, #regulars :link { color: #8545BC }
  #regulars :visited { color: #482566 }
}


@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, [data-issue="23"] #sidebar, [data-issue="26"] #sidebar, [data-issue="33"] #sidebar { background-color: #CCCC33; color: black }
[data-issue="22"] #sidebar, [data-issue="27"] #sidebar { 
  background-color: #CC8888;
  color: black;
  a { color: white; }
  a:visited { color: #333333; }
}
[data-issue="24"] #sidebar, [data-issue="25"] #sidebar, [data-issue="28"] #sidebar, [data-issue="29"] #sidebar, [data-issue="30"] #sidebar, [data-issue="31"] #sidebar, [data-issue="32"] #sidebar, [data-issue="34"] #sidebar, [data-issue="36"] #sidebar, [data-issue="37"] #sidebar, [data-issue="38"] #sidebar, [data-issue="39"] #sidebar { background-color: #6666CC; color: black }
[data-issue="35"] #sidebar {
  background-color: #f1f73a;
  color: black;
  a { color: #868600; }
  a:visited { color: #BFBF30; }
}

#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 }

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

[data-issue="15"] #nextmonth {
  background-color: #33CCFF; color: black;
}

[data-issue="16"] #nextmonth {
  background-color: #931F1F; color: white;
}

[data-issue="17"] #nextmonth, [data-issue="18"] #nextmonth, [data-issue="19"] #nextmonth, [data-issue="20"] #nextmonth  {
  background-color: #FFF; color: black;
}

[data-issue="21"] #nextmonth, [data-issue="22"] #nextmonth {
  background-color: #222; color: white;
}

[data-issue="23"] #nextmonth {
  background-color: #000; color: #C93;
}


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

main {
display: grid;
  grid-template-columns: fit-content(20em) 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;

}

header{ grid-area: 1 / 1 / 2 / 4; }
main .column:nth-of-type(1) { grid-area: 2 / 2 / 3 / 3; }
main .column:nth-of-type(2) { grid-area: 2 / 3 / 3 / 4; }
#sidebar { grid-area: 2 / 1 / 3 / 2; } 


}