* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --color-1: #000;
  --color-2: #987654;
  --color-3: #ECD06F;
  --color-4:#9C9C9C;
  --box-shadow-md: -1px 1px 9px -3px #9C9C9C;
}
body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

ul li{
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1300px;
  width: 90%;
  margin: 0 auto;
}

nav{
  position: fixed;
  top:0px;
  width: 100%;

  color: white;
  background: var(--color-1);
    padding: 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    & p {
      font-weight: bold;
      font-size: 1.5rem;
    }
    & ul {
      display: flex;
      gap: 1rem;
      
      & a {
        color: white;
        font-weight: bold;
      }
    }
}

.main {
  #welcome-section {
    background: var(--color-3);
    text-align: center;
    .container {
      height: 100vh;
      display: flex;
      gap: 0.5rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  #projects{
    padding: 7rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    & h1{
      width: 100%;
      text-align: center;
      margin-bottom: 2rem;
    }
    .project-tile{
      max-width: 100%;
      width: 20rem;
      padding: 1rem;
      box-shadow: var(--box-shadow-md);
      background: var(--color-3);
      & p{
        margin-top: 0.5rem;
        margin-bottom: 1rem;
      }
      & a{
        background: var(--color-2);
        color: white;
        font-weight: bold;
        display: block;
        width: max-content;
        max-width: 100%;
        padding: 0.5rem 1rem;
      } 
    }

  }
}
footer{
  background: var(--color-1);
  color: white;
  .container{
    padding: 5rem 0;
    text-align: center;
    display: grid;
    justify-content: center;
    gap: 2rem;
    .footer-links{
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
      & a{
        color: white;
      }
      
    }
  }
}

@media screen and (max-width: 425px ) 
{
  nav{
    text-align: center;
    flex-direction: column;
    gap:1rem
  }
  
}