/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&family=Source+Code+Pro:wght@400;500&display=swap");

/* Variables */
:root {
  --col-dark: #16123f;
  --col1: #abd699;
  --col2: #ffe26a;
  --col3: #75c9b7;
  --col4: #c7ddcc;
}

/* General */

body {
  font-family: 'Poppins' sans-serif;
  color: var(--col-dark);
  font-size: 1.2rem;
}

a {
  color: inherit;
  font-weight: bold;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
}

.container-fluid {
  padding: 10%;
}

/* Navbar */
.navbar {
  background: var(--col1);
  padding: 0% 2rem;
}

.navbar .navbar-brand {
  font-family: 'Source Code Pro', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--col-dark)
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: 'Source Code Pro', sans-serif;
  font-weight: 100;
  font-size: 1rem;
}

/* Title */

#title {
  background-color: var(--col1);
}

.title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 4rem;
  word-spacing: 9999px;
  text-align: center;
}

@media (max-width: 768px) {
  .title {
      font-size: 2.7rem;
    }
  }

.title-image {
  position: static;
  height: 100%;
  width: 100%;
}


/* About Me */
.aboutme-image {
  text-align: center;
  width: 100%;
}

.name {
  padding: 0 10px;
  background-color: var(--col-dark);
  color: white;
}

/* Projects */
#projects {
  background-color: var(--col3);
}

.project-link {
  text-decoration: none;
  color: inherit;
  transition: color .4s ease-in-out;
}

.project-link:hover {
  box-shadow: inset 100px 0 0 0 var(--col2);
  color: white;
}

/* Contact */
a {
  text-decoration: none;
}

textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
}

/* Footer */

.footer-links {
  text-align: center;
}