/*****Basic Elements*****/

body {
  background: #444 url(../img/default-background.webp);
  background-attachment: fixed;
  color: #222;
  font-family: arial;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

h1 { font-size: 2em; }

a { color: blueviolet; text-decoration: none; font-weight: bold; }

/*****Generic Classes*****/

a.link-btn {
  border: 1px solid #111;
  border-radius: 8px;
  box-shadow: 0 3px 4px 1px rgba(0,0,0,.2) inset,2px 2px 4px 1px rgba(0,0,0,.2);
  color: #222;
  font-weight: bold;
  display: inline-block;
  padding: .2em 2%;
  background-color: greenyellow;
}

a.link-btn:hover, a.link-btn-selected { background-color: yellowgreen; }

p.center { text-align: center; }

/*****Basic Layout*****/

header {
  background: #222;
  box-shadow: 0 0 5px #000;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  white-space: nowrap;
  width: 100%;
}

div.column {
  background: linear-gradient(lightblue, gold);
  box-shadow: 0 0 5px #000;
  padding: .4em 0;
  margin: -1.9em 15% -3em;
  min-height: calc(100vh + .64em);
}

article { margin: 5em 5%; }

footer {
  margin: 0 20%;
  overflow: auto;
  text-align: center;
  white-space: nowrap;
}

/*****Header*****/

header p { margin: .4em 0 }

a.link-btn-selected {  pointer-events: none }

/*****Content*****/

article p, article ul { text-align: left; }

code, pre code {
  background-color: #ccc;
  color: #222;
  font-family: "Courier 10 Pitch", Courier, monospace;
  line-height: 1.2;
}

code { border: 1px solid #999; display: inline-block; padding: .2em; }

pre code {
  border: 1px solid #222;
  display: block;
  overflow: auto;
  padding: .8em;
  text-align: left;
}

img.img-content, img.img-rss {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.img-content {
  border: 1px solid #999;
  width: 60%;
}

img.img-rss { width: 2.5em; }

/*****Footer*****/

footer p { margin: .4em 0 }

footer a { margin: 0 .75%; }

/*****Mobile*****/

@media screen and (max-width: 481px) {

/*****Basic Layout*****/

header { position: absolute; }

div.column { margin: -1.9em 0 -3em; }

article { margin: 5em 2%; }

footer { margin: 0 2%; }

}