@import url(https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600&display=swap);
:root {
  --mx: 50%;
  --my: 50%;
  --s: 1;
  --o: 0;
  --tx: 0px;
  --ty: 0px;
  --rx: 0deg;
  --r: 20deg;
  --pos: 50% 50%;
  --posx: 50%;
  --posy: 50%;
  --hyp: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

::-moz-selection {
  color: none;
  background: none;
}

::selection {
  color: none;
  background: none;
}

/* For Mozilla Firefox */
::-moz-selection {
  color: none;
  background: none;
}

.stickos__glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 40%, hsla(0, 0%, 100%, 0.8) 20%, hsl(180, 10%, 70%) 63%);
  mix-blend-mode: soft-light;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  opacity: 0.1;
  mix-blend-mode: multiply;
  filter: blur(10px);
  transform: translateZ(1.41px);
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  will-change: rotate, transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;
}

.stickos {
  width: 20em;
  position: absolute;
  display: flex;
  cursor: grab;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: optimizeQuality;
  transform-style: preserve-3d;
  rotate: 24deg;
  left: 250px;
  top: 100px;
}
.stickos img {
  position: relative;
  width: 100%;
  top: 0 !important;
  left: 0 !important;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
}

.stickos:active {
  cursor: grabbing;
}

@media (max-width: 992px) {
  .stickos__holo {
    --space: 3%;
    --angle: 50deg;
    --imgsize: 200% 400%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    display: grid;
    overflow: hidden;
    z-index: 3;
    mix-blend-mode: color-dodge;
    opacity: 0.9;
    background-image: repeating-linear-gradient(var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space) * 1), rgba(228, 77, 72, 0.75) calc(var(--space) * 2), rgba(216, 197, 55, 0.75) calc(var(--space) * 3), rgba(124, 201, 62, 0.75) calc(var(--space) * 4), rgba(80, 177, 170, 0.75) calc(var(--space) * 5), rgba(136, 160, 255, 0.75) calc(var(--space) * 6), rgba(176, 105, 204, 0.75) calc(var(--space) * 7));
    background-blend-mode: color-dodge;
    background-size: var(--imgsize);
    background-position: var(--posx) var(--posy);
    filter: brightness(calc(var(--hyp) * 0.3 + 0.6)) contrast(2.3) saturate(1.1);
  }
  .stickos__holo__prism {
    --space: 6%;
    --angle: 50deg;
    --imgsize: 200% 400%;
    --mask: none;
    -webkit-mask-image: var(--mask);
            mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    display: grid;
    overflow: hidden;
    z-index: 3;
    mix-blend-mode: plus-lighter;
    opacity: 0.6;
    background-image: repeating-linear-gradient(var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space) * 1), rgba(228, 77, 72, 0.75) calc(var(--space) * 2), rgba(216, 197, 55, 0.75) calc(var(--space) * 3), rgba(124, 201, 62, 0.75) calc(var(--space) * 4), rgba(80, 177, 170, 0.75) calc(var(--space) * 5), rgba(136, 160, 255, 0.75) calc(var(--space) * 6), rgba(176, 105, 204, 0.75) calc(var(--space) * 7)), conic-gradient(from var(--r) at 50% 50%, #ffffff, rgb(0, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 255, 255));
    background-blend-mode: exclusion;
    background-size: var(--imgsize), 30px 30px;
    background-position: var(--posx) var(--posy), center;
    filter: brightness(calc(var(--hyp) * 0.3 + 0.6)) contrast(2.3) saturate(1.1);
  }
}
@media (min-width: 993px) {
  .stickos__holo {
    --space: 3%;
    --angle: 50deg;
    --imgsize: 200% 400%;
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    display: grid;
    overflow: hidden;
    z-index: 3;
    mix-blend-mode: color-dodge;
    opacity: 0.9;
    background-image: var(--grain), repeating-linear-gradient(var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space) * 1), rgba(228, 77, 72, 0.75) calc(var(--space) * 2), rgba(216, 197, 55, 0.75) calc(var(--space) * 3), rgba(124, 201, 62, 0.75) calc(var(--space) * 4), rgba(80, 177, 170, 0.75) calc(var(--space) * 5), rgba(136, 160, 255, 0.75) calc(var(--space) * 6), rgba(176, 105, 204, 0.75) calc(var(--space) * 7));
    background-blend-mode: color-dodge, color-dodge;
    background-size: 250px, var(--imgsize);
    background-position: center, var(--posx) var(--posy);
    filter: brightness(calc(var(--hyp) * 0.3 + 0.6)) contrast(2.3) saturate(1.1);
  }
  .stickos__holo__prism {
    --space: 6%;
    --angle: 50deg;
    --imgsize: 200% 400%;
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
    --mask: none;
    -webkit-mask-image: var(--mask);
            mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    display: grid;
    overflow: hidden;
    z-index: 3;
    mix-blend-mode: plus-lighter;
    opacity: 0.6;
    background-image: var(--grain), repeating-linear-gradient(var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space) * 1), rgba(228, 77, 72, 0.75) calc(var(--space) * 2), rgba(216, 197, 55, 0.75) calc(var(--space) * 3), rgba(124, 201, 62, 0.75) calc(var(--space) * 4), rgba(80, 177, 170, 0.75) calc(var(--space) * 5), rgba(136, 160, 255, 0.75) calc(var(--space) * 6), rgba(176, 105, 204, 0.75) calc(var(--space) * 7)), conic-gradient(from var(--r) at 50% 50%, #ffffff, rgb(0, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 255, 255));
    background-blend-mode: exclusion;
    background-size: 250px, var(--imgsize), 30px 30px;
    background-position: center, var(--posx) var(--posy);
    filter: brightness(calc(var(--hyp) * 0.3 + 0.6)) contrast(2.3) saturate(1.1);
  }
}
* {
  margin: 0px;
  padding: 0px;
  overscroll-behavior: none;
}

html {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  overflow-x: hidden;
  position: absolute;
  height: -webkit-fill-available;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background-color: #FFFEFB;
  background-size: 40px 40px;
  background-blend-mode: hard-light;
  background-image: radial-gradient(circle, rgb(105, 105, 105) 0%, rgb(116, 116, 116) 7%, rgb(255, 254, 251) 8%);
}

#spark_stickos {
  left: 49rem;
  width: 5rem;
  top: 8rem;
  rotate: -15deg;
  transform: scale(1);
  opacity: 0;
  display: none;
}

.title-menu {
  z-index: 6;
  position: relative;
  text-decoration: none !important;
  color: black;
}

a {
  text-decoration: none !important;
  color: black;
}

.photo {
  width: 100%;
}

.inner-shadow {
  position: relative;
  width: 100%;
  height: 100%;
}

.inner-shadow::before {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#work-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 6rem;
  margin-bottom: 6rem;
  width: 95%;
}
#work-display #work-intro {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 85%;
}
#work-display #work-intro > div:last-child > div:first-child {
  width: 25rem;
  height: 31rem;
  transform: rotate(6deg);
}
#work-display #work-intro > div:last-child #work-intro-photo {
  background-image: url("assets/img/vertfeuilleintro.jpg");
  background-position: center;
  background-size: cover;
}
#work-display #work-intro > div:first-child {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#work-display #work-intro > div:first-child h1 {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 2rem;
}
#work-display #work-intro > div:first-child h2 {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}
#work-display #work-intro > div:first-child span {
  text-align: right;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}
#work-display #work-intro > div:first-child div {
  display: flex;
  justify-content: end;
  align-items: end;
  position: relative;
  flex-direction: column;
  cursor: pointer;
}
#work-display #work-intro > div:first-child div img, #work-display #work-intro > div:first-child div svg {
  position: absolute;
}
#work-display #work-intro > div:first-child div svg {
  right: -2.5rem;
  transform: scale(0.9);
  top: 2rem;
}
#work-display #work-intro > div:first-child div img {
  position: absolute;
  top: -0.4rem;
  right: 4rem;
  transform: scale(0);
  transition: transform 0.25s ease-in-out;
  transition: right 0.25s ease-in-out;
}
#work-display #work-intro > div:first-child div:hover img {
  position: absolute;
  top: -0.4rem;
  right: -6rem;
  transform: scale(1);
}
#work-display #gallery--responsive-images {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
#work-display #gallery--responsive-images a {
  overflow: hidden;
  height: 20rem;
  width: 20rem;
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
#work-display #gallery--responsive-images a img {
  width: 20rem;
}
#work-display #show-more-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  gap: 1rem;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 4rem;
  height: 4rem;
  overflow: hidden;
  cursor: pointer;
}
#work-display #show-more-container ul {
  list-style: none;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-4rem);
}
#work-display #show-more-container ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 4rem;
}
#work-display #show-more-container span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.anim_svg {
  transition: opacity 0.25s ease-in-out;
}

#work-list:hover .anim_svg {
  opacity: 0.25;
}

#work-list:hover .anim_svg:hover {
  opacity: 1;
}

@media (max-width: 992px) {
  #spark_stickos {
    left: 2rem;
    width: 5rem;
    top: 27rem;
    rotate: -15deg;
    transform: scale(1);
    opacity: 0;
    display: none;
  }
  #work-display-container {
    display: none;
    opacity: 0;
    transform: translateY(12rem);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #application {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
  }
  #work-list-container {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
  }
  #menu {
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-size: 8vw;
    margin-top: 2.5rem;
    gap: 2rem;
  }
  #menu span {
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  #menu span svg {
    position: absolute;
    left: -1rem;
    transform: scale(0.8);
    bottom: -0.9rem;
  }
  #intro {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 14rem;
    /* margin-left: 2rem; */
    /* left: 0; */
    margin-top: 3rem;
    /* right: 0; */
    /* margin: auto; */
    width: 21rem;
    /* align-items: center; */
    transform: scale(0.8);
  }
  #intro * {
    position: absolute;
  }
  #intro img {
    width: 15rem;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
  }
  #intro svg {
    z-index: 3;
  }
  #intro div:first-child {
    z-index: 2;
  }
  #intro div:first-child img {
    rotate: -4deg;
  }
  #intro div:first-child svg {
    left: 7.5rem;
    top: 1rem;
    scale: 0.8;
  }
  #intro div:first-child svg:last-child {
    left: 14.5rem;
    top: 3.3rem;
    scale: 1;
  }
  #intro div:last-child img {
    rotate: 4deg;
    left: 6rem;
    top: 5.5rem;
  }
  #intro div:last-child svg {
    left: 14.8rem;
    top: 6.7rem;
    transform: scale(0.6);
  }
  #rainbow_stickos {
    left: 15rem;
    width: 9rem;
    top: 7rem;
    rotate: 27deg;
  }
  #star_stickos {
    left: 3rem;
    width: 4rem;
    top: 14rem;
    rotate: -21deg;
  }
  #cat_stickos {
    left: 14rem;
    width: 12rem;
    top: 52rem;
  }
  #cat_smile_stickos {
    left: 2rem;
    width: 5rem;
    top: 74rem;
    rotate: -22deg;
  }
  #scissor_stickos {
    left: 1rem;
    width: 4rem;
    top: 20rem;
    rotate: -28deg;
  }
  #paper_stickos {
    left: 17rem;
    width: 4rem;
    top: 40rem;
    rotate: 35deg;
  }
  #filou_stickos {
    left: -5rem;
    width: 10rem;
    top: 81rem;
    rotate: 13deg;
  }
  #iris_stickos {
    left: -2rem;
    width: 10rem;
    top: 44rem;
    rotate: 0deg;
  }
  #description {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    align-items: center;
  }
  #description > div:first-child {
    font-family: "Barlow", sans-serif;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4rem;
  }
  #description > div:first-child h1 {
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
  #description > div:first-child h2 {
    font-weight: 400;
    font-size: 1.3rem;
  }
  #description > div:last-child {
    position: relative;
    left: -15rem;
    top: 4rem;
    transform: scale(0.6);
  }
  #description ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
  }
  #description ul li:first-child {
    cursor: pointer;
  }
  #description ul li:first-child svg {
    position: absolute;
    top: 33rem;
    left: 8rem;
  }
  #description ul li:last-child {
    cursor: pointer;
  }
  #photo_description {
    width: 34em;
    height: 22em;
    position: absolute;
    rotate: -7deg;
    top: 2rem;
    left: 5rem;
  }
  .photo-container {
    display: flex;
    align-items: center;
    padding: 2rem 2rem 6rem 2rem;
    background-color: #FFFEFD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
  #moa {
    background-image: url("assets/img/moa.jpeg");
    background-position: center;
    background-size: cover;
  }
  #clip {
    filter: brightness(1.3) saturate(2);
    position: absolute;
    rotate: -7deg;
    top: -4rem;
    left: 8rem;
    width: 13rem;
    z-index: 1;
  }
  #pins {
    filter: brightness(1.5) saturate(1.2) hue-rotate(-12deg) contrast(0.9);
    position: absolute;
    width: 9rem;
    top: 28rem;
    left: 30rem;
  }
  #pat_svg {
    position: absolute;
    z-index: 1;
    left: 11.5rem;
    top: 8.7rem;
    scale: 1.1;
    rotate: 6deg;
  }
  #me_svg {
    position: absolute;
    z-index: 1;
    top: 23rem;
    left: 14rem;
  }
  #work-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px;
    gap: 3rem;
    margin-top: 3rem;
  }
  #work-list span {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
  }
  #work-list .anim_svg {
    position: relative;
    width: 15rem;
    text-align: center;
    display: flex;
    align-items: center;
    height: 3em;
    justify-content: center;
    cursor: pointer;
  }
  #work-list .svg_container {
    position: absolute;
    transform: scale(0.5);
  }
  #work-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 3rem;
    margin-top: 2rem;
  }
  #work-display #work-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    width: 95%;
    align-items: center;
  }
  #work-display #work-intro > div:last-child {
    transform: scale(0.75);
  }
  #work-display #work-intro > div:last-child > div:first-child {
    width: 25rem;
    height: 31rem;
    transform: rotate(6deg);
  }
  #work-display #work-intro > div:last-child #work-intro-photo {
    background-position: center;
    background-size: cover;
  }
  #work-display #work-intro > div:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  #work-display #work-intro > div:first-child h1 {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 2rem;
  }
  #work-display #work-intro > div:first-child h2 {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
  }
  #work-display #work-intro > div:first-child span {
    text-align: right;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
  }
  #work-display #work-intro > div:first-child div {
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    flex-direction: column;
    cursor: pointer;
  }
  #work-display #work-intro > div:first-child div img, #work-display #work-intro > div:first-child div svg {
    position: absolute;
  }
  #work-display #work-intro > div:first-child div svg {
    right: 6rem;
    transform: scale(0.9);
    top: 2rem;
  }
  #work-display #work-intro > div:first-child div img {
    position: absolute;
    top: -0.4rem;
    right: 13rem;
    transform: scale(0);
    transition: transform 0.25s ease-in-out;
    transition: right 0.25s ease-in-out;
  }
  #work-display #work-intro > div:first-child div:hover img {
    position: absolute;
    top: -0.4rem;
    right: 2rem;
    transform: scale(1);
  }
  #work-display #gallery--responsive-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  #work-display #gallery--responsive-images a {
    overflow: hidden;
    height: 40vw;
    width: 40vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #FFFFFF;
  }
  #work-display #gallery--responsive-images a img {
    width: 40vw;
  }
  #work-display #show-more-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    gap: 1rem;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-size: 4vw;
    height: 4rem;
    overflow: hidden;
    cursor: pointer;
  }
  #work-display #show-more-container ul {
    list-style: none;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-4rem);
  }
  #work-display #show-more-container ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 4rem;
  }
  #work-display #show-more-container ul li img {
    width: 14vw;
  }
  #work-display #show-more-container span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #close {
    background-color: #FFFEFD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    height: 5rem;
    width: 5rem;
    border-radius: 50rem;
    display: flex;
    cursor: pointer;
    transform: scale(0.75);
    transition: 0.25s ease-in-out;
  }
  #close:hover {
    width: 8rem;
  }
  #close:before, #close:after {
    position: absolute;
    content: " ";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 33px;
    width: 3px;
    background-color: #333;
  }
  #close:before {
    transform: rotate(45deg);
  }
  #close:after {
    transform: rotate(-45deg);
  }
}
@media (min-width: 450px) and (max-width: 993px) {
  #menu {
    font-size: 5vw !important;
  }
  #work-display #show-more-container ul li img {
    width: 8vw;
  }
}
@media (min-width: 1441px) {
  body {
    width: 100rem;
  }
}
@media (min-width: 993px) {
  body {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
  }
  #work-display-container {
    pointer-events: auto;
    transform: translateY(0rem);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5rem;
  }
  #work-list-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    top: 0px;
    position: absolute;
  }
  #menu {
    width: 100%;
    display: flex;
    justify-content: end;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-size: 2rem;
    position: absolute;
    top: 0px;
    margin-top: 2.5rem;
    margin-right: 3rem;
    margin-left: -5rem;
  }
  #menu span {
    margin-right: 2rem;
    cursor: pointer;
    position: relative;
  }
  #menu span svg {
    position: absolute;
    left: -0.5rem;
    bottom: -0.5rem;
  }
  #intro {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 20rem;
    transform: translateY(2rem) scale(0.9);
  }
  #intro * {
    position: absolute;
  }
  #intro img {
    width: 25rem;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
  }
  #intro svg {
    z-index: 3;
  }
  #intro div:first-child {
    z-index: 2;
  }
  #intro div:first-child img {
    rotate: -4deg;
  }
  #intro div:first-child svg {
    left: 14rem;
    top: 3.5rem;
    scale: 1.2;
  }
  #intro div:first-child svg:last-child {
    left: 24.5rem;
    top: 6rem;
    scale: 1.4;
  }
  #intro div:last-child img {
    rotate: 4deg;
    left: 20rem;
    top: 6.5rem;
  }
  #intro div:last-child svg {
    left: 37rem;
    top: 10.3rem;
  }
  #rainbow_stickos {
    left: 39rem;
    width: 16rem;
    top: 3rem;
    rotate: 35deg;
  }
  #star_stickos {
    left: 29rem;
    width: 5rem;
    top: 3rem;
    rotate: 22deg;
  }
  #cat_stickos {
    left: 69rem;
    width: 18rem;
    top: 12rem;
    rotate: -3deg;
  }
  #cat_smile_stickos {
    left: 44rem;
    width: 7rem;
    top: 44rem;
    rotate: -22deg;
  }
  #scissor_stickos {
    left: 18rem;
    width: 5rem;
    top: 18rem;
    rotate: -15deg;
  }
  #paper_stickos {
    left: 15rem;
    width: 5rem;
    top: 32rem;
    rotate: -15deg;
  }
  #filou_stickos {
    left: 28rem;
    width: 12rem;
    top: 47rem;
    rotate: 13deg;
  }
  #iris_stickos {
    left: -2rem;
    width: 12rem;
    top: 44rem;
    rotate: 0deg;
  }
  #description {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
  }
  #description > div:first-child {
    font-family: "Barlow", sans-serif;
    margin-left: 5rem;
    width: 36rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  #description > div:first-child h1 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  #description > div:first-child h2 {
    font-weight: 400;
    font-size: 2rem;
  }
  #description > div:last-child {
    position: relative;
  }
  #description ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    font-size: 2rem;
  }
  #description ul li:first-child {
    cursor: pointer;
  }
  #description ul li:first-child svg {
    position: absolute;
    top: 25rem;
    left: 10rem;
  }
  #description ul li:last-child {
    cursor: pointer;
  }
  #photo_description {
    width: 34em;
    height: 22em;
    position: absolute;
    rotate: -7deg;
    top: 2rem;
    left: 5rem;
  }
  .photo-container {
    display: flex;
    align-items: center;
    padding: 2rem 2rem 6rem 2rem;
    background-color: #FFFEFD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
  #moa {
    background-image: url("assets/img/moa.jpeg");
    background-position: center;
    background-size: cover;
  }
  #clip-container {
    transform: scale(0.9) translateY(-3rem);
  }
  #clip {
    filter: brightness(1.3) saturate(2);
    position: absolute;
    rotate: -7deg;
    top: -4rem;
    left: 8rem;
    width: 13rem;
    z-index: 1;
  }
  #pins {
    filter: brightness(1.5) saturate(1.2) hue-rotate(-12deg) contrast(0.9);
    position: absolute;
    width: 9rem;
    top: 25rem;
    left: 38rem;
  }
  #pat_svg {
    position: absolute;
    z-index: 1;
    left: 11.5rem;
    top: 8.7rem;
    scale: 1.1;
    rotate: 6deg;
  }
  #me_svg {
    position: absolute;
    z-index: 1;
    top: 23rem;
    left: 14rem;
  }
  #work-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 80VH;
    top: 0px;
    gap: 2rem;
  }
  #work-list svg {
    pointer-events: none;
  }
  #work-list span {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
  }
  #work-list .anim_svg {
    position: relative;
    width: 43rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    cursor: pointer;
  }
  #work-list .svg_container {
    position: absolute;
  }
  #close {
    background-color: #FFFEFD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 5rem;
    width: 5rem;
    border-radius: 50rem;
    display: flex;
    top: -4rem;
    cursor: pointer;
    transition: 0.25s ease-in-out;
  }
  #close:hover {
    width: 8rem;
  }
  #close:before, #close:after {
    position: absolute;
    content: " ";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 33px;
    width: 3px;
    background-color: #333;
  }
  #close:before {
    transform: rotate(45deg);
  }
  #close:after {
    transform: rotate(-45deg);
  }
  #work-display-container {
    display: none;
    opacity: 0;
    transform: translateY(12rem);
  }
}