:root {
  --main: #E8E9F3;
  --secondary: #221F1F;
  --highlight: #ccba15;
}

/* Under this text are all the specific styling colors for all the elements on the site */

body {
  background-color: var(--main);
}

nav {
  background-color: var(--secondary);
}

.mobileNavLinks {
  background-color: var(--secondary);
}
#Menu_btn {
  background-color: var(--main);
}

/* nav bar links (HOME, ABOUT, ...) */
a {
  color: var(--main);
}
.highlight {
  background-color: var(--main);
  color: var(--secondary);
}

/* HOME section */
h1 {
  color: var(--main);
}
main p{
  color: var(--main);
}
main .links a{
  background-color: var(--main);
  color: var(--secondary); 
}

/* ABOUT section */
.about img{
  background-color: var(--secondary); 
}
.aboutBox p{
  background-color: var(--secondary);
  color: var(--main); 
}

/* SERVICE section */
.serviceDisplay h3{
  color: var(--main);
}
.serviceDisplay img {
  background-color: var(--secondary);
}

/* CONTACT section */
.contactBox {
  background-color: var(--secondary);
}
.contactInfo {
  border-color: var(--main);
}
.contactInfo h3{
  color: var(--main);
}
.contactInfo a{
  background-color: var(--main);
  color: var(--secondary);
}
.contactInfo .icon{
  background-color: var(--secondary);
}

/* FOOTER section */
footer {
  background-color: var(--secondary);
}
.iconBox {
  border-color: var(--main);
}
.iconBox .icon {
  background-color: var(--main);
}
/* this is for the border line */
.usefulLinks {
  border-color: var(--main);
}
.usefulLinks h4{
  color: var(--main);
}
.copyright {
  color: var(--main);
}