
html { font-family: sans-serif;
       color: #000;
       font-size: 16px;
       text-align: left;
}

body { width: 100%;
       max-width: 600px;
       margin: 0 auto;
       text-align: left;
      background-color: #ffa200;
}
      
header { width: 100%;
      max-width: 600px;
      margin: 0 auto; 
      background-color: #ffa200;
       background-image:  url('images/saw-bg-header-web.png');
      background-repeat: repeat;
      background-color: #7f00b5;
        border-style: groove;
        border-width: 20px 20px; /* 5px top and bottom, 20px on the sides */
        border-color: #ff0000;
}
      
main { width: 100%;
       background-color: #7ae7fe;
       text-align: left;
       overflow: hidden;
       background-image:  url('images/saw-bg-web.png');
      background-repeat: repeat;
        border-style: groove;
        border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
        border-color: #ff0000;
}

footer {
        display: block;
        padding: 5px;
        width: 100%;
        background-color: #7f00b5;
        overflow: hidden;
        color: #00FFFF;
        border-style: groove;
        border-width: 5px 20px;
        border-color: #ff0000;
        text-align: center;
}
      
section { padding: 0px;
          margin: auto;
          width: 50%;
          text-align: left;
}


img { display: block;
      margin: 0 auto;
      max-width: 80%;
}
        
      
h1 { color: blue;
            text-align: center;
     text-shadow: 2px 2px 4px #000000;	
}	
  		
h2 { color: #5a077c;
            text-align: center;
}

h3 { color: blue;
     text-shadow: 2px 2px 4px #000000;
            text-align: center;
}  	

h4 { color: #5a077c;
            text-align: center;
}

h5 { color: #5a077c;
            text-align: center;
}
      

a:link { color: blue; text-shadow: 2px 2px 4px #000000;
}


a:visited { color: green;
}


a:hover { color: yellow;
}


a:active { color: blue;
}
     

  

.navbar {
        overflow: hidden;
        background-color: #ff0000;
        width: 100%;
        border-style: groove;
        border-width: 5px 20px;
        border-color: #ff0000;
}


.navbar a {
  float: left;
  font-family: Arial;
  font-size: 16px;
  color: black;
  background-color: #ca99fd;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
  border-style: groove;
  border-width: 5px 20px;
  border-color: purple;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-family: Arial;
  font-size: 16px;
  color: black;
  background-color: #ca99fd;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
  border-style: groove;
  border-width: 5px 20px;
  border-color: purple;
  outline: none;
  margin: 0;
}

.button {
  font-family: Arial;
  font-size: 16px;
  color: black;
  background-color: #ca99fd;
  text-align: center;
  padding: 4px 6px;
  text-shadow: 2px 2px 4px #000000;
  border-style: groove;
  border-width: 5px 20px;
  border-color: purple;

}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: yellow;
}


.dropdown-content {

  display: none;
  position: absolute;
  background-color: yellow;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  float: none;
  color: black;
  padding: 4px 6px;
  display: block;
  text-align: left;
}


.dropdown-content a:hover {
  background-color: yellow;
}


.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (max-width: 600px) {
      section {
        padding: 5px;
  margin: auto;
  width: 90%;
}

