body {
    background-color:#ffffe6;   /* step 4.1 */
    color: #006600;                         /* step 4.2 */
    font-family:Verdana;          /* step 4.3 */
}

h1,h2{
    font-family:Tahoma;            /* step 5 */
}
h1{
    color:#0066ff;
}

/*  class selectors  */
.multiplier{
    color:rgb(19, 8, 119);
    font-family: Arial, Helvetica, sans-serif;
    font-size:18px;
    font-variant:small-caps;                             
}
.bonus{
    color:darkred;
    font-size:150%;
    font-family:'Times New Roman', Times, serif;
    font-weight:bold;
}
.points{
    color:#006699;
    font-size:1.25em;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-style:italic;
}
/* end class selectors  */

/*  Pseudo-class Selectors  */
a{
    text-decoration-color:blue;
}
a:link {
      color:#0066ff;
}
a:visited {
      color:#ff0066;
}  
a:hover, a:focus {
      color:#009999;    
      background-color:#ffff99;
}
a:active {
      color:#ff00ff;  
      background-color:#b3ffcc;
}
/*  End Pseudo-class Selectors  */

/* ============= Flexboxes ================= 
~~~~~~~~~~~ Lets try to replace this class with <nav> ~~~~~~~~~~~ 
.menu{
    display: flex;
    flex-direction: row;
    border-color:#0066ff;
    border-width:8px;
    border-style:double;
    margin-top: 6px;
    justify-content: space-evenly;
        
}
.menu div {
  margin: 10px;
  padding: 2px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular';
  font-size: 20px;
  align-items: center; 
}
========================= */
nav{
    display: flex;
    flex-direction: row;
    border-color:#0066ff;
    border-width:8px;
    border-style:double;
    margin-top: 6px;
    justify-content: space-evenly;
        
}
nav div {
  margin: 10px;
  padding: 2px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular';
  font-size: 20px;
  align-items: center; 
}


.key{
    display: flex;
    flex-direction: row    
}
.key div {
  background-color: #e7dede;
  margin: 2px;
  padding: 2px;
  font-size: 15px;
  align-items: center; 
}

.container {   /* Used in bonus page  */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 40px;
    align-content: flex-start;
}
.left-box {
    flex: 0 0 400px;
    width: 400px;
    padding: 5px;
    border: 1px solid black;
    margin: 2px;
}
.right-box{
    flex: 0 0 400px;
    width: 250px;
    padding: 5px;
    border: 1px solid black;
    margin: 2px; 
    color:#0066ff; 
}
/* =============  End flexboxes ============ */


/*  Dessendant class  */
p em {
    line-height: .5em;
    text-indent:2em;
    text-decoration:none;
    text-align: center;
    color: #ff0066;
}

/*============ Grid  used on the banner =============*/
.banner_grid {
    display: grid;
    grid-template-columns: 350px auto auto auto auto;
    grid-template-rows:repeat(3, 70px);
    padding: 5px;
    padding-top: 0;
    justify-items: start;
    background-color: #b3ffcc;
    background-image: url("images/yagi_200px.png");
    background-repeat:no-repeat;
    background-position:45.5%;
    border-color:#e72d32;
    border-width:8px;
    border-style:double;
    align-items:baseline;
}
 
main{
    display: flex;
    flex-direction: column;
    background-color: #ebf5ef;
    border:#006600;
    border-radius: 4%;
    border-width: 3px;
    color:#410d74
}

main div {
  margin: 10px;
  padding: 2px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular';
  font-size: 15px;
  color: #220775;
  align-items: center; 
}

main ul{
    font-family:Tahoma sans-serif;
    font-size: 18px;
    color: #220775;
}

main h3{
    color:#590572;
}

footer {
  text-align: right;
  padding: 1px;
  /* background-color: rgb(110, 191, 223); */
  color: rgb(233, 27, 178);
}

.wrapper  {
      border-color:black;
      border-width:1px;
      border-style:solid;
      background-color:rgb(26, 46, 230);
      color:#f2f5f9;
      padding:25px;
      padding-left:12px;               
      margin:30px;
      margin-right:12px;
      border-radius: 20%;
}

.boxie_2  {
      border-color:black;
      border-width:3px;
      border-style:solid;
      background-color:rgb(189, 244, 245);
      color:black;
      padding:25px;
      padding-left:6px;               
      margin-right:20px;
      margin-left: 75%;
}

.boxie_3  {
      border-color:black;
      border-width:3px;
      border-style:solid;
      background-color:rgb(131, 226, 227);
      color:black;
      padding:5px;
      padding-left:6px;               
      margin-right:60%;
      margin-left: 5%;
}


header{
    text-align: center;
    text-decoration: blue;
}