style.css

/* Hide the scrollbar for all elements in Firefox and Edge */
* {
  scrollbar-width: none;
}

/* Optionally, you can style the scrollbar track and thumb in Firefox and Edge */
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: transparent; /* You can change this to a color or image */
}

*::-webkit-scrollbar-thumb {
  background: transparent; /* You can change this to a color or image */
}

.desktop {
  margin: 0;
  padding: 0;
  background: url('./images/static.png');
  background-repeat: repeat;
}

.desktop .title {
  display: flex;
  flex-direction: column;
  min-width: 1090px;
  align-items: center;
  padding: 0px 95px;
  padding-top: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  opacity: 0.45;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 41.5px;
  white-space: nowrap;
}

.desktop .designing-the {
  position: relative;
  margin-left: -1px;
  text-shadow: 0px 8px 17px #ffffff30;
  -webkit-text-stroke: 1px #ffffff;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 90px;
  letter-spacing: 0;
  line-height: 96.5px;
  text-align: center;
}

.desktop .text-wrapper-2 {
  position: relative;
  width: fit-content;
  text-shadow: 0px 8px 24px #ff896f2e;
  background: linear-gradient(
    90deg,
    rgb(177.44, 88.72, 88.72) 0%,
    rgb(96.73, 93.5, 255) 100%
  );
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 90px;
  letter-spacing: 0;
  line-height: 96.5px;
  white-space: nowrap;
}

.desktop .p {
  position: relative;
  width: fit-content;
  opacity: 0.14;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 41.5px;
  white-space: nowrap;
}

.desktop .div-2 {
  display: flex;
  flex-direction: column;
  min-width: 1090px;
  align-items: flex-start;
  justify-content: center;
  gap: 33px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .div-wrapper {
  display: flex;
  width: 471px;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 26px 55px;
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.desktop .text-wrapper-3 {
  position: relative;
  width: 281.7px;
  margin-top: -1px;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .about-me-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0px 94px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  opacity: 0.67;
  font-family: "Stretch Pro-Basic", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 27px;
  text-align: center;
  letter-spacing: 0;
  line-height: 34px;
}

.desktop .projects-frame {
  flex-direction: column;
  min-width: 1090px;
  align-items: flex-start;
  gap: 33px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .projects {
  position: relative;
  width: 279.84px;
  margin-top: -1px;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .div-3 {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 34px;
  padding: 0px 89px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .project-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .rectangle {
  width: 357.29px;
  height: 254.07px;
  position: relative;
  object-fit: cover;
}

.desktop .div-4 {
  position: relative;
  align-self: stretch;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .div-wrapper-2 {
  display: flex;
  width: 414.35px;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 23px 94px;
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.desktop .text-wrapper-5 {
  position: relative;
  width: 219.27px;
  margin-top: -1px;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .images-item {
  flex-direction: column;
  width: 400px;
  gap: 14px;
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .image {
  display: flex;
  flex-direction: column;
  height: 300px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.desktop .interstellar-image {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 225.56px;
  object-fit: cover;
}

.desktop .oliver-image {
  position: relative;
  align-self: stretch;
  width: 300px;
  height: 100%;
  object-fit: cover;
}

.desktop .image-2 {
  display: flex;
  flex-direction: column;
  height: 300px;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.desktop .img {
  width: 350px;
  height: 123.9px;
  position: relative;
  object-fit: cover;
}

.desktop .rectangle-2 {
  width: 100px;
  height: 100px;
  margin-top: -41px;
  position: relative;
  object-fit: cover;
}

.desktop .rectangle-wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.desktop .rectangle-3 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  object-fit: cover;
}

.desktop .image-3 {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.desktop .rectangle-4 {
  position: relative;
  width: 236.27px;
  height: 236.27px;
  z-index: 1;
  object-fit: cover;
}

.desktop .rectangle-5 {
  width: 180px;
  height: 180px;
  margin-left: -59px;
  z-index: 0;
  position: relative;
  object-fit: cover;
}

.desktop .rectangle-6 {
  width: 213.18px;
  height: 300px;
  position: relative;
  object-fit: cover;
  border-radius: 7px;
  border: 2px solid;
  border-color: #a8a8a867;
}

.desktop .span {
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .reviews-frame {
  flex-direction: column;
  gap: 62px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .reviews {
  flex-wrap: wrap;
  gap: 29px 29px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .div-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .review {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding: 25px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff0a;
  border-radius: 9px;
  border: 2px solid;
  border-color: #a8a8a838;
}

.desktop .profile-picture {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.desktop .image-4 {
  position: relative;
  width: 111.45px;
  height: 111.45px;
}

.desktop .text-wrapper-6 {
  position: absolute;
  width: 256px;
  height: 26px;
  top: 42px;
  left: 37px;
  text-shadow: 0px 5px 4px #ffffff40;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .review-text {
  position: relative;
  width: 308.56px;
  font-family: "Stretch Pro-Basic", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 21.4px;
}

.desktop .rating {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .img-2 {
  position: relative;
  width: 26.99px;
  height: 26.96px;
}

.desktop .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "Stretch Pro-Basic", Helvetica;
  font-weight: 400;
  color: #ffffff1c;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 10.7px;
  white-space: nowrap;
}

.desktop .image-5 {
  position: relative;
  width: 111.45px;
  height: 111.45px;
  object-fit: cover;
}

.desktop .pricing-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0px 94px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .prices {
  display: flex;
  padding: 0px 137px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 33px;
  align-self: stretch;
  flex-wrap: wrap;
}

.desktop .item {
  display: flex;
  flex-direction: column;
  width: 676.7px;
  align-items: center;
  gap: 34.77px;
  padding: 33.43px;
  position: relative;
  background-color: #ffffff0a;
  border-radius: 26.75px;
  border: 2.67px solid;
  border-color: #a8a8a838;
}

.desktop .item-banner {
  height: 251.704px;
  width: 100%;
  object-fit: cover;
  border-radius: 12.036px;
  border: 1.337px solid rgba(255, 255, 255, 0.31);
  background: url('./images/nopreview.png'), lightgray 50% / cover no-repeat, rgba(255, 255, 255, 0.20);
}

.desktop .item-title {
  position: relative;
  width: 465.42px;
  text-shadow: 0px 5px 4px #ffffff40;
  font-family: "Stretch Pro-Basic", Helvetica;
  font-weight: 400;
  color: #FFFFFF;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 25.7px;
  text-align: center;
}

.desktop .item-body {
  position: relative;
  width: 100%;
  text-shadow: 0px 5px 4px #ffffff40;
  font-family: "Stretch Pro-Basic", Helvetica;
  font-weight: 400;
  color: #FFFFFF;
  font-size: 26.75px;
  letter-spacing: 0;
  line-height: 25.7px;
}

.desktop .contact-me-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 45px;
  padding: 0px 94px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

.desktop .text {
  position: relative;
  align-self: stretch;
  opacity: 0.8;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 43px;
  text-align: center;
  letter-spacing: 0;
  line-height: 34px;
}

.desktop .text-wrapper-8 {
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 43px;
  letter-spacing: 0;
  line-height: 34px;
}

.desktop .text-wrapper-9 {
  font-size: 33px;
}

.desktop .discord-server {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop .logo {
  position: relative;
  width: 74px;
  height: 74px;
}

.desktop .logo-top {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  margin-bottom: 30px;
  box-shadow: #7a0a39c9 0 0 90px 0px;
}

.desktop .text-wrapper-10 {
  position: relative;
  width: 465.42px;
  text-shadow: 0px 5px 4px #ffffff40;
  font-family: "Stretch Pro-Regular", Helvetica;
  font-weight: 400;
  color: #7ba5ff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 25.7px;
}