body{
  font-family: 'Roboto Serif', serif;
  padding: 1% 1%;
  width: 100;
  margin: auto;
  background-color: white;
}

 
  @media screen and (min-width: 651px) {.topnav {
   background-image: linear-gradient(#3483bb, #093656);
   display: flex;
   flex-wrap: wrap; 
   border: 1px solid gold;
   align-items: center;
   justify-content: space-between;
   overflow: hidden;
     padding: 2px 20px 2px 20px;
 }
 }
 


  .topnav a {
    float: left;
    color: white;
    text-align: center;
    background-image: linear-gradient(rgb(208, 182, 31), rgb(103, 88, 4));
     padding: 10px 10px 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 17px;
    transition: color 1s;
  }
  
 
  .topnav  a:hover, .dropdown:hover .dropbtn{
    background-color: rgb(247, 246, 237);
   color: black; 
  }


  .topnav a.active {
    background-color: gold;
    color: white;
  }
    

  .topnav .icon {
    display: none;
  }

 
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 650px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
     .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    } 

  }


  .hero{
       /*position: absolute;*/

       left: 0;
       top: 0;
       width: 100%;
       background-image: url(pexels-christina-morillo-1181271.jpg);
       background-position: center;
      border: 3px solid gold;
      animation: slide 20s infinite;
    
    }
    

    @keyframes slide {
         10%{
          background: url(pexels-pixabay-45243.jpg);
      }
      35%{
          background: url(pexels-panumas-nikhomkhai-1148820.jpg);
      }
      75%{
          background: url(pexels-sevenstorm-juhaszimrus-443383.jpg);
      } 
      95%{
        background: url(pexels-christina-morillo-1181271.jpg);
    }  
  }


    .intro{

    text-align: center;
    color: gold;
    font-size: 2em;
    text-shadow: 1px 1px 1px #000000;


}


hr.new1{
  width: 100%;
  border: 2px solid rgb(208, 182, 31);
}



img {
  width: 100%;
  min-width: 0%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;

}



.img1{
    width: 100px;
    margin-top: 5px;
    border-radius: 5%;

    cursor: pointer;
}

.img2{
  display: block;
   margin-left: auto;
  margin-right: auto;
      border-radius: 3%;
          box-shadow: 5px 5px 10px rgb(33, 32, 32);
  width: 50%;
}


.img3{
  display: block;
   margin-left: auto;
  margin-right: auto;
    box-shadow: 5px 5px 10px rgb(33, 32, 32);
  border-radius: 3%;

  width: 90%;
}


.nowrap{
  white-space: nowrap;
}




.section1{
margin: 65px 20px 5px 20px; 
font-size: 2em;
text-align: center;
color: gold;
text-shadow: 2px 2px 2px gray;
}



main{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2px 10px 2px 10px; 

}

.scan {
  font-style: italic;
  font-weight: bold;
}


.p1 {
  text-align: center;
  font-weight: bold;
}

article { 
	flex: 1 1 44%;
  margin: 20px 2px 2px;
  line-height: 1.3;
  font-size: 1.25rem;
   padding: 20px 20px 5px;  


  text-align: justify;
}
 
.article1 { 
	flex: 1 1 44%;
  margin: 2px;
  line-height: 1.3;
  font-size: 1.25rem;
  padding: 20px 20px 5px;  

  text-align: justify;
}
 


h1{
  text-align: center;
    color: rgb(103, 88, 4);
    text-shadow: 1px 1px rgb(205, 200, 200); 

    transition: all .5s ease-in;

}


h1:hover{
  color: rgb(103, 88, 4);
  background-color: #b2b1b0;
}


.background {
  padding: 10px 10px 10px 10px;
  background-image: linear-gradient(#c2d9f8, #519ace);
  color: black;
  border-radius: 5px 5px 5px;
  box-shadow: 8px 8px 16px rgb(28, 27, 27);
}


.background1 {
   margin: 20px;  
  padding: 10px 10px 10px 10px;
  background-image: linear-gradient(#c2d9f8, #519ace);
  color: black;
  border-radius: 5px 5px 5px;
  box-shadow: 8px 8px 16px rgb(28, 27, 27);
}



  .background2 {
  margin: 20px; 
  padding: 10px 10px 10px 10px;
  background-image: linear-gradient(#c2d9f8, #519ace);
  color: black;
  border-radius: 5px 5px 5px;
  box-shadow: 8px 8px 16px rgb(28, 27, 27);
  transition: 5s;
}

 .background2:hover {
 background-image: linear-gradient(#c2d9f8, #030507);

} 



ul li{
  margin: 8px;
  transition: 1s;

}

ul li:hover{
  text-shadow: 1px 1px 1px white;
  background-image: linear-gradient(#fdc959, #b08104);
}


 li::marker{
  color: blue;

}




.footer {
  width: 99%;
  font-size: .75rem;
  padding: 10px 10px 10px 10px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
color: white;
margin-top: auto;
    background-image: linear-gradient(rgb(208, 182, 31), rgb(103, 88, 4));

}



.footer1 {
	flex: 1 1 32%;
  margin: 5px 5px 5px 5px;
 text-align: center;

}


.footer2 {
	flex: 1 1 32%;



}


.footer3 {
	flex: 1 1 32%;
  text-align: center;



}