h3.fun {font-family:fantasy;}

@media only screen and (max-width: 300px) {
  h3 {  font-size: 20vw; }
  div.box3 {font-size: 6em;}
}

@media only screen and (max-width: 600px) {
  h3   { font-size: 15vw;}
  div.box3 {font-size: 3em;}
}

@media only screen and (max-width: 1200px) {
  h3 { font-size: 5vw;}
  div.box3 {font-size: 2em;}
}


aside {font-size:larger;}

article.about {background:silver;opacity:.7;}

#main {width:90%;
       opacity:0.8;
       
       /** spring
       background:green;
       
        background:lightskyblue;
        
        */
        /*
        background:Chartreuse; */
        background:SandyBrown;
        padding: .4em;
        margin: .4em;
}

/* Large rounded green border */
hr {
  /*border: 1px solid darkgreen; */
  border: 1px solid Tomato;
  border-radius: 1px;
}


/* -------------------------------------------------
    Styles for Events
    ------------------------------------------------*/

div.box_scroll {
    height:15em;
    overflow: auto;
}

 /* Geometry */
 div.box2, div.box3 {
     
    padding: .4em;
    margin: 1em;
    width: 90%;
    border-radius: 1em; 
 }

 div.box2 {

    border: medium solid green;
    background-color:331;
 }
 
 div.box3 {

    border: medium solid darkgreen;
    background-color:darkgreen;
    color:white;
 }
 
  div.box4 {

    border: medium solid darkgreen;
    background-color:lavender;
    color:RebeccaPurple;
 }
    
 .evt1 {color:green;}
 
 .hPast {color:#EB4;
         background-color:#822;
 }

     
div.hotdog {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation-name: hotdoggy;
  animation-duration: 4s;
}

@keyframes hotdoggy {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}


 .weather {
     color:#D0E0FF;

     font-size:larger;
     


  /* Up to this point, only typography attributes are included */

  /* Go ahead an include box attributes also */

     border: medium solid black;
     padding: .4em;
     margin: 1em;
     width: 60%;
    background-color:purple;

 }



  /*-------------------------------------------------*/
 .hdr , header nav ul li {
     display:inline;
 }
 
 footer {
     border: thin solid blue;
     padding: .2em;
     margin: .2em;
     width: 40%;
 }
 
   h2.city-state,h3.city-state {color: gray;}
    
   h2.fellow,h3.fellow {color:green;}
 
 body {
      opacity:0.7;
      background: bisque;
      font-family:Arial;
      width:96%;
    }