:root {
     --dk-color:chartreuse;
     --mid-color:blue;
     --lt-color:black;
     --dkest-color:cornflowerblue;
      --accent:magenta;
}

/* --- FONT --- */
@font-face {
  font-family: "dedicool";
  src: url("C&C Red Alert [INET].ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

a { 
    color: chartreuse;
}

@media only screen and (max-width: 1300px) {
  .side-rat { display: none; }
}

.float-right {
    
  float: right;
  margin: 10px 10px 10px 15px;  /* space below + to the left of the image */
}

.float-left {
  float: left;
  margin: 0 0 10px 15px;  /* space below + to the left of the image */
}

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:"dedicool";
     font-size:20px;
       text-shadow: 0 1px 4px rgba(0,55,255);
     background-image:url("images/pigeons.png");
background-size: 200px 200px;
     background-repeat:repeat;
     color:var(--dk-color);
     padding:1px;
     overflow-y:hidden;
}
body a {
  color:var(--dk-color);
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
  }

@keyframes wobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}


  blockquote {

    padding: 0 0 0 1.6rem;
    border-left: 3px solid var(--accent);
  }
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.side-rat {
  position: fixed;
  top: 30%;
    animation: wobble 2.5s ease-in-out infinite;

  z-index: 10;          /* sit above the page */
  pointer-events: none; /* clicks pass through to text */
}
.side-rat.left  { left: 100px; }
.side-rat.right { right: 100px; }

 #header {
     max-width:850px;
     height:95px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-color:var(--lt-color);
     border:5px dashed var(--accent);
}
 .title {
     font-size:50px;
     text-align:center;
     font-style:italic;
     margin-top:0px;
}
 #wrapper {
     margin:0 auto;
     max-width:860px;
}
.content {
  padding:30px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
}
 .box-one, .box-two, .box-three, .box-four, .box-six {
     border:5px dashed var(--accent);
     background-color:var(--lt-color);
     overflow:auto;
}
 .box-one, .box-two {
     height:200px;
     width:418px;
     margin-left:5px;
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:260px;
     height:326px;
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     width:850px;
     height:600px;
}

 .box-five {
     margin-top:5px;
     margin-left:5px;
     width:850px;
     height:50px;

    border:1px solid var(transparent);
     background-color:var(transparent);
     overflow:auto;
 }

 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-size:12px;
}
 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}
 button {
     width:190px;
     height:35px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-weight:bold;
     border:none;
     margin-top:0px;
     margin-right:0px;
}
  button a {
    color:var(--accent);
    font-weight:bold;
  }
  p {
     padding:5px;
}
 p a {
  color:var(--dkest-color);
  font-weight:bold;
  }
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}

.no-glow {
        text-shadow: 0 1px 3px rgba(255,255,255);
        color: cornflowerblue;
}
 #footer p {
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-size:10px;
  }
 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:97.6%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
}