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

html {
  font-size: 62.5%;
  color: #fff;
  scroll-behavior: smooth;
  font-family: "fira sans", sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

body {
  height: 100vh;
  width: 100vw;

  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: space-around; */
  /* transform: translateY(50%); */

  background: #032e15;
  background: -webkit-linear-gradient(
    180deg,
    rgba(3, 46, 21, 1) 0%,
    rgba(2, 47, 46, 1) 100%
  );
  background: -moz-linear-gradient(
    180deg,
    rgba(3, 46, 21, 1) 0%,
    rgba(2, 47, 46, 1) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(3, 46, 21, 1) 0%,
    rgba(2, 47, 46, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#032E15", endColorstr="#022F2E", GradientType=0);
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  height: 100%;
  width: 100%;
  /* margin-top: 5rem; */
}

.toast {
  position: fixed;
  top: 0;
  left: 50;
  transform: translateY(100%);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  color: #d1d1d1;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}

.toast p {
  font-size: 1.2rem;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  padding: 2rem 3rem;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-radius: 20px;
}

.profile p {
  font-size: 2rem;
  color: #d1d1d1;
}

.profile h1 {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 2%;
  text-transform: uppercase;
}

.hire-me-div {
  /* background-color: #fff; */
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  margin-top: 2rem;
  border-top: 1px solid #fff;
  padding: 2rem 1rem;
}

.hire-me-div a {
  font-size: 3rem;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  background-color: oklch(68.1% 0.162 75.834);
  text-transform: uppercase;
}

.project-image {
  width: 400px;
}

.project-image:hover {
  scale: 1.01;
}