@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  background-color: #423E37;
  color: #EDEBD7;
  font-family: "Roboto", sans-serif;
}

a {
  color: #EDEBD7;
  text-decoration: none;
}

#left-side-header {
  display: flex;
}

#right-side-header {
  margin-right: 4.6875rem; /* 75px */
  font-size: 1.875rem; /* 30px */
}

h1 {
  margin-top: 0.625rem; /* 10px */
  padding-left: 1.5625rem; /* 25px */
  font-size: 3rem;
  font-weight: lighter;
  border-bottom: 0.125rem solid #E3B23C; /* 2px */
  margin-bottom: 0; /* 0px */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5625rem; /* 25px */
  padding-top: 0.9375rem; /* 15px */
}

header img {
  max-height: 12.5rem; /* 200px */
  margin-right: 1.25rem; /* 20px */
  border: 0.125rem solid; /* 2px */
  border-radius: 0.5rem; /* 8px */
  border-color: #E3B23C;
}

.header-links {
  font-size: 2rem;
  padding-right: 1.25rem; /* 20px */
  transition: all .2s ease-in-out;
}

.header-h2 {
  transition: all .2s ease-in-out;
}

.header-h2:hover {
  color: #E3B23C;
  transform:scale(1.10)
}

.header-links i:hover {
  color: #E3B23C;
  transform:scale(1.10)
}

.name-title {
  padding-left: 12.5rem; /* 200px */
  font-size: 3.75rem; /* 60px */
}

.skills {
  margin-top: 0; /* 0px */
  display: flex;
  justify-content: center;
}

.left {
  border-left: 0.125rem solid #E3B23C; /* 1px */
}

.right {
  border-right: 0.125rem solid #E3B23C; /* 1px */
}

.skill {
  margin-top: 0; /* 0px */
  padding-left: 0.625rem; /* 10px */
  padding-right: 0.3125rem; /* 5px */
  border-bottom: 0.125rem solid #E3B23C; /* 1px */
}

#body-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40%;
}


#outer-body-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#project-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  width: 40%;
}

.projects-image {
  border: 0.125rem solid black; /* 5px */
  border-radius: 0.3125rem; /* 5px */
  /* Remains the same as percentage */
  width: 100%;/* Remains the same as percentage */
  transition: transform .2s ease-in-out;
}

.projects-image:hover {
  transform: scale(1.01);
}