.home,
.home * {
  box-sizing: border-box;
}
.home {
  background: #17182d;
  display: flex;
  flex-direction: column;
  gap: 496px;
  align-items: center;
  justify-content: flex-start;
  height: 1314px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.hero {
  flex-shrink: 0;
  width: 700px;
  height: 160.85px;
  position: static;
}
.this-website-is-wip-you-can-see-my-current-portfolio-on-my-carrd {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 32px;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 393px);
  width: 700px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-5 {
  width: 197.6px;
  height: 51.85px;
  position: static;
}
.rectangle-1 {
  background: #184589;
  border-radius: 20px;
  width: 197.6px;
  height: 51.85px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 284px);
  box-shadow: 0px 4px 4px 0px rgba(217, 147, 50, 1);
}
.carrd {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 32px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 272px);
  width: 130.33px;
  height: 28.73px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-9 {
  flex-shrink: 0;
  width: 1212px;
  height: 470px;
  position: static;
}
.image-8 {
  width: 84.17%;
  height: 470px;
  position: absolute;
  right: 7.92%;
  left: 7.92%;
  top: 601px;
  filter: blur(100px);
  object-fit: cover;
}
.image-82 {
  width: 84.17%;
  height: 470px;
  position: absolute;
  right: 7.92%;
  left: 7.92%;
  top: calc(50% - 56px);
  object-fit: cover;
}
.rectangle-12 {
  background: linear-gradient(
    90deg,
    rgba(205, 140, 50, 1) 0%,
    rgba(103, 70, 25, 1) 100%
  );
  flex-shrink: 0;
  width: 100%;
  height: 17px;
  position: absolute;
  right: -100%;
  left: 100%;
  bottom: 0px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(-1, 1);
}
.header-contents-desktop {
  background: #181626;
  padding: 32px 26px 32px 26px;
  display: flex;
  flex-direction: row;
  row-gap: 25px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  width: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  top: 0px;
  box-shadow: 0px 5px 2px 0px rgba(167, 116, 45, 1);
}
.sir-strider {
  color: #ffffff;
  text-align: left;
  font-family: "RobotoMono-Bold", sans-serif;
  font-size: 35px;
  font-weight: 700;
  position: relative;
}
.frame-7 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 532px;
  height: 48px;
  position: relative;
  aspect-ratio: 532/48;
}
.group-8 {
  flex-shrink: 0;
  width: 144px;
  height: 48px;
  position: relative;
}
.rectangle-2 {
  background: #184589;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.button {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  right: 9.03%;
  left: 9.03%;
  width: 81.94%;
  bottom: 25%;
  top: 25%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-7 {
  flex-shrink: 0;
  width: 144px;
  height: 48px;
  position: relative;
}
.button-1 {
  flex-shrink: 0;
  width: 144px;
  height: 48px;
  position: relative;
}