/* CSS Reset */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* Root Variables */
:root {
  --text: #ededed;
  --bg1: #171717;
  --bg2: #121212;
  --primary: #6d8db3;
  --secondary: #808080;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--bg1);
  color: var(--text);
}

#landing,
#about,
#tools,
#projects,
#contact {
  background-color: var(--bg2);
}

#landing span,
#about span,
nav a > span,
h3,
h5 {
  color: var(--primary) !important;
}

/* Navbar Section */
nav,
#contact-me div {
  background-color: var(--bg1);
}
.nav-link {
  color: var(--text) !important;
}
.nav-link:hover {
  color: var(--primary) !important;
}

/* End of Navbar Section */

#country,
#projects a {
  color: var(--secondary);
}

/* Tools Section */
#tools img {
  width: 125px;
  height: 125px;
  object-fit: contain;
}
/* End of Tools Section */

/* Project Section */
.card div {
  background-color: var(--bg1) !important;
}
#projects p {
  color: var(--text);
}
.note {
  color: var(--secondary) !important;
}
.links a {
  color: var(--primary) !important;
}
.links a:hover {
  text-decoration: none;
}
#projects span {
  color: var(--primary);
}
/* End of Project Section */

/* Contact Section */
.modal-dialog {
  color: var(--bg2) !important ;
}

form,
#contact-me div > a {
  background-color: var(--bg1) !important;
  color: var(--text) !important;
}

#message {
  height: 100px;
}

#contact button {
  background-color: var(--primary) !important;
  color: var(--bg1) !important;
}

#contact button:hover {
  color: var(--text) !important;
}

#contact a p:hover {
  color: var(--secondary);
}

/* End of Contact Section */

@media screen and (max-width: 1000px) {
  #tools img {
    width: 100px;
    height: 100px;
  }
}