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 { width: 10em; transform: translate(1em, 2.5em); background-color: white }

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

.contents { border: solid 1px black; padding: 0em 0.5em 0.5em 0.5em }

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

@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; }
}

div#credits { background-color: #33CCFF; border: solid 1px black ; padding-top: 1em}
div#credits h2 { padding-left: 0.5em ; }
div#credits p { padding-left: 0.5em ; }
div#credits a { color: white; }
div#credits a::visited { color: #999999; }

#nextmonth {
background-color: #33CCFF; border: solid 1px black ; padding: 1em 0.5em; font-weight: bold;
}

@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; } 


}