/* CSS! */

/* Just learned: could have just put here a *:not(.margin-padding-saviour):not(ol) */
*:not(.margin-padding-saviour) {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
}

html { /* Stupidest style fix ever */
  background-color: #07190E;
}

body {
  display: flex;
  flex-direction: column;

  padding: 1em;

  background: url("./images/bgimg.png");
  background-repeat: repeat-y;
  color: white;

  font-family: 'Source Code Pro', Courier, monospace;
  font-size: 1.3rem;
}

body a:visited {
  color: aqua;
}

body a:hover {
  color: aliceblue;
}

#page-container-and-content-wrap {
  position: relative;
  min-height: 100vmin;

  padding-bottom: 2.5rem; /* Footer height! */
  margin: 1em;
}

/*************** HEADER ZONE BELOW ***************/

.header-container {
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

header {
  /* flex: box; */
  flex: 0 4;
  max-width: 50%;
}

.header-border {
  padding: 15px;

  border: 2mm solid #532554;
  background-color: black;
}

h1,h2,h3,h4,h5,h6 {
  text-align: center;
}

h1 {
  font-size: 3.5rem;
}

.front-page-title {
  color: #184E4E; 
  border-bottom: 2mm solid #532554;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 0.8rem;
}

h6 {
  font-size: 0.6rem;
}

/*************** NAV+MAIN+ASIDE CONTENT BELOW ***************/

.kbity-container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#kbity-left,
#kbity-right {
  max-width: 225px;
  max-height: 225px;
}

.kofi > a > img {
  max-width: 225px;
  max-height: 225px;
}

.nav-main-aside-container {
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  align-items: stretch;

  margin-top: 30px;
  gap: 25px;
  /* align-items: stretch; */
}

div.nav-main-aside-container > nav {
  flex: 25%;
  flex-flow: column wrap;
  justify-content: center;
  /* align-content: stretch; */

  border: 10px solid #236e3a;
  background-color: #01002F;
  padding: 20px;
}

div.nav-main-aside-container > main {
  flex: auto;

  border: 10px solid #7C55BA;
  background-color: #01002F;
  padding: 20px;
}

div.nav-main-aside-container > aside {
  flex: 25%;
  
  border: 10px solid #3797E0;
  background-color: #01002F;
  padding: 20px;
}

nav hr.hr-nav {
  border: none;
  border-top: 5px dashed #236e3a;
  height: 10px;
  margin-top: 15px;
}

main > hr.hr-main {
  border: none;
  border-top: 5px dashed #7C55BA;
  height: 10px;
  margin-top: 15px;
}

aside hr.hr-aside {
  border: none;
  border-top: 5px dashed #3797E0;
  height: 10px;
  margin-top: 15px;
}

h3.silly-terminal {
  background-color: black;
  color: yellowgreen;
  text-align: left;
}

main > ul {
  list-style: url(images/silly-list-item.png);
}

div.button-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

div.button-container > button {
  border: none;
  padding: 10px;

  background-color: black;
  color: lightsteelblue;
  font-family: monospace;
  font-size: 1.2rem;
}

nav div.button-container {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

div.button-container > button:hover {
  animation: glitchy 1s steps(20, end) infinite;
}

@keyframes glitchy {
  0% { 
    background-color: #184E4E;
    color: #236e3a;
  }
  5%,10%,15%,20%,25%,30%,35%,
  40% {
    background-color: #184E4E;
    color: lightsteelblue;
  }
  45%,
  50% {
    background-color: black;
  }
  65%,
  60% {
    background-color: #184E4E;
  }
  65% {
    background-color: #236e3a;
  }
  70% {
    background-color: #184E4E;
    color: whitesmoke;
  }
  80%,
  85% {
    color: greenyellow;
  }
  80%,
  95% {
    background-color: #184E4E;
  }
}

/*************** FOOTER ZONE BELOW ***************/

div#footer-paster {
  display: flex;
  flex-direction: column;

  margin: 1em; /* So that it matches #page-container-and-content-wrap even outside of it */
  margin-bottom: 0;
}

div.cooler-footer {
  display: flex;

  border-top: 0.5mm dashed gray;
  border-bottom: 0.5mm dashed gray;
  padding-top: 2.5mm;

  font-family: 'Courier New', Courier, monospace;
  font-size: larger;
  font-weight: bolder;

  /* flex: 1 1 0%; */
}

footer.footer-display {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  gap: 15px;
  /* flex: 1 1 0%; */
}

div.post-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  border-bottom: 0.5mm dashed gray;
  /* margin-bottom: -50px; */
  /* margin-bottom: -0.5em; */

  font-family: 'Courier New', Courier, monospace;
  font-size: larger;
  font-weight: bolder;
  /* flex: 1 1 0%; */
}