.header {
position:relative;
width:100%;
z-index:3;
}

.header ul {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}

.header li a {
display:block;
padding:20px;
text-decoration:none;
}

.header .logo {
color:#fff;
font-size:1.5em;
text-decoration:none;
}

.header .menu {
clear:both;
max-height:0;
transition:max-height .2s ease-out;
}

.header .menu-icon {
cursor:pointer;
display:inline-block;
float:right;
padding:28px 20px;
position:relative;
user-select:none;
}

.header .menu-icon .navicon {
background:#fff;
display:block;
height:2px;
position:relative;
transition:background .2s ease-out;
width:18px;
}

.header .menu-icon .navicon:before,.header .menu-icon .navicon:after {
background:#fff;
content:'';
display:block;
height:100%;
position:absolute;
transition:all .2s ease-out;
width:100%;
}

.header .menu-icon .navicon:before {
top:5px;
}

.header .menu-icon .navicon:after {
top:-5px;
}

.header .menu-btn {
display:none;
}

.header .menu-btn:checked ~ .menu {
max-height:340px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
background:transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform:rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform:rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top:0;
}

@media only screen and (max-width: 1240px) {
.header li a {
padding:15px;
border-bottom:1px solid #ddd;
}
}

@media only screen and (min-width: 1240px) {
.menu-wrapper {
line-height:55px;
width:100%;
overflow:auto;
}

.header li {
float:left;
}

.header .logo {
line-height:1;
}

.header li a {
padding:0 30px;
}

.header .menu {
clear:none;
float:right;
max-height:none;
}

.header .menu-icon {
display:none;
}
}

html,body {
background-color:#1f1f1f;
font-family:"ABeeZee",arial,sans-serif;
margin:0;
}

a:Link {
text-decoration:none;
color:#fff;
}

a:Visited {
text-decoration:none;
color:#fff;
}

a:Active {
textdecoration:none;
color:gray;
}

a:Hover {
text-decoration:none;
color:gray;
}

a {
transition:color .1s;
}

.navarrows {
fill:#fff;
width:30px;
height:30px;
transition:opacity .3s;
}

.navarrows:hover {
opacity:.5;
}

#left {
margin-right:50px;
}

#right {
margin-left:50px;
}

.mainarea {
max-width:1000px;
margin:0 auto;
display:block;
}

h1 {
font-size:125%;
color:silver;
text-align:right;
font-style:italic;
margin-bottom:-10px;
margin-right:20px;
margin-top:20px;
}

h2 {
font-size:80%;
color:gray;
text-align:right;
font-style:italic;
margin-right:30px;
}

.comic {
width:100%;
height:auto;
}

.permalink {
width:100%;
text-align:right;
font-size:60%;
color:#fff;
font-style:italic;
opacity:.6;
margin-top:10px;
}

#tick {
color:#32cd32;
}

#hackyspacer {
width:20px;
display:inline-block;
}

.navarrowsdiv {
width:100%;
text-align:center;
color:#fff;
font-size:300%;
margin-top:20px;
}

.copytext {
width:100%;
text-align:center;
color:#fff;
font-size:80%;
margin-top:60px;

padding-bottom: 20px;
}

hr {
border:1px solid #696969;
width:80%;
}

#diagonal {
background:#212531;
background:linear-gradient(to right bottom,#434144 50%,#1f1f1f 50%);
z-index:-99;
height:180px;
}

@media only screen and (max-width: 805px) {
#diagonal { height:150px; }
}

.logo {
max-width:70%;
height:auto;
margin-top:23px;
margin-left:20px;
margin-bottom:10px;
}

.cards { 
display: grid;
grid-gap: 3rem;
width: 90%;
margin: 0 auto;
}

.card {
transition: 0.3s;
background-color:#d8d8d8;
color: #353535;
padding: 5px 5px 30px 5px;
border-radius: 20px;
position: relative;
top: 0;
transition: top ease 0.6s;
}

@media (min-width: 600px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}

.card:hover {
top: -10px;
}

.container {
padding: 2px 16px;
}

h4 { 
text-align: center; font-size: 150%;
margin-top:10px;
}

.archivepic {
float:right;
max-width:30%;
margin-bottom:30px;
margin-left:20px;
margin-right: 10px;
}

.extratext {
margin: 0 auto;
margin-top: 40px;
display: block;
width: 90%;
font-size: 90%;
color: gray;
font-style: italic;
}