/*
Your portfolio should have at least one media query
The height of the welcome section should be equal to the height of the viewport
The navbar should always be at the top of the viewport */

:root {
  --navbar-height: 115px;
}

@media screen and (min-width: 540px) {
  :root {
    --navbar-height: 73px;
  }
}

html *,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 16px;
}

html {
  scroll-padding-top: var(--navbar-height);
}

body {
  font-family: 'Cousine', sans-serif;
  padding-top: var(--navbar-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Gabarito', sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

#navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #12212d;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid rgb(180, 180, 180);
  z-index: 9999;
}

#navbar>img {
  margin-bottom: 1.5rem;
}

#main-menu>a {
  font-size: 0.9rem;
  margin-right: 1rem;
  display: inline-block;
}

#main-menu>a:last-of-type {
  margin-right: 0;
}

#main-menu>a:link,
#main-menu>a:visited {
  color: #bdc6ce;
  text-decoration: none;
}

#main-menu>a:hover,
#main-menu>a:active {
  color: white;
  text-decoration: underline;
}

@media screen and (min-width: 540px) {
  #navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
  }

  #main-menu>a {
    margin-right: 2rem;
  }

  #navbar>img {
    margin-bottom: 0;
  }
}

#welcome-section {
  background-color: #23415a;
  color: #e9ecef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: calc(100vh - var(--navbar-height));
  width: 100%;
  padding: 0 3rem;
}

@keyframes welcome-text {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

#welcome-section>* {
  opacity: 0;
  animation-delay: 0.5s;
  animation-name: welcome-text;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#welcome-section>h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#welcome-section>p {
  line-height: 1.75rem;
}

#welcome-section>a {
  background-color: #5a2341;
  border-radius: 7px 0 7px 0;
  color: #e9ecef;
  display: block;
  margin-top: 2rem;
  text-decoration: none;
  font-size: 1rem;
  padding: 1rem;
}

#welcome-section>a:link,
#welcome-section>a:visited {
  box-shadow: none;
}

#welcome-section>a:hover,
#welcome-section>a:visited {
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.1);
  transition-duration: 0.25s;
}

@media only screen and (min-width: 540px) {
  #welcome-section>h1 {
    font-size: 4rem;
  }

  #welcome-section>a {
    font-size: 1.25rem;
    padding: 1rem 2rem;
  }
}

@media only screen and (min-width: 992px) {
  #welcome-section>h1 {
    font-size: 6rem;
  }
}

#projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 100%;
  padding: 3rem;
  background-color: #fbfbfc;
}

@media only screen and (min-width: 768px) {
  #projects {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (min-width: 992px) {
  #projects {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (min-width: 1200px) {
  #projects {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

#projects>h2 {
  text-align: center;
  grid-column: 1 / -1;
  margin-bottom: 2rem;
  font-size: 4rem;
  color: #12212d;
}

#projects>.project-tile {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #d3d9de;
  border-radius: 3px;
  overflow: hidden;
  height: 100%;
  text-align: center;
}


#projects>.project-tile>.proj-screenshot {
  width: 100%;
  margin: 0 1.5rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

#projects>.project-tile>.proj-title {
  font-size: 1.5rem;
  padding: 1rem;
}

#projects>.project-tile>.proj-description {
  font-size: 1.1rem;
  line-height: 1.75rem;
  padding: 0 1rem 2rem;
}

#projects>.project-tile>.proj-techs {
  font-size: 0.9rem;
  line-height: 1.25rem;
  padding: 0 2rem 1rem;
  font-style: italic;
}

#projects>.project-tile>.see-project {
  background-color: #5a2341;
  color: #e9ecef;
  display: block;
  margin-top: auto;
  padding: 0.75rem 2rem;
  margin-bottom: 2rem;
  text-decoration: none;
}

#contact {
  background-color: #5a2341;
  color: #e9ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

#contact h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

#contact p {
  max-width: 768px;
  line-height: 1.75rem;
  text-align: center;
  margin-bottom: 2rem;
}

#contact>h3 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

#social-media-links {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
}

#social-media-links>a {
  font-size: 3rem;
  margin-right: 2rem;
}

#social-media-links>a:last-of-type {
  margin-right: 0;
}

#social-media-links>a:link,
#social-media-links>a:visited {
  color: rgba(255, 255, 255, 0.75);
}

#social-media-links>a:hover,
#social-media-links>a:active {
  color: rgba(255, 255, 255, 1);
}

#social-media-links>a:hover>i,
#social-media-links>a:active>i {
  text-shadow: 0 0 6px 1px #bdc6ce;
}

#contact .form-container {
  width: 100%;
  margin: 0 2rem 1rem;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#contact .form-container form label {
  display: block;
  align-items: center;
  margin-bottom: 1rem;
}

#contact .form-container form input,
#contact .form-container form textarea {
  font-family: 'Cousine', sans-serif;
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid white;
  border-radius: 3px;
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  width: 100%;
}

#contact .form-container form textarea {
  min-height: 16rem;
}

#contact .form-container form input:not([type="submit"]):focus,
#contact .form-container form textarea:focus {
  background-color: white;
}

#contact .form-container form input[type="submit"] {
  max-width: 180px;
  margin-left: auto;
  color: #5a2341;
  background-color: white;
  border: 3px solid #12212d;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
}

#contact .form-container form input[type="submit"]:hover,
#contact .form-container form input[type="submit"]:focus {
  box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.65);
}