/* #####
*
*TODO
*
*make new flexbox divs for all style sheets
*implement in current pages (fuck)
*make more pages for your shitty website
*
*##### */

/*html body*/
body {
  display: flex;
  padding: 0;
  margin: 0;
  background: #f28f5a;
  font-size: 1em;
  color: #f7f5f5;
  font-family: "Courier New", monospace;
  }

h1, h2, h3, h4, h5, .link {
  font-family: "Papyrus", fantasy;
  }

/*core divs*/
.wrapper {
  background: none;
  width: 100%;
  margin: 0;
  }

/*header, footer*/
.header, .footer {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: url('media/otter.jpg');  
  background-size: 10em;
  border-color: #99dcf2;
  margin: auto;
  text-shadow: 4px -5px 5px #c92053;
  }
.footer {
  border: 0;
  }
.banner {
  flex-basis: 10em;
  max-width: 40%;
  flex-grow: 2;
  margin: 2em;
  text-align: center;
  vertical-align: middle;
  padding: 1em;
  background: linear-gradient( rgba(255,255,255,0.7), rgba(0, 0, 0, 0.7) ), url('media/pills-gfx-1.jpg');
  background-size: 10em;
  background-repeat: repeat;
  border-radius: 5em;
  }
/*
*.banner:before {
*    z-index: -1;
*    position: absolute;
*    left: 0;
*    top: 0;
*    content: url('media/pills-gfx-1.jpg');
*   opacity: 0.4;
*  }
*/
.linkbox {
  flex-basis: 10em;
  max-width: 100%;
  flex-grow: 5;
  white-space: nowrap;
  padding: 0.1em;
  border: 3px groove #0d0d0d;
  border-radius: 25px;
  margin: 2em;
  background: #70aec2;
  text-align: center;
  vertical-align: middle;
  }

/*Mobile compatibility*/
@media(orientation: portrait) {
  .main, .sidebar-left, .sidebar-right {
    position: relative;
    margin: 0 auto 0 auto;
    }
  }