@media (prefers-reduced-motion:no-preference) {
    * {
      scroll-behavior: smooth;
    }
}

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


#navbar {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
background-color: #be3144;
width: 100%;

}

#navbar ul {
display: flex;
}

#navbar li {
list-style-type: none;
}

#navbar a {
display: block;
text-decoration: none;
color: #f0f0f0;
padding: 1rem;
font-size: 1.5rem;
}

#navbar a:hover {
background-color: #3a3d40;
}

#welcome-section {
width: 100%;
height: 100vh;
background: linear-gradient(62deg, #3a3d40, #181719);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

#welcome-section h1 {
color: #f0f0f0;
font-size: 3.5rem;
}

#welcome-section h3 {
color: red;
font-weight: normal;
font-size: 1.5rem;
font-style: italic;
}

#projects {
text-align: center;
padding: 5rem 2rem;
background-color: #45567d;
}

#projects h2 {
border-bottom: 1px solid white;
color: white;
font-size: 2rem;
}

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}

.project-tile {
width: 100%;
max-width: 500px;
height: 425px;
border-radius: 10px;
background: #303841;
text-decoration: none;
color: white;
box-shadow: 8px 8px 10px 5px rgba(100, 100, 100, 0.3);
}

.project-tile img {
width: 100%;
height: calc(100% - 6rem);
object-fit: cover;
border-radius: 10px 10px 0px 0px;
}

.project-tile p {
padding: 2rem 0.5rem;
font-size: 2rem;

}

#big-text {
  padding: .5rem .5rem;
}

#small-text {
  font-size: .8rem;
  padding: 5px 0 10px 0;
}

#contact {
width: 100%;
height: 80vh;
background-color: #303841;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

#contact h2 {
font-size: 3rem;
color: white;

}

#contact p {
font-style: italic;
color: white;
opacity: 50%;
font-size: 1.2rem;
}

.contact-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
margin-top: 3rem;
}

#contact a {
text-decoration: none;
color: white;
font-size: 1.5rem;
padding: 1rem 1.5rem;
}

.fa-envelope {
font-weight: normal;
}

footer {
border-top: 5px solid #be3144;
height: 100px;
background-color: #303841;
}

@media only screen and (max-width: 450px) {
  .project-tile p {
    font-size: 1.5rem;
  }
}