/* Style the header */

:root {
  --primary-color: aquamarine;
  --secondary-color: #333333;
  --third-color: white;
  --fourth-color: green;
  --light-grey: #cccccc;
  --box-shadow-color: grey;
  --corp-font: Monotype Corsiva;

}
header {
  position: sticky;
  top: 0px;
  z-index: 1;
}
.header {
    display: flex;
    background-color: var(--secondary-color);
    color: var(--third-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24pt;
    text-align: center;
    justify-content: center;
    height: 100px;
    width: 100%;
}
  
  .header h1 {
    font-family: var(--corp-font);
    font-size: 2em;
    font-weight: normal;
    padding: 5px;
    margin: auto;
}

/* Style for main body */
body{
  background-color: var(--primary-color);
  margin: 8pt;
}

/* Style for What is Popley Matters about box*/
.aboutpm {
  text-align: justify;
  max-width: 1200px;
  margin: 50px auto;
  background-color: var(--light-grey);
  padding: 20px;
  border-radius: 15px;
  border: 4px solid  var(--fourth-color);
  box-shadow: 5px 10px var(--box-shadow-color);
}

/* Style for About title */
.aboutpm h2{
  text-decoration: underline;
  text-align: center;
  font-size: 2em;
}

/* Style the top navigation bar*/
.topnav {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: var(--secondary-color);
  width: 100%;
}

.topnav #myLinks {
  display: none;
}

/* Style for Nav Links */
.topnav a {
  font-family: Arial 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, Helvetica, sans-serif;
  list-style: none;
  color: #f2f2f2;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  font-size: 12px;
  display: block;
}

.topnav a.icon {
  background: --secondary-color;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.topnav a:hover {
  background-color: var(--light-grey);
}
.active {
  background-color: --secondary-color;
  color: white;
}

/* size box to put Popley Matters Issues in */
.displayindesign{
  height: 809px;
  width: 1200px;
  display: flex;
  margin: 0px auto;
}

/* format message area on contact page */
input, textarea {
  width: 95%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 15px;
  border: 1px solid #ccc;
}

/* Pseudo-elements for Email and Phone Labels */
/* Add ✉️ and 📞 icons before the labels and Facebook after */
.phone-label::before{content: "📞";}
.email-label::before{content: "✉️";}

/* Styling the Terms and Conditions Link On Contact Page*/
.terms-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

/* Add visited states for the link on contact Page*/
.terms-link:visited {
  color: purple;
}

/* Add hover states for the link pn Contact Page */
.terms-link:hover {
  color: var(--fourth-color);
}

/* Formatting for Contact Page Form */
.contact-form-container {
  background-color: var(--light-grey);
  padding: 20px;
  border-radius: 15px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  border: 4px solid var(--fourth-color);
  box-shadow: 5px 10px (--box-shadow-color);
  margin: 50px auto;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

#mobile-menu {
  display: none;
  justify-content: center;
  align-items: center;
}

.ui-menu { width: 340px; margin: auto;}

@media screen and (max-width: 875px) {
  #mobile-menu {display: flex;}
  .header h1 {font-size: 2rem;}
  body h3 {font-size: 1rem;}
  body p {font-size: .75rem;}
  #desktop-menu{display: none;}
  #mylinks a {padding: 4px 6px;}
  }

/* Style the footer for whole website*/
.footer {
  background-color: var(--secondary-color);
  Color: var(--third-color);
  padding: 2px;
  text-align: center;
}