@charset "utf-8";

body {
  padding: 0;
  margin: 0;
  background-color: #C098F5;
  font-family:"Roboto", serif;
}

.desktop {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.desktop .desktop-wrapper {
  background-color: #ffffff;
  width: 1440px;
  height: 3694px;
}

.desktop .overlap-wrapper {
  height: 3694px;
  background-color: #ffffff;
}

.desktop .overlap {
  position: relative;
  width: 1440px;
  height: 3694px;
  background-image: url(./image/Background.png);
  background-size: 100% 100%;
}

.desktop .overlap-group {
  position: absolute;
  width: 788px;
  height: 454px;
  top: 859px;
  left: 548px;
}

.desktop .group {
  position: absolute;
  width: 788px;
  height: 454px;
  top: 0;
  left: 0;
  background-image: url("./image/Group 11.png");
  background-size: 100% 100%;
}

.desktop .rectangle {
  height: 41px;
  top: 413px;
  position: relative;
  background-color: #6720db;
  border-radius: 0px 0px 30px 30px;
}

.desktop .text-wrapper {
  position: absolute;
  font-family: "Righteous", sans-serif;
  width: 311px;
  top: 48px;
  left: 117px;
  font-weight: 400;
  color: #661fda;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .designer-artist {
  position: absolute;
  width: 263px;
  top: 133px;
  left: 117px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .flexcontainer {
  width: 547px;
  height: 101px;
  top: 249px;
  left: 117px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  position: absolute;
}

.desktop .text {
  position: relative;
  align-self: stretch;
  font-family: "Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .span {
  font-family: "Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  letter-spacing: 0;
}

.desktop .div {
  position: absolute;
  width: 794px;
  height: 287px;
  top: 2576px;
  left: 542px;
  border-radius: 30px;
}

.desktop .rectangle-wrapper {
  position: absolute;
  width: 794px;
  height: 287px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 30px;
}

.desktop .rectangle-2 {
  height: 42px;
  top: 245px;
  position: relative;
  background-color: #6720db;
  border-radius: 0px 0px 30px 30px;
}

.desktop .flexcontainer-2 {
  width: 320px;
  height: 118px;
  top: 35px;
  left: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: absolute;
}

.desktop .QR-code {
  position: absolute;
  width: 192px;
  height: 192px;
  top: 32px;
  left: 480px;
  object-fit: cover;
}

.desktop .me {
  position: absolute;
  width: 340px;
  height: 452px;
  top: 863px;
  left: 104px;
  object-fit: cover;
}

.desktop .img {
  position: absolute;
  width: 438px;
  height: 329px;
  top: 1495px;
  left: 898px;
  object-fit: cover;
}

.desktop .text-wrapper-2 {
  width: 300px;
  top: 758px;
  left: 570px;
  position: absolute;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .EDUCATION {
  position: absolute;
  width: 259px;
  height: 35px;
  top: 1423px;
  left: 106px;
}

.desktop .text-wrapper-3 {
  position: absolute;
  width: 197px;
  top: 1529px;
  left: 160px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .overlap-2 {
  position: absolute;
  width: 638px;
  height: 46px;
  top: 1592px;
  left: 160px;
}

.desktop .text-wrapper-4 {
  position: absolute;
  width: 638px;
  top: 0;
  left: 0;
  font-family:"Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 26px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .me-2 {
  position: absolute;
  width: 464px;
  top: 31px;
  left: 0;
  font-family:"Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .text-wrapper-5 {
  position: absolute;
  width: 197px;
  top: 1710px;
  left: 160px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .p {
  position: absolute;
  width: 638px;
  top: 1745px;
  left: 160px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 26px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .me-3 {
  position: absolute;
  width: 464px;
  top: 1805px;
  left: 160px;
  font-family:"Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .overlap-group-wrapper {
  position: absolute;
  width: 13px;
  height: 193px;
  top: 1544px;
  left: 123px;
}

.desktop .overlap-group-2 {
  position: relative;
  height: 193px;
}

.desktop .ellipse {
  top: 0;
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  background-color: #6720db;
  border-radius: 6.5px;
}

.desktop .line {
  position: absolute;
  width: 1px;
  height: 181px;
  top: 6px;
  left: 6px;
  object-fit: cover;
}

.desktop .ellipse-2 {
  top: 180px;
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  background-color: #6720db;
  border-radius: 6.5px;
}

.desktop .text-wrapper-6 {
  width: 373px;
  top: 2965px;
  left: 98px;
  position: absolute;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .element {
  position: absolute;
  width: 325px;
  height: 460px;
  top: 3070px;
  left: 193px;
  object-fit: cover;
}

.desktop .element-2 {
  position: absolute;
  width: 325px;
  height: 460px;
  top: 3070px;
  left: 555px;
  object-fit: cover;
}

.desktop .IMG {
  position: absolute;
  width: 325px;
  height: 460px;
  top: 3070px;
  left: 916px;
  object-fit: cover;
}

.desktop .text-wrapper-7 {
  position: absolute;
  width: 232px;
  top: 2462px;
  left: 655px;
  font-family:"Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .overlap-3 {
  position: absolute;
  width: 1232px;
  height: 565px;
  top: 90px;
  left: 104px;
}

.desktop .div-wrapper {
  position: absolute;
  width: 1232px;
  height: 565px;
  top: 0;
  left: 0;
}

.desktop .overlap-4 {
  position: relative;
  height: 565px;
}

.desktop .pink-purple-plastic {
  position: absolute;
  width: 1232px;
  height: 463px;
  top: 102px;
  left: 0;
  object-fit: cover;
}

.desktop .me-4 {
  position: absolute;
  width: 371px;
  height: 526px;
  top: 0;
  left: 737px;
  object-fit: cover;
}

.desktop .text-wrapper-8 {
  position: absolute;
  width: 420px;
  top: 293px;
  left: 130px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 100px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .HELLO-i-m {
  position: absolute;
  width: 311px;
  top: 233px;
  left: 130px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #661fda;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .overlap-5 {
  position: absolute;
  width: 1238px;
  height: 342px;
  top: 2027px;
  left: 98px;
  border-radius: 30px;
}

.desktop .group-2 {
  position: absolute;
  width: 1238px;
  height: 342px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 30px;
}

.desktop .rectangle-3 {
  height: 40px;
  top: 302px;
  position: relative;
  background-color: #6720db;
  border-radius: 0px 0px 30px 30px;
}

.desktop .text-wrapper-9 {
  position: absolute;
  width: 79px;
  top: 60px;
  left: 960px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-10 {
  width: 181px;
  top: 140px;
  left: 107px;
  position: absolute;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .me-5 {
  position: absolute;
  width: 184px;
  top: 180px;
  left: 104px;
  font-family: "Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .text-wrapper-11 {
  width: 264px;
  top: 145px;
  left: 865px;
  position: absolute;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .me-6 {
  position: absolute;
  width: 184px;
  top: 185px;
  left: 900px;
  font-family: "Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .text-wrapper-12 {
  position: absolute;
  width: 141px;
  top: 143px;
  left: 527px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .flexcontainer-3 {
  width: 212px;
  height: 15px;
  top: 165px;
  left: 495px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: absolute;
}

.desktop .span-wrapper {
  position: relative;
  align-self: stretch;
  margin-bottom: -9px;
  font-family:"Roboto", serif;
  font-weight: 400;
  color: #6720db;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-13 {
  top: 63px;
  left: 152px;
  position: absolute;
  width: 79px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .text-wrapper-14 {
  top: 62px;
  left: 567px;
  position: absolute;
  width: 79px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .group-3 {
  position: absolute;
  width: 819px;
  height: 15px;
  top: 115px;
  left: 184px;
}

.desktop .overlap-6 {
  position: relative;
  height: 15px;
}

.desktop .line-2 {
  position: absolute;
  width: 802px;
  height: 1px;
  top: 7px;
  left: 11px;
  object-fit: cover;
}

.desktop .ellipse-3 {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 2px;
  left: 806px;
  background-color: #6720db;
  border-radius: 6.5px;
  transform: rotate(90deg);
}

.desktop .ellipse-4 {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 0;
  left: 409px;
  background-color: #6720db;
  border-radius: 6.5px;
  transform: rotate(90deg);
}

.desktop .ellipse-5 {
  top: 0;
  transform: rotate(90deg);
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  background-color: #6720db;
  border-radius: 6.5px;
}

.desktop .text-wrapper-15 {
  position: absolute;
  width: 373px;
  top: 1926px;
  left: 103px;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .text-wrapper-16 {
  position: absolute;
  width: 373px;
  top: 2465px;
  left: 107px;
  font-family:"Righteous", sans-serif;
  font-weight: 400;
  color: #6720db;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop .group-4 {
  position: absolute;
  width: 313px;
  height: 286px;
  top: 2577px;
  left: 101px;
}

.footer {
  height: 90px;
  text-align: center;
  font-size: 10pt;
  padding-top: 3%;
}

@media (max-width:992px)/* The max-width is to set the breakpoint for smaller devices */ {
	.main {
		display: block; /* in normal view, the display of .main is flex. In smaller devices, we overide the display to become block*/
	}
	.row {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
	}
	.navi {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
		padding: 0; /* padding is set to 0 because to remove the space on the right*/
		text-align: center;
	}
	
	.aside-left {
		width: 100%; /* in normal view, the width of .aside-left is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
	}
	
	.aside-right {
		width: 100%; /* in normal view, the width of .aside-right is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
		text-align: center;
	}
	h1, h2, h3 {
		border: none;
		padding-bottom: 0;
	}
}