* {margin: 0 auto; padding: 0; box-sizing: border-box;}

h1,h2,h3,h4,h5,h6 {font-family: "Work Sans", sans-serif; font-weight: 300; color: #2B2B2B;}
p,a {font-family: "Inter", sans-serif; color: #2B2B2B}

/* MAIN */
body {
	background-color: #FFFEFB;
}

.fade-in-text {
  opacity: 0; /* starts invisible */
  animation: fadeSlideIn 1s ease-out forwards;
}

.fade-in-image {
  opacity: 0; /* starts invisible */
  animation: fadeSlideIn 1s ease-out forwards;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* starts 20px lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HEADER */
header, section, footer {
	width: 1156px;
}

section {padding: 100px 0 100px 0;}

section h2 {
	font-size: 42px;
}

section h3 {
	font-size: 32px;
}

/* NAV */
header p,
header nav {
    margin: 0;  /* Reset the auto centering */
}

header .name {
	font-weight: bold;
	font-size: 18px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

header nav ul {
	display: flex;
  	list-style: none;
 	margin: 0;
    padding: 0;
    gap: 1.5rem;
}

ul li a {text-decoration: none;}
ul li a:hover {text-decoration: underline;}

/* HERO */


#hero {
	display: grid;
	gap: 24px;
}

#hero h1 {
	font-size: 84px;
	text-align: center;
	width: 580px;
	font-weight: bold;
}

#hero p {
	font-size: 24px;
	color: #575757;
	text-align: center;
}

#hero button {
	background-color: #2B2B2B;
	border: none;
	color: #fdfdfd;
	padding: 18px 36px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	cursor: pointer;
	border-radius: 4px;
	box-shadow: 2px 4px 5px #3a4152;
}

#hero button:hover {
	text-decoration: underline;
}

#hero img {
	position: relative;
    left: 205px;
    bottom: 75px;
}

/* WORK */
#work h2 {
	text-align: center;
	margin-bottom: 40px;
}

.projects {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 50px 50px;
}

.case-study {
	width: 100%;
}

.case-study img {
	width: 100%;
	height: 250px;
}

/* FOOTER */
footer {
	height: 50px;
}

footer p {
	text-align: center;
}