:root {
    --primary:#e8e8e8;
    --secondary:#9DA3B4;
    --background:#4C6F7A;
    --accent: #1E1E2F;
    --dystopiaprimary:#cd5f5e;
    --dystopiasecondary:#7e3e3d;
    --dystopiabackground:#3d0000;
    --dystopiaaccent: black;
  }
  :root.dystopia{
      --primary:#bbb5b5;
    --secondary:#7e3e3d;
    --background:#3d0000;
    --accent: black;
    }
  html.blinkingblack div{
    opacity:0;
  }
  html.blinkingblack{
    background-color:black;
  }
  html.blinking{
    opacity:1;
    background-color:var(--background);
  }
  html.dystopia .right{
    background-color:var(--accent);
    border-color:var(--secondary);
  }
  html.dystopia .titletwo{
    opacity:0;
    box-sizing:border-box;
    height:0;
    margin:-25px;
  }
  html.dystopia .text{
    color:var(--primary);
    background-color:var(--accent);
  }
  html.dystopia img{
    margin: 20px auto;
  }
  html.redbackground{
    background-color:#780000;
  }
  html.background{
    background-color:var(--background);
  }
  html.dystopia{
  }
  html{
  width: 100%;
  word-wrap: break-word;
  box-sizing: border-box;
  background-color: var(--background);
  font-weight: bold;
  overflow-x:hidden;
  margin-bottom:6vh;
  color: var(--accent);
  }
  h1{
    font-size:3em;
  }
  .center{
    text-align:center;
  }
  .title, .titletwo{
    box-sizing:border-box;
    font-size:1.2em;
    width:95vw;
    margin:20px auto;
    border-style:solid;
    text-align:center;
    border-width:10px;
    border-color:var(--accent);
  }
  .title{
    background-color:var(--primary);
  }
  .titletwo{
    background-color:var(--secondary);
  }
  .container{
    display:flex;
    flex-flow:row;
    margin:0px auto;
    margin-top:20px;
  }
  .left{
    flex-flow:right;
    width:40vw;
    margin: 15px;
  }
  .left img{
    display:block;
    image-resolution:low; 
    box-sizing:border-box;
    width:35vw;
    margin:7vw auto;
    border-style:solid;
    border-width:5px;
  }
  .left img:nth-child(1){
    border-color:var(--accent);
  }
  .left img:nth-child(2){
    border-color:var(--secondary);
  }
  .right{
    box-sizing:border-box;
    width:62vw;
    margin:15px auto;
    border-style:solid;
    font-size:1.5em;
    border-width:8px;
    border-color:var(--accent);
    background-color:var(--primary);
    min-height:90vh;
  }
  .header{
    box-sizing:border-box;
    width:100%;
    background-color:var(--secondary);
    padding-top:8px;
    font-size:1.3em;
    padding-bottom:8px;
    text-align:center;
  }
  .text{
    box-sizing:border-box;
    width:100%;
    padding:20px;
    font-size:0.8em;
  }    
@media all and (max-width:1000px){
  .container{
    flex-flow:column;
    }
    html div, .left, .right {
      box-sizing:border-box;
      width:95vw;
      }
  .left{
       margin:0 auto;}
      .left img{
        margin: 20px auto;
        width:80vw;
        }
        .left{
          margin-top:auto;
        }
  }