/*  file name myStyle.css  */
 <style type="text/css">
 
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
 
 /* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
 
   
/*  this code is for a responsive navbar*/ 
  * {box-sizing: border-box}
  body { 
    padding-left: 11em;
    font-family: Verdana, serif;
    color: white;
    background-color: black; 
}

  h1 {
    font-family: Verdana, serif, sans-serif;
	 color: yellow;
	  font-size: 2.25vw;
	  text-align: center;
}
  h2 {
    font-family: Verdana, serif, sans-serif;
	 color: cyan ;
	  font-size: 1.75vw;
	  text-align: center;
} 
  h3 {
    font-family: Trebuchet MS, serif, sans-serif;
	font-style: italic; 
	 color: limegreen;
	  font-size: 1.6vw;
	  text-align: center;
  }
  h4 {
    font-family: Segoe Print, Eras Medium ITC, serif, sans-serif;
	 color: #FF6666;
	  font-size: 1.75vw;
	  text-align: center;
} 
  h5 {
    font-family: Segoe Print, Eras Medium ITC, serif, sans-serif;
	 color: greenyellow;
	  font-size: 1.75vw;
	  text-align: center;
} 
  h6 {
    font-family: Comic Sans MS, Verdana;
	 color: black;
	  font-size: 1.75vw;
	  text-align: center;
} 


#red {
  color: red;
font-size: 2vw;
 }
#white {
  color: white;
font-size: 2vw;
 }
#dodge {
  color: #1E90FF;
font-size: 2vw;
  }
#blue {
  color: #4444ff;
font-size: 2vw;
  }
#yellow {
  color: yellow;
  text-align: center;
}
#orange {
  color: #FF6666;
  text-align: center;
  font-size: 2vw;
 }
#greenyellow {
  color: greenyellow;
  text-align: center;
  font-size: 2vw;
   font: Trebuchet MS;
  font: italic;  
} 
#forestgreen{
  color: ForestGreen;
  text-align: center;
  font-size: 2vw;

} 
#cyan{
  color: cyan;
  text-align: center;
  font-size: 2vw;
} 
 p.yellow {
   color: yellow; 
}  
  p.cyan {
   color: cyan;
}  
  p.orange {
   color: #FF6666; 
   size: 2.5vw;
}
  p.yellowgreen {
   color: yellowgreen;
   text-align: center; 
   font: Trebuchet MS;
   font: italic; 
}
/*  this code is for the side link bar*/
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin:0;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10%; 
    height: 100%;
    color: white;
}   
  ul.navbar li { 
    padding: 0;
    border-right: 0;
}
  ul.navbar a {
	  font-size: 1.6vw;
}

/*  Four links  */
a:visited {
  color: DodgerBlue;
  text-align: center;
  text-decoration: none;
}
a:link {
  color: ForestGreen;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
li a:hover {
  color: yellow;
}


/*  this makes the pictures appear side by side */
li {
  display: inline;
  border: 3px;
}
/*  this code is for the banner header */
  .header {
  text-align: center;
  font-size: 32px;
  border-style: dotted;
  border-width: .5vw;
  color: yellow;
}

/*  this code is for the top banner */  
  .header2 {
 #para1 {
  text-align: right;
   padding: 50px;
}
  .footer {
   position: static;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: greenyellow;
   text-align: center;
}
  
 div {
  background-color: blue;
  width: 300px;
  border: 5px solid green;
  padding: 50px;
  margin: 15px;
}
  
* {
  box-sizing: border-box;
} 

img {
  max-width: 100%;
  height: auto;
}
</style>