@import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');

:root {
  font-size: 62.5%;
  --main-brand-color: #2E6185;
  --main-dark-color: #0B1D41;
  --main-light-color: #f2f1f3;
  --secondary-dark-accent: #5C6C85;
  --secondary-light-accent: #EBA073;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-padding-top: 70px;
}

body {
  font-size: 1.6rem;
  color: var(--main-light-color);
  background-color: var(--main-dark-color);
  font-family: Spartan, sans-serif;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  background-color: var(--main-brand-color);
  box-shadow:
    0 0.3px 0.6px rgba(0, 0, 0, 0.056),
    0 0.7px 1.3px rgba(0, 0, 0, 0.081),
    0 1.3px 2.5px rgba(0, 0, 0, 0.1),
    0 2.2px 4.5px rgba(0, 0, 0, 0.119),
    0 4.2px 8.4px rgba(0, 0, 0, 0.144),
    0 10px 20px rgba(0, 0, 0, 0.2);
}

.navbar-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar-list-item {
  padding-left: 2rem;
}

.navbar-list-item-link {
  text-decoration: none;
  color: var(--main-light-color);
}

a:hover {
  color: var(--secondary-light-accent);
}

#welcome-section {
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-image: url(../img/triangles.svg);
  background-size: cover;
  background-color: var(--main-brand-color);
  background-blend-mode: multiply;
}

.welcome-section-title {
  font-size: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.welcome-section-divider {
  border: 0;
  height: 1px;
  width: 70%;
  background-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0),
      var(--secondary-light-accent),
      rgba(0, 0, 0, 0));
  transition: all 0.5s;
}

.welcome-section-divider:hover {
  background-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0),
      var(--main-light-color),
      rgba(0, 0, 0, 0));
}

.welcome-section-subtitle {
  font-size: 2rem;
  max-width: 75%;
  text-align: center;
  line-height: 1.5;
}

h2 {
  margin: 0;
  padding: 4rem;
}

#projects {
  background-color: var(--main-light-color);
  color: var(--main-dark-color);
  text-align: center;
}

.project-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  justify-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 2rem 12rem 2rem;
}

@media (min-width: 1200px) {
  .project-mosaic {
    display: grid;
  }
}

.project-tile {
  background-color: var(--main-brand-color);
  box-shadow:
    0 0.1px 0.3px rgba(0, 0, 0, 0.056),
    0 0.3px 0.7px rgba(0, 0, 0, 0.081),
    0 0.6px 1.3px rgba(0, 0, 0, 0.1),
    0 1.1px 2.2px rgba(0, 0, 0, 0.119),
    0 2.1px 4.2px rgba(0, 0, 0, 0.144),
    0 5px 10px rgba(0, 0, 0, 0.2);
}

.project-tile-image {
  width: 100%;
  height: auto;
}

.project-tile-title {
  font-weight: bold;
  padding: 1rem 2rem;
}

.project-tile-title-link {
  text-decoration: none;
  color: var(--main-light-color);
}

#links {
  text-align: center;
}

.links-link {
  text-decoration: none;
  font-size: 2rem;
  color: var(--main-light-color);
  display: block;
  padding: 3rem;
}

.links-link i {
  font-size: 4rem;
}

footer {
  padding: 2rem;
  background-color: var(--secondary-dark-accent);
}