@import url('../base.css');

:root {
  --green-bg-image:url('../img/green-burnished-metal.jpg');
}

h2:first-child {
  text-align:left;
}

img.filler {
  text-align:center;
  width:75%;
  margin:0px auto;
  border:3px solid black;
  box-shadow:0px 4px 8px 0px black;
  margin-top:10px;
}

div.flex {
  display:flex;
  width:800px;
  margin:0px auto;
  align-items:flex-start;
  div:first-child {
    width:60%;
    margin-right:10px
  }
  /* prefixing some classes with flex to save myself copy pasting */
  div[class^="flex"] {
    width:100%;
    padding:5px;
    border:3px solid black;
    box-shadow:0px 4px 8px 0px black;
    background-image:var(--green-bg-image);
    background-color:var(--bg-dark-green);
  }
  div.flexAbout {
    padding:10px;
  }
  div.flexSiteInfo {
    h3 {
      color:var(--text-dark-red);
    }
    width:40%;
    div {
      background-color:var(--code-block-black);
      color:white;
      box-shadow:inset 0px 0px 10px 3px black;
      padding:8px;
      font-family:Monospace;
      font-size:16px;
      ul {
        margin:0px;
      }
    }
  }
  div.flexStatusContainer {
    width:280px;
    position:fixed;
    right:20px;
    top:34px;
    padding:10px;
    margin-top:10px;
    height:auto;
    overflow:scroll;
    div.status:first-child {
      margin-top:0px;
    }
    div.status {
      margin-top:5px;
      background-color:var(--code-block-black);
      color:white;
      font-family:Monospace;
      font-size:16px;
      padding:5px;
      border:3px solid black;
      box-shadow:inset 0px 0px 10px 3px black;
      dl {
        margin-left:5px;
        dt {
          font-weight:bold;
        }
      }
      h3 {
        color:var(--text-dark-red);
      }
    }
  }
}

div.bios {
  width:900px;
  margin:0px auto;
  margin-top:10px;
  background-image:var(--green-bg-image);
  background-color:var(--bg-dark-green);
  border:3px solid black;
  box-shadow:0px 4px 8px 0px black;
  padding:20px;
  div.flex {
    display:flex;
    justify-content:space-between;
    padding:0px;
    margin:0px;
    width:100%;
    flex-wrap:wrap;
    div.bioCont {
      min-width:270px;
      padding:8px;
      display:flow;
      margin:2px;
      background-color:var(--code-block-black);
      width:48%;
      color:white;
      border:3px solid black;
      box-shadow:inset 0px 0px 10px 3px black;
      font-family:Monospace;
      font-size:16px;
      dt {
        font-weight:bold;
      }
    }
  }
}

@media only screen and (max-width:800px) {
  div.flex {
    width:100%;
    div.flexAbout {
      border-left:0px;
    }
    div.flexSiteInfo{
      border-right:0px;
    }
    div.flexStatus {
      border-left:0px;
    }
  }
}

@media only screen and (max-width:900px) {
  div.bios {
    width:100%;
    border-right:0px;
    border-left:0px;
    color:red;
  }
}

@media only screen and (max-width:1460px) {
  div.flex{
    div.flexStatusContainer {
      position:static;
      width:100%;
      color:red;
    }
  }
  img.filler {
    display:none;
  }
}