@font-face {
  font-family: "Bebas";
  src: url("/assets/Bebas-Regular.ttf");
  font-weight: 400;
}

.luiza {
  margin: 0;
  line-height: 100%;
}

.demianchuk {
  margin: 0;
  font-size: 8.125rem;
  line-height: 57%;
  color: var(--color-silver-100);
  margin-top: -6rem;
}

.luiza-demianchuk {
  height: 17.563rem;
  position: relative;
  text-transform: uppercase;
  display: inline-block;
}

.luiza-demianchuk-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.875rem 0 0;
  box-sizing: border-box;
  max-width: 100%;
}

.nav {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  flex-direction: row-reverse;
}

.nav__item {
  margin-right: 20px;
}

.nav__link {
  text-decoration: none;
  color: #00FFA1;
  /* font-weight: 600; */
  font-family: 'Bebas';
  padding: 10px 20px;
  border: 2px solid #00FFA1;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav__link:hover {
  background-color: #00FFA1;
  color: #333;
}

.nav__link {
  font-size: 1.5rem;
}

.right-links .nav__link {
  font-size: 1rem;
}

.right-links {
  display: flex;
}

header {
  /* padding: 20px 0; */
  background-color: #505050;
  padding-top: 1rem;
}

.about1 {
  width: 3.25rem;
  position: relative;
  line-height: 100%;
  white-space: pre-wrap;
  display: inline-block;
  flex-shrink: 0;
}

.about {
  align-self: stretch;
  border: 2px solid var(--color-mediumspringgreen-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-2xs) 1.375rem var(--padding-2xs) 1.5rem;
}

.portfolio1 {
  width: 5.375rem;
  position: relative;
  font-size: var(--font-size-5xl);
  line-height: 100%;
  font-family: var(--font-bebas);
  color: var(--color-mediumspringgreen-100);
  text-align: left;
  display: inline-block;
  flex-shrink: 0;
}

.portfolio {
  cursor: pointer;
  border: 2px solid var(--color-mediumspringgreen-100);
  padding: var(--padding-2xs) var(--padding-9xl) var(--padding-2xs) var(--padding-14xl);
  background-color: transparent;
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.contacts:hover,
.portfolio:hover,
.resume:hover {
  background-color: black;
  color: var(--color-mediumspringgreen-100);
  box-sizing: border-box;
}

.contacts1 {
  width: 5.063rem;
  position: relative;
  font-size: var(--font-size-5xl);
  line-height: 100%;
  font-family: var(--font-bebas);
  color: var(--color-mediumspringgreen-100);
  text-align: left;
  display: inline-block;
  flex-shrink: 0;
}

.contacts {
  cursor: pointer;
  border: 2px solid var(--color-mediumspringgreen-100);
  padding: var(--padding-2xs) var(--padding-14xl);
  background-color: transparent;
  align-self: stretch;
  flex: 0.9419;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.resume1 {
  width: 4.063rem;
  position: relative;
  font-size: var(--font-size-5xl);
  line-height: 100%;
  font-family: var(--font-bebas);
  color: var(--color-mediumspringgreen-100);
  text-align: left;
  display: inline-block;
  flex-shrink: 0;
}

.resume {
  cursor: pointer;
  border: 2px solid var(--color-mediumspringgreen-100);
  padding: var(--padding-2xs) 2.375rem var(--padding-2xs) 2.75rem;
  background-color: transparent;
  align-self: stretch;
  flex: 0.7558;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.about-portfolio-contacts-resum {
  margin: 0;
  height: 3.25rem;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-mediumspringgreen-100);
  font-family: var(--font-bebas);
}

.about-portfolio-contacts-resum,
.frame-group,
.frame-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.frame-group {
  width: 73.75rem;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.frame-wrapper {
  align-self: stretch;
  justify-content: flex-end;
  padding: 0 4rem;
  box-sizing: border-box;
}

.hello {
  color: var(--color-darkslategray-500);
}

.hello1 {
  color: rgba(61, 60, 60, 0.3);
}

.about-title {
  margin: 0;
  width: 61.563rem;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100%;
  z-index: 3;
}

.about-title-wrapper {
  width: 99.75rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}

.native,
.ukrainian1 {
  position: relative;
  line-height: 57%;
  text-transform: uppercase;
}

.ukrainian1 {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}

.native {
  font-weight: 600;
}

.level-values,
.level-values-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.level-values {
  background-color: var(--color-darkslategray-200);
  overflow: hidden;
  padding: var(--padding-5xs) var(--padding-9xl) var(--padding-5xs) 2.125rem;
}

.level-values-wrapper {
  padding: 0 var(--padding-8xs) 0 0.375rem;
  font-size: var(--font-size-base);
  color: var(--color-silver-100);
  font-family: var(--font-kantumruy-pro);
}

.english-container,
.ukrainian,
.ukrainian-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.ukrainian {
  gap: var(--gap-9xs);
}

.english-container,
.ukrainian-wrapper {
  padding: 0 var(--padding-3xs) 0 0;
}

.english-container {
  flex-direction: row;
  padding: 0 var(--padding-2xs);
}

.fluent {
  position: relative;
  line-height: 57%;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  min-width: 3.938rem;
}

.fluent-wrapper {
  background-color: var(--color-darkslategray-200);
  overflow: hidden;
  flex-direction: row;
  padding: var(--padding-5xs) 1.562rem var(--padding-5xs) 1.937rem;
  font-size: var(--font-size-base);
  color: var(--color-silver-100);
  font-family: var(--font-kantumruy-pro);
}

.english-wrapper,
.fluent-wrapper,
.german-wrapper,
.level-options {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.english-wrapper {
  flex-direction: column;
  padding: 0 0.25rem 0 0;
}

.german-wrapper,
.level-options {
  flex-direction: row;
  padding: 0 var(--padding-3xs) 0 0.562rem;
}

.level-options {
  background-color: var(--color-darkslategray-200);
  overflow: hidden;
  padding: var(--padding-5xs) 3.125rem;
  font-size: var(--font-size-base);
  color: var(--color-silver-100);
  font-family: var(--font-kantumruy-pro);
}

.dutch1 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 57%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: 4.875rem;
}

.dutch-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 0 var(--padding-2xl);
}

.level-options1 {
  background-color: var(--color-darkslategray-200);
  overflow: hidden;
  flex-direction: row;
  padding: var(--padding-5xs) 3.062rem;
  font-size: var(--font-size-base);
  color: var(--color-silver-100);
  font-family: var(--font-kantumruy-pro);
}

.frame-container,
.languages,
.level-options1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.languages {
  flex-direction: row;
  padding: 0 var(--padding-xl) 0 0;
  box-sizing: border-box;
  gap: var(--gap-5xl);
  max-width: 100%;
  font-size: var(--font-size-29xl);
  color: var(--color-mediumspringgreen-100);
}

.frame-container {
  flex-direction: column;
  gap: 2.812rem;
  max-width: 111%;
  font-size: 12.5rem;
  color: var(--color-darkslategray-300);
}

.frame-parent,
.home-inner {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.frame-parent {
  width: 91.25rem;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-xl);
  gap: 5.062rem;
}

.home-inner {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0 2.625rem;
  font-size: 18.75rem;
}

.toolbox {
  color: var(--color-mediumspringgreen-600);
}

.toolbox1 {
  color: var(--color-mediumspringgreen-700);
}

.education-title,
.toolbox-title {
  margin: 0;
  position: relative;
  font-size: inherit;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  word-break: break-word;
}

.toolbox-title {
  margin-left: -1.25rem;
  width: 44.063rem;
  max-width: 100%;
  max-height: 4rem;
  z-index: 2;
  color: var(--color-mediumspringgreen-500);
}

.education-title {
  margin-left: -50.063rem;
  width: 43.1rem;
  max-height: 1.688rem;
  max-width: 100%;
  z-index: 1;
}

.experience {
  color: var(--color-mediumspringgreen-400);
}

.experience-title {
  margin: 0;
  width: 56.125rem;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-height: 4rem;
  word-break: break-word;
  max-width: 134%;
  z-index: 2;
  color: var(--color-mediumspringgreen-100);
}

.education-title-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 8.5rem 51.187rem;
  box-sizing: border-box;
  gap: 1.875rem;
  max-width: 100%;
  color: var(--color-mediumspringgreen-500);
}

.button-anim-icon {
  position: absolute;
  top: 55.625rem;
  left: 44.125rem;
  width: 3.188rem;
  height: 4.188rem;
  object-fit: cover;
  z-index: 1;
}

.creative-production-quality {
  position: absolute;
  top: 1.938rem;
  font-size: var(--font-size-5xl);
  line-height: 1.688rem;
  width: 40.438rem;
  height: 1.688rem;
}

.b,
.creative-production-quality,
.softhousegroup-vinnytsia {
  left: 2rem;
  display: inline-block;
}

.softhousegroup-vinnytsia {
  position: absolute;
  top: 3.875rem;
  line-height: 138.66%;
  width: 28.438rem;
  height: 1.688rem;
}

.b {
  top: 5.25rem;
  color: var(--color-silver-200);
  width: 5.125rem;
  height: 1.438rem;
  min-width: 5.125rem;
}

.b,
.div,
.responsible-for-ensuring {
  position: absolute;
  line-height: 138.66%;
}

.responsible-for-ensuring {
  top: 6.938rem;
  left: 2rem;
  display: inline-block;
  width: 39.75rem;
  height: 5.125rem;
}

.div {
  top: 2.188rem;
  left: 0.063rem;
  font-size: var(--font-size-xl);
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1.688rem;
}

.freelance-graphic-designer,
.self-employed-remote {
  position: absolute;
  left: 2.25rem;
  display: inline-block;
  height: 1.688rem;
}

.freelance-graphic-designer {
  top: 13.625rem;
  font-size: var(--font-size-5xl);
  line-height: 1.688rem;
  width: 40.438rem;
}

.self-employed-remote {
  top: 15.5rem;
  line-height: 138.66%;
  width: 28.438rem;
}

.empty-freelancer-location {
  top: 16.938rem;
  left: 2.25rem;
  display: inline-block;
  color: var(--color-silver-200);
  width: 4.938rem;
  height: 1.438rem;
  min-width: 4.938rem;
}

.div1,
.empty-freelancer-location,
.worked-as-a {
  position: absolute;
  line-height: 138.66%;
}

.worked-as-a {
  top: 18.813rem;
  left: 2.25rem;
  display: inline-block;
  width: 39.75rem;
  height: 2.688rem;
}

.div1 {
  top: 13.875rem;
  left: 0.063rem;
  font-size: var(--font-size-xl);
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1.688rem;
}

.experience-content {
  position: absolute;
  top: 36.063rem;
  left: 51.188rem;
  background-color: rgba(61, 60, 60, 0.4);
  width: 43.313rem;
  height: 23.25rem;
  overflow: hidden;
  z-index: 1;
  font-size: var(--font-size-base);
}

.bachelor-of-english {
  position: absolute;
  top: 13.313rem;
  left: 2.375rem;
  line-height: 1.688rem;
  display: inline-block;
  width: 38.063rem;
  height: 1.688rem;
}

.vinnytsia-state-mykhailo {
  top: 15rem;
  left: 2.375rem;
  font-size: var(--font-size-base);
  line-height: 138.66%;
  display: inline-block;
  width: 32.75rem;
}

.div2,
.master-of-english,
.vinnytsia-state-mykhailo {
  position: absolute;
  height: 1.688rem;
}

.div2 {
  top: 13.5rem;
  left: 0.313rem;
  font-size: var(--font-size-xl);
  line-height: 138.66%;
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
}

.master-of-english {
  top: 9.438rem;
  left: 2.375rem;
  line-height: 1.688rem;
  display: inline-block;
  width: 37.625rem;
}

.vasyl-stus-donetsk {
  top: 11.125rem;
  left: 2.375rem;
  font-size: var(--font-size-base);
  line-height: 138.66%;
  display: inline-block;
  width: 35.25rem;
}

.div3,
.game-development,
.vasyl-stus-donetsk {
  position: absolute;
  height: 1.688rem;
}

.div3 {
  top: 9.563rem;
  left: 0.313rem;
  font-size: var(--font-size-xl);
  line-height: 138.66%;
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
}

.game-development {
  top: 5.5rem;
  left: 2.375rem;
  line-height: 1.688rem;
  display: inline-block;
  width: 17.875rem;
}

.div4,
.howest-digital-arts {
  position: absolute;
  line-height: 138.66%;
  height: 1.688rem;
}

.howest-digital-arts {
  top: 7.188rem;
  left: 2.375rem;
  font-size: var(--font-size-base);
  display: inline-block;
  width: 28.438rem;
}

.div4 {
  top: 5.75rem;
  left: 0.313rem;
  font-size: var(--font-size-xl);
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
}

.digital-design,
.howest-university-of {
  position: absolute;
  left: 2.375rem;
  display: inline-block;
  height: 1.688rem;
}

.digital-design {
  top: 1.875rem;
  line-height: 1.688rem;
  width: 25.938rem;
}

.howest-university-of {
  top: 3.563rem;
  font-size: var(--font-size-base);
  line-height: 138.66%;
  width: 28.438rem;
}

.div5,
.education-content {
  position: absolute;
  z-index: 1;
}

.div5 {
  top: 2.125rem;
  left: 0.313rem;
  font-size: var(--font-size-xl);
  line-height: 138.66%;
  color: var(--color-mediumspringgreen-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1.688rem;
}

.education-content {
  top: 32.438rem;
  left: 0;
  background-color: var(--color-darkslategray-500);
  width: 43.063rem;
  height: 18.063rem;
  overflow: hidden;
  font-size: var(--font-size-5xl);
}

.storytelling-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(54, 54, 54);
  width: 12.563rem;
  height: 2.063rem;
}

.visual-storytelling1 {
  color: #fff;
}

.visual-storytelling {
  position: absolute;
  top: 0;
  left: 0.25rem;
  line-height: 138.66%;
  display: inline-block;
  width: 14.438rem;
  height: 1.688rem;
  z-index: 1;
}

.storytelling {
  position: absolute;
  top: 6.938rem;
  left: 24.625rem;
  width: 14.625rem;
  height: 2.063rem;
}

.branddesign-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(54, 54, 54);
  width: 100%;
  height: 100%;
  display: none;
}

.brand-design {
  position: absolute;
  top: 0;
  left: 0.25rem;
  line-height: 138.66%;
  display: inline-block;
  width: 11.75rem;
  height: 1.688rem;
  z-index: 1;
}

.branddesign {
  position: absolute;
  top: 4.5rem;
  left: 24.625rem;
  background-color: rgb(54, 54, 54);
  ;
  width: 12.563rem;
  height: 2.063rem;
}

.web-development {
  position: absolute;
  top: 0;
  left: 0.25rem;
  line-height: 138.66%;
  display: inline-block;
  width: 14.844rem;
  height: 1.688rem;
  z-index: 1;
}

.webdevelopment {
  position: absolute;
  top: 2.063rem;
  left: 24.625rem;
  width: 15.031rem;
  height: 2.063rem;
}

.dmodeling-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(54, 54, 54);
  width: 11.438rem;
  height: 2.063rem;
}

.d-modeling {
  position: absolute;
  top: 0.188rem;
  left: 0.75rem;
  line-height: 138.66%;
  display: inline-block;
  width: 11.75rem;
  height: 1.688rem;
  z-index: 1;
}

.dmodeling,
.graphicdesign,
.skills-content,
.webdesign {
  position: absolute;
  top: 6.938rem;
  left: 4rem;
  width: 12.438rem;
  height: 2.063rem;
}

.graphicdesign,
.skills-content,
.webdesign {
  top: 4.5rem;
}

.graphicdesign,
.skills-content {
  top: 2.063rem;
}

.skills-content {
  top: 19.875rem;
  left: 51.5rem;
  background-color: rgba(61, 60, 60, 0.4);
  width: 43rem;
  height: 11.125rem;
  overflow: hidden;
  z-index: 1;
}

.skills,
.skills-content {
  color: var(--color-mediumspringgreen-100);
}

.skills3 {
  color: var(--color-mediumspringgreen-500);
}

.skills-title {
  margin: 0;
  position: absolute;
  top: 17.313rem;
  left: 51.5rem;
  font-size: var(--font-size-45xl);
  font-weight: 400;
  font-family: var(--font-jomhuria);
  display: inline-block;
  width: 42.813rem;
  height: 4rem;
  white-space: nowrap;
  z-index: 2;
  color: var(--color-mediumspringgreen-700);
}

.figma-txt {
  line-break: anywhere;
  width: 100%;
}

.figma,
.html {
  position: absolute;
}

.figma {
  top: 2.938rem;
  left: 14.5rem;
  background-color: rgb(54, 54, 54);
  ;
  width: 6.938rem;
  height: 1.875rem;
  z-index: 1;
}

.html {
  top: 0;
  left: 0.625rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 5.75rem;
  height: 1.688rem;
  z-index: 2;
}

.adb-child,
.htmll {
  position: absolute;
  background-color: rgb(54, 54, 54);
  ;
  height: 1.875rem;
}

.htmll {
  top: 5.875rem;
  left: 2.313rem;
  width: 6.938rem;
  z-index: 1;
}

.adb-child {
  top: 0;
  left: 3.538rem;
  width: 7.275rem;
  display: none;
}

.adobe-suite-txt-container {
  width: 100%;
}

.adobe-suite {
  top: 0.063rem;
  left: 0.438rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 10rem;
  height: 1.688rem;
  z-index: 2;
}

.adb,
.adobe-suite,
.canva1 {
  position: absolute;
}

.adb {
  top: 2.938rem;
  left: 2.313rem;
  background-color: rgb(54, 54, 54);
  width: 10.813rem;
  height: 1.875rem;
  z-index: 1;
}

.canva1 {
  top: 0.063rem;
  left: 0.625rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 5.75rem;
  height: 1.688rem;
  z-index: 2;
}

.canva {
  top: 2.938rem;
  left: 22.813rem;
  background-color: rgb(54, 54, 54);
  width: 6.938rem;
  height: 1.875rem;
  z-index: 1;
}

.canva,
.css,
.csss {
  position: absolute;
}

.css {
  top: 0.063rem;
  left: 0.813rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 4.188rem;
  height: 1.688rem;
  min-width: 4.188rem;
  z-index: 2;
}

.csss {
  top: 5.875rem;
  left: 10.688rem;
  background-color: rgb(54, 54, 54);
  width: 5.813rem;
  height: 1.875rem;
  z-index: 1;
}

.autodesk-maya {
  position: absolute;
  top: 0.063rem;
  left: 0.625rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 11rem;
  height: 1.688rem;
  z-index: 2;
}

.jst-child,
.maya {
  position: absolute;
  background-color: rgb(54, 54, 54);
  height: 1.875rem;
}

.maya {
  top: 5.875rem;
  left: 17.938rem;
  width: 12.125rem;
  z-index: 1;
}

.jst-child {
  top: 0;
  left: 0;
  width: 8.119rem;
  display: none;
}

.javascript {
  position: absolute;
  top: 0.063rem;
  left: 0.5rem;
  line-height: 138.66%;
  display: flex;
  align-items: center;
  width: 8.475rem;
  height: 1.688rem;
  z-index: 2;
}

.jst,
.toolbox-content {
  position: absolute;
  z-index: 1;
}

.jst {
  top: 2.938rem;
  left: 30.563rem;
  background-color: rgb(54, 54, 54);
  width: 9.375rem;
  height: 1.875rem;
}

.toolbox-content {
  top: 16.063rem;
  left: 0;
  background-color: rgba(61, 60, 60, 0.4);
  width: 43.063rem;
  height: 10.25rem;
  overflow: hidden;
  text-align: center;
  color: var(--color-mediumspringgreen-100);
}

.book-icon,
.sailormoon-icon {
  position: absolute;
  top: 0.5rem;
  left: 31.188rem;
  width: 6.125rem;
  height: 8.969rem;
  object-fit: contain;
}

.sailormoon-icon {
  top: 1.125rem;
  left: 26.188rem;
  width: 4.975rem;
  height: 7.725rem;
}

.controller-icon {
  top: -0.5rem;
  left: 19.063rem;
  width: 6.963rem;
  height: 6.044rem;
}

.controller-icon,
.drawing-icon,
.hearts-icon {
  position: absolute;
  object-fit: contain;
}

.hearts-icon {
  top: 2.75rem;
  left: 0;
  width: 4.65rem;
  height: 4.4rem;
}

.drawing-icon {
  top: 1.688rem;
  left: 14.063rem;
  width: 6.538rem;
  height: 6.938rem;
  z-index: 1;
}

.dog-icon {
  position: absolute;
  top: 1.375rem;
  left: 5.563rem;
  width: 7.5rem;
  height: 7.25rem;
  object-fit: cover;
}

.download-resume,
.hobbies {
  position: absolute;
  top: 8.125rem;
  left: 55.688rem;
  width: 37.313rem;
  height: 9.469rem;
  z-index: 3;
}

.tooltip-container {
  position: absolute;
  display: inline-block;
}

.tooltip-container-sailor {
  position: absolute;
  display: inline-block;
}


.tooltip-container-drawing {
  position: absolute;
  display: inline-block;
}

.tooltip-container-dog {
  position: absolute;
  display: inline-block;
}

.tooltip-container-gaming {
  position: absolute;
  display: inline-block;
}

.tooltip-container-skull {
  position: relative;
  display: inline-block;
}

.tooltip-container-skull .tooltip-text {
  visibility: hidden;
  width: 13rem;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 100%;
  /* Place the tooltip below the image */
  left: 50%;
  /* Center it horizontally */
  transform: translateX(-50%);
  /* Adjust the centering */
  margin-top: 112rem;
  /* Space between the image and tooltip */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
  /* Ensure it appears above other elements */
  margin-left: 25rem;
}

.tooltip-container-gaming .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Position relative to ensure it stays within the container */
  position: absolute;
  margin-top: -4.5rem;
  /* Move the tooltip slightly above the image */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;
  margin-left: 16rem;
}

.tooltip-container-dog .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Position relative to ensure it stays within the container */
  position: absolute;
  margin-top: 0.5rem;
  /* Move the tooltip slightly above the image */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;
  margin-left: -5rem;
}

.tooltip-container-drawing .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Position relative to ensure it stays within the container */
  position: absolute;
  margin-top: 0.5rem;
  /* Move the tooltip slightly above the image */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;
  bottom: 80%;
  left: 100%;
  margin-left: 9.5rem;
}

.tooltip-container-sailor .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Position relative to ensure it stays within the container */
  position: absolute;
  margin-top: -4rem;
  /* Move the tooltip slightly above the image */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;

  margin-left: 23rem;
}

.tooltip-container .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #00ffa1;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Position relative to ensure it stays within the container */
  position: absolute;
  margin-top: 0.5rem;
  /* Move the tooltip slightly above the image */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;
  bottom: 80%;
  left: 100%;
  margin-left: 28rem;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container-sailor:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


.tooltip-container-drawing:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container-dog:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container-gaming:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container-skull:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.download-resume {
  top: 0.25rem;
  left: 3.188rem;
  font-size: var(--font-size-13xl);
  line-height: 138.66%;
  font-family: var(--font-bebas);
  color: var(--color-dimgray);
  text-align: left;
  display: inline-block;
  width: 13.063rem;
  height: 2.75rem;
  white-space: nowrap;
  z-index: 5;
}

.darker-overlay,
.resume-link {
  position: absolute;
  overflow: hidden;
}

.resume-link {
  text-decoration: none;
  color: #525252;
  /* font-weight: 600; */
  padding: 18px;
  /* border: 2px solid #00FFA1; */
  transition: background-color 0.3s ease, color 0.3s ease;
  top: 4rem;
  left: 43rem;
  width: 18.688rem;
  /* height: 3.438rem; */
  white-space: nowrap;
  z-index: 4;
  text-align: center;
  font-size: 1.5rem;
  background-color: #00FFA1;
  font-family: 'Bebas';
}

.button:hover,
.resume-link:hover {
  background-color: rgb(49, 49, 49);
  color: var(--color-mediumspringgreen-100);
}

.darker-overlay {
  top: 45.563rem;
  left: 0;
  background-color: rgba(52, 51, 51, 0.25);
  width: 100%;
  height: 62.813rem;
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-gainsboro);
  font-family: var(--font-kantumruy-pro);
}

.email-icon,
.linkedin-link,
.separator-footer {
  position: absolute;
  background-color: var(--color-darkslategray-400);
  overflow: hidden;
}

.separator-footer {
  top: 107.188rem;
  left: 0;
  border-left: 12px solid var(--color-mediumspringgreen-100);
  box-sizing: border-box;
  width: 94.5rem;
  height: 4.063rem;
  z-index: 1;
}

.email-icon,
.linkedin-link {
  top: 112.688rem;
  left: 69.563rem;
  width: 15.625rem;
  height: 1.313rem;
}

.linkedin-link {
  top: 115.563rem;
}

.letter-1-icon,
.skull-1-icon {
  position: absolute;
  top: 112.563rem;
  left: 85.938rem;
  width: 5.244rem;
  height: 5.125rem;
  object-fit: contain;
}

.skull-1-icon {
  top: 108.125rem;
  left: 4.5rem;
  width: 13.531rem;
  height: 10.225rem;
  z-index: 2;
}

.arrow-3-icon {
  position: absolute;
  height: calc(100% - 13px);
  top: 0.375rem;
  bottom: 0.438rem;
  left: 31.375rem;
  max-height: 100%;
  width: 10.688rem;
  object-fit: cover;
  z-index: 2;
}

.about-separator {
  position: absolute;
  top: 45rem;
  left: 0;
  background-color: var(--color-darkslategray-400);
  width: 94.5rem;
  height: 7.875rem;
  overflow: hidden;
  z-index: 1;
}

.im-luiza-a {
  font-weight: 300;
}

.about2 {
  position: absolute;
  top: 1.688rem;
  left: 2.688rem;
  line-height: 138.66%;
  display: inline-block;
  width: 43.063rem;
  height: 15.188rem;
  z-index: 4;
}

.about-frame {
  position: absolute;
  top: 31.875rem;
  left: 43rem;
  background-color: var(--color-darkslategray-300);
  border-right: 12px solid var(--color-mediumspringgreen-100);
  box-sizing: border-box;
  width: 51.5rem;
  height: 15.563rem;
  overflow: hidden;
  z-index: 2;
}

.lines-icon,
.me-1-icon {
  position: absolute;
  object-fit: cover;
}

.me-1-icon {
  top: 0;
  left: 1.375rem;
  width: 40.688rem;
  height: 39.188rem;
  z-index: 1;
}

.lines-icon {
  top: 5.5rem;
  left: 38.063rem;
  width: 56.438rem;
  height: 22.375rem;
  z-index: 4;
}

.experience-education-overlay {
  width: 100%;
  height: 118.35rem;
  position: absolute;
  margin: 0 !important;
  top: 0.563rem;
  right: 0;
  left: 0;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-gainsboro);
  font-family: var(--font-kantumruy-pro);
}

.see-portfolio {
  width: 12.375rem;
  position: relative;
  font-size: 2.5rem;
  line-height: 138.66%;
  font-family: var(--font-bebas);
  color: var(--color-dimgray);
  text-align: left;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
}

.button {
  text-decoration: none;
  cursor: pointer;
  border: 0;
  color: #545454;
  padding: 18px;
  background-color: var(--color-mediumspringgreen-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 2;
  margin-left: 8rem;
  /* font-weight: bold; */
  font-family: 'Bebas';
  /* width: 9rem; */
  text-align: center;
  padding-left: 3rem;
  padding-right: 3rem;
}

.luizademianchukgmailcom {
  width: 13.49rem;
  position: relative;
  /* line-height: 100%; */
  /* display: inline-block; */
  /* flex-shrink: 0; */
  /* z-index: 1; */
}

.luizademianchukgmailcom-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}

.linkedin {
  position: relative;
  line-height: 100%;
  z-index: 1;
}

.link {
  text-decoration: none;
  color: #00FFA1;
}

.luiza-demianchuk1 {
  position: relative;
  font-size: 0.813rem;
  font-weight: 500;
  font-family: var(--font-kantumruy-pro);
  color: var(--color-silver-100);
}

.frame-parent1,
.frame-parent2 {
  width: 32.281rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.687rem;
  max-width: 100%;
}

.frame-parent1 {
  width: 41.756rem;
  gap: 1.625rem;
}

.frame-div {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-end;
  max-width: 100%;
}

.button-parent,
.frame-div,
.home,
.home-child {
  display: flex;
  align-items: flex-start;
}

.button-parent {
  width: 59.569rem;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4.5rem;
  max-width: 100%;
}

.home,
.home-child {
  box-sizing: border-box;
}

.home-child {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) 0 13.187rem;
  max-width: 100%;
  font-size: var(--font-size-xl);
  font-family: var(--font-bebas);
}

.home {
  width: 100%;
  position: relative;
  background-color: var(--color-dimgray);
  /* border: 1px solid #000; */
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-2xl) 0 var(--padding-8xl);
  gap: 12.812rem;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: var(--font-size-45xl);
  color: var(--color-mediumspringgreen-100);
  font-family: var(--font-jomhuria);
}

@media screen and (max-width: 1200px) {
  .luiza-demianchuk-wrapper {
    flex: 1;
  }

  .frame-group {
    flex-wrap: wrap;
  }

  .frame-wrapper {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }

  .home-child {
    padding-left: 6.563rem;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1050px) {
  .luiza-demianchuk {
    font-size: 3.25rem;
  }

  .about-title {
    font-size: 5rem;
    line-height: 7.5rem;
  }

  .dutch1,
  .ukrainian1 {
    font-size: var(--font-size-19xl);
    line-height: 1.375rem;
  }

  .education-title,
  .experience-title,
  .skills-title,
  .toolbox-title {
    font-size: var(--font-size-32xl);
  }

  .button-parent {
    gap: 2.25rem;
  }
}

@media screen and (max-width: 750px) {
  .luiza-demianchuk-wrapper {
    min-width: 100%;
  }

  .languages {
    flex-wrap: wrap;
  }

  .frame-container {
    gap: 1.375rem;
  }

  .frame-parent {
    gap: 2.5rem;
  }

  .home-inner {
    padding-bottom: var(--padding-8xl);
    box-sizing: border-box;
  }

  .education-title-parent {
    gap: 0.938rem;
    padding-left: 25.563rem;
    box-sizing: border-box;
  }

  .button-parent {
    gap: 1.125rem;
  }

  .home-child {
    padding-left: 3.25rem;
    box-sizing: border-box;
  }

  .home {
    gap: 6.375rem;
  }
}

@media screen and (max-width: 450px) {
  .luiza-demianchuk {
    font-size: var(--font-size-13xl);
  }

  .about-title {
    font-size: 3.125rem;
    line-height: 5rem;
  }

  .dutch1,
  .ukrainian1 {
    font-size: var(--font-size-10xl);
    line-height: 1rem;
  }

  .frame-parent {
    gap: var(--gap-xl);
  }

  .education-title,
  .experience-title,
  .toolbox-title {
    font-size: var(--font-size-19xl);
  }

  .education-title-parent {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .creative-production-quality,
  .div {
    font-size: var(--font-size-lgi);
    line-height: 1.375rem;
  }

  .div {
    font-size: var(--font-size-base);
  }

  .div1,
  .freelance-graphic-designer {
    font-size: var(--font-size-lgi);
    line-height: 1.375rem;
  }

  .div1 {
    font-size: var(--font-size-base);
  }

  .bachelor-of-english {
    font-size: var(--font-size-lgi);
    line-height: 1.375rem;
  }

  .div2,
  .master-of-english {
    font-size: var(--font-size-base);
    line-height: 1.375rem;
  }

  .master-of-english {
    font-size: var(--font-size-lgi);
  }

  .div3,
  .game-development {
    font-size: var(--font-size-base);
    line-height: 1.375rem;
  }

  .game-development {
    font-size: var(--font-size-lgi);
  }

  .digital-design,
  .div4 {
    font-size: var(--font-size-base);
    line-height: 1.375rem;
  }

  .digital-design {
    font-size: var(--font-size-lgi);
  }

  .brand-design,
  .d-modeling,
  .div5,
  .visual-storytelling,
  .web-development {
    font-size: var(--font-size-base);
    line-height: 1.375rem;
  }

  .skills-title {
    font-size: var(--font-size-19xl);
  }

  .adobe-suite,
  .autodesk-maya,
  .canva1,
  .css,
  .html,
  .javascript {
    font-size: var(--font-size-base);
    line-height: 1.375rem;
  }

  .about2 {
    font-size: var(--font-size-lgi);
    line-height: 1.688rem;
  }

  .button {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }

  .linkedin,
  .luizademianchukgmailcom {
    font-size: var(--font-size-base);
    line-height: 1rem;
  }

  .home-child {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .home {
    gap: 3.188rem;
  }
}