/* CSS Reset Rule */
* {
    margin: 0; padding: 0; box-sizing: border-box;
}

/*====== Mobile/portrait tablets styles and bigger =========*/


.container {
    margin: 4px 8px;
}

  body {
            background-color: rgb(0, 0, 0)
        }
       h1 {
        text-align: center;
        font-family: "Almendra", serif; 
        letter-spacing: 3px;
    }

    .hometown h1 {
        text-align: center;
        font-family: "Almendra", serif; 
        letter-spacing: 5px;
    }

 .almendra-regular {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: normal;
}

       p {text-align: center;
        color:rgb(255, 255, 255);
        margin-bottom: 10px;
      }

       nav {
        margin: 11px;
        letter-spacing: 3px;
        text-align: center;
    }
       h2 {
        margin: 11px;
        letter-spacing: 3px;
        text-align: center;
    
    }
       li {text-align: center;}
       ul.myul {text-align: center;}

     
     img {
        margin-top: 60px;
        border-radius: 8px; box-shadow: 2px 2px 25px #ff0000; max-width: 100%; height: auto;
        transition: all 600ms linear;
         }
  
    img:hover {
       border-radius: 8px; box-shadow: 2px 2px 25px #c0b5b5; max-width: 100%; height: auto;
    }
a:link {
  color: rgb(255, 0, 0);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(182, 0, 0);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: rgb(255, 0, 0);
  background-color: transparent;
  text-decoration: underline;
}

nav{
  color:rgb(255, 0, 0);
}

.photoarray {

display:flex;
flex-flow:row wrap;
justify-content: space-around;

}

.photoarray figure {

  border:1px solid red;
  flex: 0 0 auto;
  width: 600px; aspect-ratio: 1;
  background-size: cover;
  background-image: url(../images/santarosa2.jpg);
}

.photoarray figure:nth-child(2){
  background-image: url(../images/santarosa1.jpg);
}

.centerImage{
  display:block;
    margin-left: auto;
    margin-right: auto;
}

header{
  border: 5px solid black;
}

/* Dropdown Button */
.dropbtn {
  background-color: rgb(39, 6, 0);
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 16px;
  border: none;
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1.7em;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(255, 4, 4, 0.575);
  z-index: 1;
  text-align:center
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(247, 2, 2);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #d40000;}


main
    {
display: flex;
gap: 7px;
    }

main div{
  flex-wrap:wrap;
  border: 5px solid rgb(44, 44, 44);
  flex: 2 0 50%;
  background-color:rgb(39, 6, 0);
  margin-top: 20px;
  transition: all 600ms linear;
}

Main div:hover {
  border-radius: 8px; box-shadow: 2px 2px 25px #ffffff; max-width: 100%; height: auto;
}
footer{
    color: white;
  text-align:center;
  padding-top: 14%;
}



/*====== Landscape tablet and bigger =========*/
@media screen and (min-width: 1020px) {

article > header {
    margin:0px;
  }

main
    {
display: flex;
gap: 7px;
    }

main div{
  border: 5px solid rgb(44, 44, 44);
  flex: 2 0 50%;
  background-color:rgb(39, 6, 0);
  margin-top: 20px;
  transition: all 600ms linear;
}

Main div:hover {
  border-radius: 8px; box-shadow: 2px 2px 25px #ffffff; max-width: 100%; height: auto;
}

/* Dropdown Button */
.dropbtn {
  background-color: rgb(39, 6, 0);
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 16px;
  border: none;
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 23em;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  background-color: #000000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(255, 4, 4, 0.575);
  z-index: 1;
  text-align:center;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(247, 2, 2);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #d40000;}




} /*====== end of wide-screen styles =========*/