/* STYLE SECTIONING TAGS */
* { /* Reset the space of the webpage, gets rid of the space between header and top of page*/
   margin: 0px;
   padding: 0px;
}

/*everything in the body*/ 
body {
   background-color: #ededed; 
   font-family:"Verdana";
}

main{
   margin-right:10%;
   margin-left:10%;
}

/* STYLE TEXT */
header{
   color:#486048;
   padding:20px;
   text-align:center;
   text-shadow: 1px 1px 0 black, -1px -1px 0 white; 
}

p{
   font-size:20px;
   padding:10px;
   margin-bottom:15px;
}

h1{
   margin-bottom:20px;
}

/* STYLE IMAGES */
img{
   max-width:500px;
   max-height:250px;
   border:5px solid #486048;
   margin-bottom:30px;
}

/*flex-container and media screen is what adds responsitivity to the wesbite*/
.flex-container{
  display:flex;
  justify-content: center;
  gap:20px;
  flex-direction:row;
  flex-wrap:nowrap;
}
/*the bigger the width, the quicker it will wrap and display as a column*/
@media screen and (max-width:1000px){
  .flex-container{
    flex-wrap:wrap;
  }
}

/* STYLE NAV BAR */
ul{
  list-style-type:none;
  background-color:#d4d4d4;
  overflow:hidden;
  padding-top:20px;
  padding-bottom:20px;
  margin-bottom:10px;
  text-align: center;
   /*makes it so it is in a row and has a gap*/
  display:flex;
  flex-direction:row;
  justify-content:right;
   padding-right:20px;
   gap: 20px;
}

/*styles the links in the navbar*/
li a{
  color:#486048;
  font-size:20px;
  padding:10px;
  text-decoration:none;
  border:3px solid gray;
  background-color:#d6e6d6;
}

li a:hover{
  background-color:#ededed;
}

/* STYLE BUTTONS */
button{
   background-color:#ededed;
   padding:10px;
   margin-top:5px;
   border:2px solid #486048;
   font-size:20px;
   margin-right:auto;
   margin-left:auto;
}

/* ADD MORE! */
label{
   margin-bottom:10px;
   font-size:20px;
}

input{
   margin-bottom:10px;
   height:20px;
   margin-right:auto;
   margin-left:auto;
}

.genEmail{
   background-color:#d6e6d6;
   display:flex;
   justify-content: center;
   flex-direction:column;
   padding:10px;
   text-align:center;
   border:5px solid gray;
}

.takeActionImg{
   display:flex;
   justify-content: center;
   gap:20px;
}

button:hover{
   background-color:gray ;
   color:white;
}

.title{
   font-size:25px;
   text-shadow: 1px 1px 0 black, -1px -1px 0 white;
}