@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap");
* {
  font-family: Poppins, sans-serif;
  --color1: hsl(0, 0%, 90%);
  --color2: hsla(0, 0%, 80%, 0.4);
  --color3: #39ff14;
  --bg-color: #161a1a;
}
body {
  background-color: var(--bg-color);
  overflow-x: hidden;
}
img {
  pointer-events: none;
}
/* BORDER IMAGE =============== */
.img-thumbnail {
  background-color: var(--color1);
  max-width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  height: auto;
  border: none;
}
/* BUTTON =============== */
.btn {
  background-color: var(--color1);
  color: var(--bg-color);
  font-size: 1em;
  font-weight: bold;
  margin: 1.1em 0;
}
.btn:hover {
  background-color: var(--color3);
}
/* TEXT =============== */
.display-2 {
  color: var(--color1);
  font-family: "Playfair Display", serif;
}
.display-6 {
  color: var(--color1);
  font-weight: bold;
  font-size: 1.5rem;
  font-family: "Playfair Display", serif;
  text-transform: lowercase;
}
.h6,
a,
p {
  color: var(--color2);
}
a:hover {
  color: var(--color3);
}
/* NAVBAR =============== */
.navbar .navbar-nav .nav-link {
  color: var(--color1);
  font-size: 1.2em;
}
.navbar .navbar-nav .nav-link:hover {
  color: var(--color3);
}
.sm-icons {
  flex-direction: row;
}
.hamburger:hover {
  filter: opacity(0.5);
}
.navbar-brand {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
}
.navbar-brand:hover {
  filter: opacity(0.5);
}
@media only screen and (max-width: 960px) {
  .nav-item .nav-link {
    padding-right: 1em;
  }
}
/* ABOUT ME =============== */
.img-about {
  border: 10px solid var(--color1);
  border-radius: 50%;
  max-width: 60%;
  margin-left: 20%;
}
/* SKILL =============== */
.iconify {
  font-size: 2em;
  cursor: pointer;
}
/* SERVICE =============== */
.card {
  background-color: var(--bg-color);
  border: none;
}
.h5-service {
  color: var(--color1);
}
/* CONTACT =============== */
.form-control {
  background-color: var(--color2);
  color: var(--color1);
  border: none;
}
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: var(--color2);
  filter: opacity(0.5);
}
.iconify.arrow-up {
  font-size: 1.4em;
}