/* Basic structure stuff */

@media only screen and (max-width: 800px) {
  .head {
      grid-auto-flow: row !important;
      grid-template-columns: 1fr 1fr !important;
  }
  .darkmode { grid-row: 1 / row1-end; grid-column: 2; }
  .title { grid-row: 1 / row1-end; grid-column: 1; }

  .buttons { grid-template-columns: auto auto auto; }

  body {
      grid-template-columns: 1fr !important;
      grid-template-areas:
          "main"
          "side" !important;
  }
  #page, footer {
      width: 80% !important;
  }
  footer { min-height: 3em !important; }
}

@media only screen and (min-width: 1500px) {
	body {
		padding-left: 15%;
		padding-right: 15%;
	}
}

.button {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}
.button img, .buttons img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}


body {
    font-family: var(--font);
    color: var(--color);
    background: var(--bg-image) var(--bg-color);
    background-attachment: fixed;
    background-size: 70%;
    background-repeat: repeat;

    font-size: var(--font-size);

    margin: 0px;

    display: grid;
    grid-gap: 1em;
    grid-template-columns: 25% 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "side main main";
}

#page {
    grid-area: main;

    background: var(--back);
    line-height: 1.5;

    display: block;
    margin: auto;
    margin-top: 1em;
    width: calc(90% - 2em);
    padding: 1em 2em;

    word-wrap: break-word;
    overflow-wrap: break-word;

    border-top-right-radius: 50px;
    border: 5px double var(--head-3);
}

/* ---------- */

h1 { color: var(--head-1); }
h2 { color: var(--head-2); }
h3 { color: var(--head-3); }
h4 { color: var(--head-4); }
h5 { color: var(--head-5); }
h6 { color: var(--head-6); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-alt); }

a {
  color: var(--accent);
  font-family: var(--font-alt2);
}
a:hover { color: var(--font); }

mark {
    color: var(--back);
    background: var(--color);
}

code {
    color: var(--back);
    background: var(--head-2);
    padding: 2px 5px;
}

figure {
	 max-width: 100%;
	 margin-left: 0px;
	 margin-right: 0px;
}
 figure img {
	 display: block;
	 margin: 1em auto;
	 margin-bottom: 5px;
}
 figure figcaption {
	 text-align: center;
	 color: var(--head-3);
}

blockquote {
    border-left: 1px solid var(--head-2);
    padding-left: 20px;
    font-style: italic;
}

table {
    width: 100%;
    border: 1px solid var(--head-2);
    border-radius: 5px;
}
thead th {
    border-bottom: 1px dotted var(--head-3);
}
td, th { padding: 5px; }

hr {
    display: block;
    margin: 5px auto;
    border: none;
    border-bottom: 2px solid var(--head-3);
    width: 50%;
}

p {
    align-items: center;
}

details summary { cursor: pointer; }

/* ----------- */

.center { text-align: center; }

.card {
    margin: 1em 0px;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 5px;
    justify-content: center;
    align-items: center;

    width: 100%;
    grid-template-columns: 50% 50%;

    padding: 5px;
    border: 2px double var(--head-3);
}
.card img {
    width: 100%;
}
@media only screen and (max-width: 800px) {
  .card {
      grid-template-columns: 1fr;
  }
}

.buttons {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto auto auto auto auto;

    align-items: center;
    justify-content: center;

    grid-gap: 5px;
}
.button {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}
.button img, .buttons img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.button a, .buttons a {
    display: block;
    margin: auto;
}
.buttonBig img {
    width: calc(81px * 1.5);
}
@media only screen and (max-width: 800px) {
  .buttons {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;

  }
}

.title {
  text-decoration: none;
  border: 0;
}
.title h1 { text-align: left; }
.head h2 { text-align: left; font-size: 0.7em; }

.head {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
}

nav a {
  margin-right: 10px;
}

textarea {
  width: 100%;
  font-size: 16px;
}

input {
  font-size: 16px;
}

content {
  line-height: 1.6;
}

img {
  max-width: 100%;
}


pre code {
  display: block;
  padding: 20px;
  white-space: pre-wrap;
  font-size: 14px;
  overflow-x: auto;
}

div.highlight pre {
  background-color: initial;
  color: initial;
}

div.highlight code {
  background-color: unset;
  color: unset;
}

.helptext {
  color: #777;
  font-size: small;
}

.errorlist {
  color: #eba613;
  font-size: small;
}

/* blog posts */
ul.blog-posts {
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  justify-content: flex-start;
}

/**/
.webring {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header"
        "links";
    justify-content: center;
    align-items: center;

    outline: 2px solid var(--head-3);
    padding: 2px;
    width: 200px;
    max-width: 100%;
    margin: 10px auto;

    text-align: center;
}
.webring web-head { grid-area: header; }
.webring web-links { grid-area: links; }

/**/

.updates {
    width: 100%;
    height: 250px;

    border: 5px double var(--head-3);
}
.updates iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
}

/**/

#statuscafe {
    padding: 1em;
    border: 1px solid var(--head-2);
    display: block;
    margin: 1em auto;
    width: 50%;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/**/
.scared {
    animation: an_shake .2s linear infinite;
}
.scaredhover:hover {
    animation: an_shake .2s linear infinite;
}

@keyframes an_shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Grids */
/*
    This is a general two-column grid;
*/
.two_grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "col1 col2";
}
.two_grid .col_1 { grid-area: col1; border-right: dashed 1px var(--font-color); padding: 5px 10px 5px 5px; }
.two_grid .col_2 { grid-area: col2; padding: 5px 5px 5px 10px; }
@media only screen and (max-width: 800px) {
    .two_grid { grid-template-areas: "col1 col1" "col2 col2"; }
    .two_grid .col_1 { border: none; border-bottom: dashed 1px var(--font-color); padding: 10px 5px; }
    .two_grid .col_1 { padding: 10px 5px; }
}