@media only screen and (min-width: 1280px) {
  @font-face {
    font-family: Hikoku-Light;
    src: url("./assets/fonts/Hikou Light.otf");
  }
  @font-face {
    font-family: Hikoku-Regular;
    src: url("./assets/fonts/Hikou Regular.otf");
  }
  @font-face {
    font-family: Hikoku-Diagonal;
    src: url("./assets/fonts/Hikou Diagonal.otf");
  }
  @font-face {
    font-family: Hikoku-Outline;
    src: url("./assets/fonts/Hikou Outline.otf");
  }
  .roboto-body {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: auto;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .montserrat-body {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  .cursor-target {
    pointer-events: none;
    transition: transform linear 0.1s;
  }
  .cursor-container {
    pointer-events: none;
    position: fixed;
    z-index: 4;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 0px;
    transition: transform linear 0.05s;
  }
  .cursor-icon-trigger {
    transform-origin: 50% 50%;
    transition: transform ease-in-out 0.2s;
    cursor: none;
  }
  .cursor-icon-trigger:hover {
    transform: scale(1.1);
  }
  .cursor-shape {
    pointer-events: none;
    position: relative;
    width: 1.05vw;
    height: 1.05vw;
    border-radius: 0.525vw;
    transform: translate(-50%, -50%);
    transition: all ease-in-out 0.2s;
  }
  .cursor-shape:not(.icon) {
    -webkit-backdrop-filter: invert(1);
    backdrop-filter: invert(1);
  }
  .cursor-shape.icon {
    width: 2.31vw;
    height: 2.31vw;
    border-radius: 1.155vw;
  }
  .cursor-shape.shield {
    -webkit-mask-image: url("assets/Shield.svg#shield");
            mask-image: url("assets/Shield.svg#shield");
    -webkit-mask-size: cover;
            mask-size: cover;
  }
  .cursor-shape.icon.white {
    background-color: white;
  }
  .cursor-shape.icon.black {
    background-color: black;
  }
  .cursor-icon {
    pointer-events: none;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: all ease-in-out 0.2s;
    top: 0;
    left: 0;
    font-size: 0;
  }
  .cursor-icon.white {
    color: white;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: 1.68vw;
  }
  .cursor-icon.black {
    color: black;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: 1.68vw;
  }
  .flag-container {
    margin-right: 0.5vw;
    width: 2.6vw;
    height: 2.3vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    transition: width ease-in-out 0.2s;
  }
  .flag-container.active {
    width: 5.2vw;
  }
  .flag-container.active.en.en {
    transform: translateX(0);
  }
  .flag-container.active.en.it {
    transform: translateX(0);
  }
  .flag-container.active.it .flag-trigger.en {
    transform: translateX(-2.6vw);
  }
  .flag-container.active.it .flag-trigger.it {
    transform: translateX(2.6vw);
  }
  .flag-container.en:not(.active) .flag-trigger.en {
    transform: translateX(0);
  }
  .flag-container.en:not(.active) .flag-trigger.it {
    transform: translateX(0) scale(0);
  }
  .flag-container.it:not(.active) .flag-trigger.en {
    transform: translateX(-2.6vw) scale(0);
  }
  .flag-container.it:not(.active) .flag-trigger.it {
    transform: translateX(2.6vw);
  }
  .flag-container .flag-trigger {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 2.6vw;
    height: 2.3vw;
    min-width: 2.6vw;
    transition: transform ease-in-out 0.2s;
  }
  .flag-container .flag-trigger .flag-target {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 1.9vw;
    height: 1.5vw;
  }
  .flag-container .flag-trigger .flag-target .flag {
    width: 1.65vw;
    height: 1.3vw;
  }
  .flag-container .flag-trigger .flag-target .flag.active {
    filter: invert(1);
  }
  .flag-container .flag-trigger .flag-target .flag img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .navbar-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 3.125vw;
  }
  .navbar-logo-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 3.125vw;
    width: 3.125vw;
  }
  .navbar-logo-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 80%;
    position: relative;
  }
  .navbar-logo {
    width: 80%;
    height: 80%;
    transform-origin: 50% 50%;
    transition: transform ease-in-out 0.2s;
  }
  .navbar-logo #logo path {
    transition: fill ease-in-out 0.2s;
  }
  .navbar-logo:not(.negative) #logo path {
    fill: black;
  }
  .navbar-logo.negative #logo path {
    fill: white;
  }
  .navbar-logo.active {
    transform: scale(1);
  }
  .navbar-center-separator {
    flex: 1;
  }
  .navbar-menu-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: auto;
  }
  .navbar-menu-item-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .navbar-menu-item-container.item-container-1 {
    width: 5.21vw;
  }
  .navbar-menu-item-container.item-container-2 {
    width: 6.77vw;
  }
  .navbar-menu-item-container.item-container-3 {
    width: 6.93vw;
  }
  .navbar-menu-item-container.item-container-4 {
    width: 6.35vw;
  }
  .navbar-menu-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: calc(100% - 1.25vw);
  }
  .navbar-menu-item.item-1 {
    width: 4.17vw;
  }
  .navbar-menu-item.item-2 {
    width: 5.73vw;
  }
  .navbar-menu-item.item-3 {
    width: 5.89vw;
  }
  .navbar-menu-item.item-4 {
    width: 5.31vw;
  }
  .navbar-menu-textbox {
    font-size: 0.83vw;
    font-weight: 300;
    transition: all ease-in-out 0.2s;
  }
  .navbar-menu-textbox:not(.negative) {
    color: black;
  }
  .navbar-menu-textbox.negative {
    color: white;
  }
  .navbar-menu-textbox::first-letter {
    font-size: 0.98vw;
  }
  .navbar-menu-textbox.active {
    font-weight: 500;
    font-size: 0.98vw;
    padding-bottom: 0.05vw;
    border-width: 0px 0px 0.05vw 0px;
    border-style: none none solid none;
  }
  .navbar-menu-textbox.active:not(.negative) {
    border-color: black;
  }
  .navbar-menu-textbox.active.negative {
    border-color: white;
  }
  .about {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .presentation-container {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .name-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .name {
    text-transform: uppercase;
    font-family: Hikoku-Outline;
    font-weight: 400;
    font-size: 10vw;
    display: inline-block;
    line-height: 0.9;
  }
  .surname {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 8vw;
    text-transform: uppercase;
    display: inline-block;
    line-height: 0.9;
  }
  .job-title {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 2vw;
    text-transform: uppercase;
    display: inline-block;
    line-height: 0.9;
  }
  .about-divider {
    visibility: hidden;
    background-color: black;
    width: 0.05vw;
    height: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
  }
  .content-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .content {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 570, "YTUC" 710;
    font-size: 1.5vw;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #000000 rgba(255, 255, 255, 0);
  }
  .content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
  }
  .content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 18px;
    border: 9px none rgba(255, 255, 255, 0);
  }
  .content p {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    text-align: justify;
  }
  .content p:first-child {
    margin-top: 0px;
  }
  .content p:last-child {
    margin-bottom: 0px;
  }
  .content p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .content-actions-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
  .content-download-trigger {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .content-more-trigger {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .content-download-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 9.2vw;
    height: 2vw;
    margin: 0.6vw;
  }
  .content-more-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 2vw;
    margin: 0.6vw;
  }
  .content-textbox {
    font-size: 1vw;
    font-weight: 300;
    transition: all ease-in-out 0.2s;
  }
  .content-textbox:not(.negative) {
    color: black;
  }
  .content-textbox.negative {
    color: white;
  }
  .content-textbox.active {
    font-weight: 500;
    font-size: 1.2vw;
    padding-bottom: 0.05vw;
    border-width: 0px 0px 0.05vw 0px;
    border-style: none none solid none;
  }
  .content-textbox.active:not(.negative) {
    border-color: black;
  }
  .content-textbox.active.negative {
    border-color: white;
  }
  #time-display {
    width: 32vw;
  }
  .project-details-container {
    transition: all ease-in-out 0.2s;
    width: calc(100% - 1vw);
    margin-right: 1vw;
    opacity: 1;
    overflow: hidden;
    padding-right: 0.6vw;
    position: absolute;
  }
  .project-details-container:not(.active):not(.expanded) {
    transform: translateX(-70%);
    opacity: 0;
    overflow: hidden;
  }
  .project-details-container:not(.active):not(.expanded):not(.detailed) {
    height: calc(100% - 7vw);
    margin-top: 7vw;
  }
  .project-details-container:not(.active):not(.expanded):not(.detailed) .detail-main-description {
    height: 0;
    overflow: hidden;
  }
  .project-details-container:not(.active):not(.expanded).detailed {
    height: 100%;
    margin-top: 0;
    z-index: 3;
  }
  .project-details-container.active {
    transform: translateX(0);
  }
  .project-details-container.active:not(.detailed) {
    height: calc(100% - 7vw);
    margin-top: 7vw;
  }
  .project-details-container.active:not(.detailed) .detail-main-description {
    height: 0;
    overflow: hidden;
  }
  .project-details-container.active.detailed {
    height: 100%;
    margin-top: 0;
    overflow-y: auto;
    z-index: 3;
  }
  .project-details-container.active:not(.expanded) .detail-main-media-container {
    height: calc(100% - 7.5vw);
  }
  .project-details-container.active:not(.expanded) .detail-short-description {
    height: 7.5vw;
  }
  .project-details-container.active:not(.expanded) .detail-main-description {
    height: 0;
    overflow: hidden;
  }
  .project-details-container.expanded {
    transform: translateX(0);
  }
  .project-details-container.expanded:not(.detailed) {
    height: calc(100% - 7vw);
    margin-top: 7vw;
  }
  .project-details-container.expanded:not(.detailed) .detail-main-description {
    height: 0;
    overflow: hidden;
  }
  .project-details-container.expanded.detailed {
    height: 100%;
    margin-top: 0;
    overflow-y: auto;
    z-index: 3;
  }
  .project-details-container.expanded.detailed .detail-main-media-container {
    height: 20vw;
  }
  .detail-main-media-container {
    width: 100%;
    height: 100%;
    position: relative;
    transition: height ease-in-out 0.2s;
  }
  .detail-main-media-container img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .detail-main-media-container h1 {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 20vw;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    color: #777777;
    top: calc(50% - 1vw);
    left: calc(50% - 10vw);
    text-align: center;
    line-height: 2vw;
    font-size: 2vw;
    height: 2vw;
  }
  .detail-short-description {
    width: 100%;
    height: 0;
    transition: height ease-in-out 0.2s;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 1.1vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .detail-short-description p {
    width: 100%;
    margin-top: 0.2vw;
    margin-bottom: 0.2vw;
    text-align: justify;
  }
  .detail-short-description p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-short-description p i {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-short-description p em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-short-description p:first-child {
    margin-top: 0.5vw;
  }
  .detail-short-description p:last-child {
    margin-bottom: 0vw;
  }
  .detail-main-description {
    width: 100%;
    font-size: 1.1vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    transition: all ease-in-out 0.2s;
  }
  .detail-main-description h1 {
    margin: 0;
    margin-top: 0.8vw;
    font-size: 1.4vw;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    text-transform: uppercase;
  }
  .detail-main-description h2 {
    margin: 0;
    margin-top: 0.4vw;
    font-size: 1.2vw;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    text-transform: uppercase;
  }
  .detail-main-description h3 {
    margin: 0;
    margin-top: 0.4vw;
    font-size: 1.2vw;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description p {
    width: 100%;
    margin-top: 0.2vw;
    margin-bottom: 0.2vw;
    text-align: justify;
  }
  .detail-main-description p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description p i {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description p em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description ul {
    padding-left: 1.5vw;
    margin-top: 0vw;
    margin-bottom: 0vw;
  }
  .detail-main-description ul p {
    width: 100%;
    margin-top: 0.2vw;
    margin-bottom: 0.2vw;
    text-align: justify;
  }
  .detail-main-description ul p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description ul p i {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description ul p em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .detail-main-description img {
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .projects {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .projects-container {
    position: relative;
    z-index: 1;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .projects-preview-container {
    width: 50%;
    position: relative;
  }
  .projects-list-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .projects-title {
    height: 7vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .projects-title-text {
    font-family: Hikoku-Outline;
    font-size: 9vw;
    width: 28vw;
    display: inline-block;
    line-height: 0.9;
  }
  .projects-list-items-container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .project-item-container {
    overflow: hidden;
    transition: height ease-in-out 0.2s;
  }
  .project-item-container:not(.expanded) {
    height: 3.5vw;
  }
  .project-item-container:not(.expanded) .project-item-pinner-trigger {
    transform: scale(0) translateX(50%);
  }
  .project-item-container.expanded {
    height: 12vw;
  }
  .project-item-container.expanded .project-item-arrow {
    width: 2vw;
    font-size: 2vw;
  }
  .project-item-container.expanded .project-item-number {
    font-weight: 500;
  }
  .project-item-container.expanded .project-item-name-textbox {
    font-weight: 500;
  }
  .project-item-container.expanded .project-item-expander {
    transform: rotate(180deg);
  }
  .project-item-container.expanded .project-item-expander.active {
    transform: rotate(180deg) translate(0, 0.2vw);
  }
  .project-item-container.pinned .project-item-pinner {
    transform: rotate(0deg);
  }
  .project-item-container.pinned .project-item-pinner.active {
    transform: rotate(0deg) translate(0, -0.3vw);
  }
  .project-item-header {
    height: 3.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .project-item-arrow {
    width: 0;
    font-size: 0vw;
    transition: width ease-in-out 0.2s, font-size ease-in-out 0.2s;
  }
  .project-item-number {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.8vw;
    margin-right: 0.5vw;
    width: 2.2vw;
  }
  .project-item-name-trigger {
    height: 100%;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .project-item-name-target {
    height: 2.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .project-item-name-target[width="5"] {
    width: 5vw;
  }
  .project-item-name-target[width="5.1"] {
    width: 5.1vw;
  }
  .project-item-name-target[width="5.2"] {
    width: 5.2vw;
  }
  .project-item-name-target[width="5.3"] {
    width: 5.3vw;
  }
  .project-item-name-target[width="5.4"] {
    width: 5.4vw;
  }
  .project-item-name-target[width="5.5"] {
    width: 5.5vw;
  }
  .project-item-name-target[width="5.6"] {
    width: 5.6vw;
  }
  .project-item-name-target[width="5.7"] {
    width: 5.7vw;
  }
  .project-item-name-target[width="5.8"] {
    width: 5.8vw;
  }
  .project-item-name-target[width="5.9"] {
    width: 5.9vw;
  }
  .project-item-name-target[width="6"] {
    width: 6vw;
  }
  .project-item-name-target[width="6.1"] {
    width: 6.1vw;
  }
  .project-item-name-target[width="6.2"] {
    width: 6.2vw;
  }
  .project-item-name-target[width="6.3"] {
    width: 6.3vw;
  }
  .project-item-name-target[width="6.4"] {
    width: 6.4vw;
  }
  .project-item-name-target[width="6.5"] {
    width: 6.5vw;
  }
  .project-item-name-target[width="6.6"] {
    width: 6.6vw;
  }
  .project-item-name-target[width="6.7"] {
    width: 6.7vw;
  }
  .project-item-name-target[width="6.8"] {
    width: 6.8vw;
  }
  .project-item-name-target[width="6.9"] {
    width: 6.9vw;
  }
  .project-item-name-target[width="7"] {
    width: 7vw;
  }
  .project-item-name-target[width="7.1"] {
    width: 7.1vw;
  }
  .project-item-name-target[width="7.2"] {
    width: 7.2vw;
  }
  .project-item-name-target[width="7.3"] {
    width: 7.3vw;
  }
  .project-item-name-target[width="7.4"] {
    width: 7.4vw;
  }
  .project-item-name-target[width="7.5"] {
    width: 7.5vw;
  }
  .project-item-name-target[width="7.6"] {
    width: 7.6vw;
  }
  .project-item-name-target[width="7.7"] {
    width: 7.7vw;
  }
  .project-item-name-target[width="7.8"] {
    width: 7.8vw;
  }
  .project-item-name-target[width="7.9"] {
    width: 7.9vw;
  }
  .project-item-name-target[width="8"] {
    width: 8vw;
  }
  .project-item-name-target[width="8.1"] {
    width: 8.1vw;
  }
  .project-item-name-target[width="8.2"] {
    width: 8.2vw;
  }
  .project-item-name-target[width="8.3"] {
    width: 8.3vw;
  }
  .project-item-name-target[width="8.4"] {
    width: 8.4vw;
  }
  .project-item-name-target[width="8.5"] {
    width: 8.5vw;
  }
  .project-item-name-target[width="8.6"] {
    width: 8.6vw;
  }
  .project-item-name-target[width="8.7"] {
    width: 8.7vw;
  }
  .project-item-name-target[width="8.8"] {
    width: 8.8vw;
  }
  .project-item-name-target[width="8.9"] {
    width: 8.9vw;
  }
  .project-item-name-target[width="9"] {
    width: 9vw;
  }
  .project-item-name-target[width="9.1"] {
    width: 9.1vw;
  }
  .project-item-name-target[width="9.2"] {
    width: 9.2vw;
  }
  .project-item-name-target[width="9.3"] {
    width: 9.3vw;
  }
  .project-item-name-target[width="9.4"] {
    width: 9.4vw;
  }
  .project-item-name-target[width="9.5"] {
    width: 9.5vw;
  }
  .project-item-name-target[width="9.6"] {
    width: 9.6vw;
  }
  .project-item-name-target[width="9.7"] {
    width: 9.7vw;
  }
  .project-item-name-target[width="9.8"] {
    width: 9.8vw;
  }
  .project-item-name-target[width="9.9"] {
    width: 9.9vw;
  }
  .project-item-name-target[width="10"] {
    width: 10vw;
  }
  .project-item-name-target[width="10.1"] {
    width: 10.1vw;
  }
  .project-item-name-target[width="10.2"] {
    width: 10.2vw;
  }
  .project-item-name-target[width="10.3"] {
    width: 10.3vw;
  }
  .project-item-name-target[width="10.4"] {
    width: 10.4vw;
  }
  .project-item-name-target[width="10.5"] {
    width: 10.5vw;
  }
  .project-item-name-target[width="10.6"] {
    width: 10.6vw;
  }
  .project-item-name-target[width="10.7"] {
    width: 10.7vw;
  }
  .project-item-name-target[width="10.8"] {
    width: 10.8vw;
  }
  .project-item-name-target[width="10.9"] {
    width: 10.9vw;
  }
  .project-item-name-target[width="11"] {
    width: 11vw;
  }
  .project-item-name-target[width="11.1"] {
    width: 11.1vw;
  }
  .project-item-name-target[width="11.2"] {
    width: 11.2vw;
  }
  .project-item-name-target[width="11.3"] {
    width: 11.3vw;
  }
  .project-item-name-target[width="11.4"] {
    width: 11.4vw;
  }
  .project-item-name-target[width="11.5"] {
    width: 11.5vw;
  }
  .project-item-name-target[width="11.6"] {
    width: 11.6vw;
  }
  .project-item-name-target[width="11.7"] {
    width: 11.7vw;
  }
  .project-item-name-target[width="11.8"] {
    width: 11.8vw;
  }
  .project-item-name-target[width="11.9"] {
    width: 11.9vw;
  }
  .project-item-name-target[width="12"] {
    width: 12vw;
  }
  .project-item-name-target[width="12.1"] {
    width: 12.1vw;
  }
  .project-item-name-target[width="12.2"] {
    width: 12.2vw;
  }
  .project-item-name-target[width="12.3"] {
    width: 12.3vw;
  }
  .project-item-name-target[width="12.4"] {
    width: 12.4vw;
  }
  .project-item-name-target[width="12.5"] {
    width: 12.5vw;
  }
  .project-item-name-target[width="12.6"] {
    width: 12.6vw;
  }
  .project-item-name-target[width="12.7"] {
    width: 12.7vw;
  }
  .project-item-name-target[width="12.8"] {
    width: 12.8vw;
  }
  .project-item-name-target[width="12.9"] {
    width: 12.9vw;
  }
  .project-item-name-target[width="13"] {
    width: 13vw;
  }
  .project-item-name-target[width="13.1"] {
    width: 13.1vw;
  }
  .project-item-name-target[width="13.2"] {
    width: 13.2vw;
  }
  .project-item-name-target[width="13.3"] {
    width: 13.3vw;
  }
  .project-item-name-target[width="13.4"] {
    width: 13.4vw;
  }
  .project-item-name-target[width="13.5"] {
    width: 13.5vw;
  }
  .project-item-name-target[width="13.6"] {
    width: 13.6vw;
  }
  .project-item-name-target[width="13.7"] {
    width: 13.7vw;
  }
  .project-item-name-target[width="13.8"] {
    width: 13.8vw;
  }
  .project-item-name-target[width="13.9"] {
    width: 13.9vw;
  }
  .project-item-name-target[width="14"] {
    width: 14vw;
  }
  .project-item-name-target[width="14.1"] {
    width: 14.1vw;
  }
  .project-item-name-target[width="14.2"] {
    width: 14.2vw;
  }
  .project-item-name-target[width="14.3"] {
    width: 14.3vw;
  }
  .project-item-name-target[width="14.4"] {
    width: 14.4vw;
  }
  .project-item-name-target[width="14.5"] {
    width: 14.5vw;
  }
  .project-item-name-target[width="14.6"] {
    width: 14.6vw;
  }
  .project-item-name-target[width="14.7"] {
    width: 14.7vw;
  }
  .project-item-name-target[width="14.8"] {
    width: 14.8vw;
  }
  .project-item-name-target[width="14.9"] {
    width: 14.9vw;
  }
  .project-item-name-target[width="15"] {
    width: 15vw;
  }
  .project-item-name-target[width="15.1"] {
    width: 15.1vw;
  }
  .project-item-name-target[width="15.2"] {
    width: 15.2vw;
  }
  .project-item-name-target[width="15.3"] {
    width: 15.3vw;
  }
  .project-item-name-target[width="15.4"] {
    width: 15.4vw;
  }
  .project-item-name-target[width="15.5"] {
    width: 15.5vw;
  }
  .project-item-name-target[width="15.6"] {
    width: 15.6vw;
  }
  .project-item-name-target[width="15.7"] {
    width: 15.7vw;
  }
  .project-item-name-target[width="15.8"] {
    width: 15.8vw;
  }
  .project-item-name-target[width="15.9"] {
    width: 15.9vw;
  }
  .project-item-name-target[width="16"] {
    width: 16vw;
  }
  .project-item-name-target[width="16.1"] {
    width: 16.1vw;
  }
  .project-item-name-target[width="16.2"] {
    width: 16.2vw;
  }
  .project-item-name-target[width="16.3"] {
    width: 16.3vw;
  }
  .project-item-name-target[width="16.4"] {
    width: 16.4vw;
  }
  .project-item-name-target[width="16.5"] {
    width: 16.5vw;
  }
  .project-item-name-target[width="16.6"] {
    width: 16.6vw;
  }
  .project-item-name-target[width="16.7"] {
    width: 16.7vw;
  }
  .project-item-name-target[width="16.8"] {
    width: 16.8vw;
  }
  .project-item-name-target[width="16.9"] {
    width: 16.9vw;
  }
  .project-item-name-target[width="17"] {
    width: 17vw;
  }
  .project-item-name-target[width="17.1"] {
    width: 17.1vw;
  }
  .project-item-name-target[width="17.2"] {
    width: 17.2vw;
  }
  .project-item-name-target[width="17.3"] {
    width: 17.3vw;
  }
  .project-item-name-target[width="17.4"] {
    width: 17.4vw;
  }
  .project-item-name-target[width="17.5"] {
    width: 17.5vw;
  }
  .project-item-name-target[width="17.6"] {
    width: 17.6vw;
  }
  .project-item-name-target[width="17.7"] {
    width: 17.7vw;
  }
  .project-item-name-target[width="17.8"] {
    width: 17.8vw;
  }
  .project-item-name-target[width="17.9"] {
    width: 17.9vw;
  }
  .project-item-name-target[width="18"] {
    width: 18vw;
  }
  .project-item-name-target[width="18.1"] {
    width: 18.1vw;
  }
  .project-item-name-target[width="18.2"] {
    width: 18.2vw;
  }
  .project-item-name-target[width="18.3"] {
    width: 18.3vw;
  }
  .project-item-name-target[width="18.4"] {
    width: 18.4vw;
  }
  .project-item-name-target[width="18.5"] {
    width: 18.5vw;
  }
  .project-item-name-target[width="18.6"] {
    width: 18.6vw;
  }
  .project-item-name-target[width="18.7"] {
    width: 18.7vw;
  }
  .project-item-name-target[width="18.8"] {
    width: 18.8vw;
  }
  .project-item-name-target[width="18.9"] {
    width: 18.9vw;
  }
  .project-item-name-target[width="19"] {
    width: 19vw;
  }
  .project-item-name-target[width="19.1"] {
    width: 19.1vw;
  }
  .project-item-name-target[width="19.2"] {
    width: 19.2vw;
  }
  .project-item-name-target[width="19.3"] {
    width: 19.3vw;
  }
  .project-item-name-target[width="19.4"] {
    width: 19.4vw;
  }
  .project-item-name-target[width="19.5"] {
    width: 19.5vw;
  }
  .project-item-name-target[width="19.6"] {
    width: 19.6vw;
  }
  .project-item-name-target[width="19.7"] {
    width: 19.7vw;
  }
  .project-item-name-target[width="19.8"] {
    width: 19.8vw;
  }
  .project-item-name-target[width="19.9"] {
    width: 19.9vw;
  }
  .project-item-name-target[width="20"] {
    width: 20vw;
  }
  .project-item-name-target[width="20.1"] {
    width: 20.1vw;
  }
  .project-item-name-target[width="20.2"] {
    width: 20.2vw;
  }
  .project-item-name-target[width="20.3"] {
    width: 20.3vw;
  }
  .project-item-name-target[width="20.4"] {
    width: 20.4vw;
  }
  .project-item-name-target[width="20.5"] {
    width: 20.5vw;
  }
  .project-item-name-target[width="20.6"] {
    width: 20.6vw;
  }
  .project-item-name-target[width="20.7"] {
    width: 20.7vw;
  }
  .project-item-name-target[width="20.8"] {
    width: 20.8vw;
  }
  .project-item-name-target[width="20.9"] {
    width: 20.9vw;
  }
  .project-item-name-target[width="21"] {
    width: 21vw;
  }
  .project-item-name-target[width="21.1"] {
    width: 21.1vw;
  }
  .project-item-name-target[width="21.2"] {
    width: 21.2vw;
  }
  .project-item-name-target[width="21.3"] {
    width: 21.3vw;
  }
  .project-item-name-target[width="21.4"] {
    width: 21.4vw;
  }
  .project-item-name-target[width="21.5"] {
    width: 21.5vw;
  }
  .project-item-name-target[width="21.6"] {
    width: 21.6vw;
  }
  .project-item-name-target[width="21.7"] {
    width: 21.7vw;
  }
  .project-item-name-target[width="21.8"] {
    width: 21.8vw;
  }
  .project-item-name-target[width="21.9"] {
    width: 21.9vw;
  }
  .project-item-name-target[width="22"] {
    width: 22vw;
  }
  .project-item-name-target[width="22.1"] {
    width: 22.1vw;
  }
  .project-item-name-target[width="22.2"] {
    width: 22.2vw;
  }
  .project-item-name-target[width="22.3"] {
    width: 22.3vw;
  }
  .project-item-name-target[width="22.4"] {
    width: 22.4vw;
  }
  .project-item-name-target[width="22.5"] {
    width: 22.5vw;
  }
  .project-item-name-target[width="22.6"] {
    width: 22.6vw;
  }
  .project-item-name-target[width="22.7"] {
    width: 22.7vw;
  }
  .project-item-name-target[width="22.8"] {
    width: 22.8vw;
  }
  .project-item-name-target[width="22.9"] {
    width: 22.9vw;
  }
  .project-item-name-target[width="23"] {
    width: 23vw;
  }
  .project-item-name-target[width="23.1"] {
    width: 23.1vw;
  }
  .project-item-name-target[width="23.2"] {
    width: 23.2vw;
  }
  .project-item-name-target[width="23.3"] {
    width: 23.3vw;
  }
  .project-item-name-target[width="23.4"] {
    width: 23.4vw;
  }
  .project-item-name-target[width="23.5"] {
    width: 23.5vw;
  }
  .project-item-name-target[width="23.6"] {
    width: 23.6vw;
  }
  .project-item-name-target[width="23.7"] {
    width: 23.7vw;
  }
  .project-item-name-target[width="23.8"] {
    width: 23.8vw;
  }
  .project-item-name-target[width="23.9"] {
    width: 23.9vw;
  }
  .project-item-name-target[width="24"] {
    width: 24vw;
  }
  .project-item-name-target[width="24.1"] {
    width: 24.1vw;
  }
  .project-item-name-target[width="24.2"] {
    width: 24.2vw;
  }
  .project-item-name-target[width="24.3"] {
    width: 24.3vw;
  }
  .project-item-name-target[width="24.4"] {
    width: 24.4vw;
  }
  .project-item-name-target[width="24.5"] {
    width: 24.5vw;
  }
  .project-item-name-target[width="24.6"] {
    width: 24.6vw;
  }
  .project-item-name-target[width="24.7"] {
    width: 24.7vw;
  }
  .project-item-name-target[width="24.8"] {
    width: 24.8vw;
  }
  .project-item-name-target[width="24.9"] {
    width: 24.9vw;
  }
  .project-item-name-target[width="25"] {
    width: 25vw;
  }
  .project-item-name-target[width="25.1"] {
    width: 25.1vw;
  }
  .project-item-name-target[width="25.2"] {
    width: 25.2vw;
  }
  .project-item-name-target[width="25.3"] {
    width: 25.3vw;
  }
  .project-item-name-target[width="25.4"] {
    width: 25.4vw;
  }
  .project-item-name-target[width="25.5"] {
    width: 25.5vw;
  }
  .project-item-name-target[width="25.6"] {
    width: 25.6vw;
  }
  .project-item-name-target[width="25.7"] {
    width: 25.7vw;
  }
  .project-item-name-target[width="25.8"] {
    width: 25.8vw;
  }
  .project-item-name-target[width="25.9"] {
    width: 25.9vw;
  }
  .project-item-name-target[width="26"] {
    width: 26vw;
  }
  .project-item-name-target[width="26.1"] {
    width: 26.1vw;
  }
  .project-item-name-target[width="26.2"] {
    width: 26.2vw;
  }
  .project-item-name-target[width="26.3"] {
    width: 26.3vw;
  }
  .project-item-name-target[width="26.4"] {
    width: 26.4vw;
  }
  .project-item-name-target[width="26.5"] {
    width: 26.5vw;
  }
  .project-item-name-target[width="26.6"] {
    width: 26.6vw;
  }
  .project-item-name-target[width="26.7"] {
    width: 26.7vw;
  }
  .project-item-name-target[width="26.8"] {
    width: 26.8vw;
  }
  .project-item-name-target[width="26.9"] {
    width: 26.9vw;
  }
  .project-item-name-target[width="27"] {
    width: 27vw;
  }
  .project-item-name-target[width="27.1"] {
    width: 27.1vw;
  }
  .project-item-name-target[width="27.2"] {
    width: 27.2vw;
  }
  .project-item-name-target[width="27.3"] {
    width: 27.3vw;
  }
  .project-item-name-target[width="27.4"] {
    width: 27.4vw;
  }
  .project-item-name-target[width="27.5"] {
    width: 27.5vw;
  }
  .project-item-name-target[width="27.6"] {
    width: 27.6vw;
  }
  .project-item-name-target[width="27.7"] {
    width: 27.7vw;
  }
  .project-item-name-target[width="27.8"] {
    width: 27.8vw;
  }
  .project-item-name-target[width="27.9"] {
    width: 27.9vw;
  }
  .project-item-name-target[width="28"] {
    width: 28vw;
  }
  .project-item-name-target[width="28.1"] {
    width: 28.1vw;
  }
  .project-item-name-target[width="28.2"] {
    width: 28.2vw;
  }
  .project-item-name-target[width="28.3"] {
    width: 28.3vw;
  }
  .project-item-name-target[width="28.4"] {
    width: 28.4vw;
  }
  .project-item-name-target[width="28.5"] {
    width: 28.5vw;
  }
  .project-item-name-target[width="28.6"] {
    width: 28.6vw;
  }
  .project-item-name-target[width="28.7"] {
    width: 28.7vw;
  }
  .project-item-name-target[width="28.8"] {
    width: 28.8vw;
  }
  .project-item-name-target[width="28.9"] {
    width: 28.9vw;
  }
  .project-item-name-target[width="29"] {
    width: 29vw;
  }
  .project-item-name-target[width="29.1"] {
    width: 29.1vw;
  }
  .project-item-name-target[width="29.2"] {
    width: 29.2vw;
  }
  .project-item-name-target[width="29.3"] {
    width: 29.3vw;
  }
  .project-item-name-target[width="29.4"] {
    width: 29.4vw;
  }
  .project-item-name-target[width="29.5"] {
    width: 29.5vw;
  }
  .project-item-name-target[width="29.6"] {
    width: 29.6vw;
  }
  .project-item-name-target[width="29.7"] {
    width: 29.7vw;
  }
  .project-item-name-target[width="29.8"] {
    width: 29.8vw;
  }
  .project-item-name-target[width="29.9"] {
    width: 29.9vw;
  }
  .project-item-name-target[width="30"] {
    width: 30vw;
  }
  .project-item-name-target[width="30.1"] {
    width: 30.1vw;
  }
  .project-item-name-target[width="30.2"] {
    width: 30.2vw;
  }
  .project-item-name-target[width="30.3"] {
    width: 30.3vw;
  }
  .project-item-name-target[width="30.4"] {
    width: 30.4vw;
  }
  .project-item-name-target[width="30.5"] {
    width: 30.5vw;
  }
  .project-item-name-target[width="30.6"] {
    width: 30.6vw;
  }
  .project-item-name-target[width="30.7"] {
    width: 30.7vw;
  }
  .project-item-name-target[width="30.8"] {
    width: 30.8vw;
  }
  .project-item-name-target[width="30.9"] {
    width: 30.9vw;
  }
  .project-item-name-target[width="31"] {
    width: 31vw;
  }
  .project-item-name-target[width="31.1"] {
    width: 31.1vw;
  }
  .project-item-name-target[width="31.2"] {
    width: 31.2vw;
  }
  .project-item-name-target[width="31.3"] {
    width: 31.3vw;
  }
  .project-item-name-target[width="31.4"] {
    width: 31.4vw;
  }
  .project-item-name-target[width="31.5"] {
    width: 31.5vw;
  }
  .project-item-name-target[width="31.6"] {
    width: 31.6vw;
  }
  .project-item-name-target[width="31.7"] {
    width: 31.7vw;
  }
  .project-item-name-target[width="31.8"] {
    width: 31.8vw;
  }
  .project-item-name-target[width="31.9"] {
    width: 31.9vw;
  }
  .project-item-name-target[width="32"] {
    width: 32vw;
  }
  .project-item-name-target[width="32.1"] {
    width: 32.1vw;
  }
  .project-item-name-target[width="32.2"] {
    width: 32.2vw;
  }
  .project-item-name-target[width="32.3"] {
    width: 32.3vw;
  }
  .project-item-name-target[width="32.4"] {
    width: 32.4vw;
  }
  .project-item-name-target[width="32.5"] {
    width: 32.5vw;
  }
  .project-item-name-target[width="32.6"] {
    width: 32.6vw;
  }
  .project-item-name-target[width="32.7"] {
    width: 32.7vw;
  }
  .project-item-name-target[width="32.8"] {
    width: 32.8vw;
  }
  .project-item-name-target[width="32.9"] {
    width: 32.9vw;
  }
  .project-item-name-target[width="33"] {
    width: 33vw;
  }
  .project-item-name-target[width="33.1"] {
    width: 33.1vw;
  }
  .project-item-name-target[width="33.2"] {
    width: 33.2vw;
  }
  .project-item-name-target[width="33.3"] {
    width: 33.3vw;
  }
  .project-item-name-target[width="33.4"] {
    width: 33.4vw;
  }
  .project-item-name-target[width="33.5"] {
    width: 33.5vw;
  }
  .project-item-name-target[width="33.6"] {
    width: 33.6vw;
  }
  .project-item-name-target[width="33.7"] {
    width: 33.7vw;
  }
  .project-item-name-target[width="33.8"] {
    width: 33.8vw;
  }
  .project-item-name-target[width="33.9"] {
    width: 33.9vw;
  }
  .project-item-name-target[width="34"] {
    width: 34vw;
  }
  .project-item-name-target[width="34.1"] {
    width: 34.1vw;
  }
  .project-item-name-target[width="34.2"] {
    width: 34.2vw;
  }
  .project-item-name-target[width="34.3"] {
    width: 34.3vw;
  }
  .project-item-name-target[width="34.4"] {
    width: 34.4vw;
  }
  .project-item-name-target[width="34.5"] {
    width: 34.5vw;
  }
  .project-item-name-target[width="34.6"] {
    width: 34.6vw;
  }
  .project-item-name-target[width="34.7"] {
    width: 34.7vw;
  }
  .project-item-name-target[width="34.8"] {
    width: 34.8vw;
  }
  .project-item-name-target[width="34.9"] {
    width: 34.9vw;
  }
  .project-item-name-target[width="35"] {
    width: 35vw;
  }
  .project-item-name-target[width="35.1"] {
    width: 35.1vw;
  }
  .project-item-name-target[width="35.2"] {
    width: 35.2vw;
  }
  .project-item-name-target[width="35.3"] {
    width: 35.3vw;
  }
  .project-item-name-target[width="35.4"] {
    width: 35.4vw;
  }
  .project-item-name-target[width="35.5"] {
    width: 35.5vw;
  }
  .project-item-name-target[width="35.6"] {
    width: 35.6vw;
  }
  .project-item-name-target[width="35.7"] {
    width: 35.7vw;
  }
  .project-item-name-target[width="35.8"] {
    width: 35.8vw;
  }
  .project-item-name-target[width="35.9"] {
    width: 35.9vw;
  }
  .project-item-name-target[width="36"] {
    width: 36vw;
  }
  .project-item-name-target[width="36.1"] {
    width: 36.1vw;
  }
  .project-item-name-target[width="36.2"] {
    width: 36.2vw;
  }
  .project-item-name-target[width="36.3"] {
    width: 36.3vw;
  }
  .project-item-name-target[width="36.4"] {
    width: 36.4vw;
  }
  .project-item-name-target[width="36.5"] {
    width: 36.5vw;
  }
  .project-item-name-target[width="36.6"] {
    width: 36.6vw;
  }
  .project-item-name-target[width="36.7"] {
    width: 36.7vw;
  }
  .project-item-name-target[width="36.8"] {
    width: 36.8vw;
  }
  .project-item-name-target[width="36.9"] {
    width: 36.9vw;
  }
  .project-item-name-target[width="37"] {
    width: 37vw;
  }
  .project-item-name-target[width="37.1"] {
    width: 37.1vw;
  }
  .project-item-name-target[width="37.2"] {
    width: 37.2vw;
  }
  .project-item-name-target[width="37.3"] {
    width: 37.3vw;
  }
  .project-item-name-target[width="37.4"] {
    width: 37.4vw;
  }
  .project-item-name-target[width="37.5"] {
    width: 37.5vw;
  }
  .project-item-name-target[width="37.6"] {
    width: 37.6vw;
  }
  .project-item-name-target[width="37.7"] {
    width: 37.7vw;
  }
  .project-item-name-target[width="37.8"] {
    width: 37.8vw;
  }
  .project-item-name-target[width="37.9"] {
    width: 37.9vw;
  }
  .project-item-name-target[width="38"] {
    width: 38vw;
  }
  .project-item-name-target[width="38.1"] {
    width: 38.1vw;
  }
  .project-item-name-target[width="38.2"] {
    width: 38.2vw;
  }
  .project-item-name-target[width="38.3"] {
    width: 38.3vw;
  }
  .project-item-name-target[width="38.4"] {
    width: 38.4vw;
  }
  .project-item-name-target[width="38.5"] {
    width: 38.5vw;
  }
  .project-item-name-target[width="38.6"] {
    width: 38.6vw;
  }
  .project-item-name-target[width="38.7"] {
    width: 38.7vw;
  }
  .project-item-name-target[width="38.8"] {
    width: 38.8vw;
  }
  .project-item-name-target[width="38.9"] {
    width: 38.9vw;
  }
  .project-item-name-target[width="39"] {
    width: 39vw;
  }
  .project-item-name-target[width="39.1"] {
    width: 39.1vw;
  }
  .project-item-name-target[width="39.2"] {
    width: 39.2vw;
  }
  .project-item-name-target[width="39.3"] {
    width: 39.3vw;
  }
  .project-item-name-target[width="39.4"] {
    width: 39.4vw;
  }
  .project-item-name-target[width="39.5"] {
    width: 39.5vw;
  }
  .project-item-name-target[width="39.6"] {
    width: 39.6vw;
  }
  .project-item-name-target[width="39.7"] {
    width: 39.7vw;
  }
  .project-item-name-target[width="39.8"] {
    width: 39.8vw;
  }
  .project-item-name-target[width="39.9"] {
    width: 39.9vw;
  }
  .project-item-name-target[width="40"] {
    width: 40vw;
  }
  .project-item-name-textbox {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5vw;
    transition: font-weight ease-in-out 0.2s;
  }
  .project-item-name-textbox.active {
    font-weight: 500;
  }
  .project-item-divisor {
    flex-grow: 1;
  }
  .project-item-expander-trigger {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .project-item-pinner-trigger {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    transition: transform ease-in-out 0.2s;
  }
  .project-item-expander-target {
    width: 2vw;
    height: 2vw;
    margin: 0.3vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .project-item-pinner-target {
    width: 2vw;
    height: 2vw;
    margin: 0.3vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .project-item-expander {
    transform-origin: 50% 50%;
    font-size: 2.5vw;
    transition: transform ease-in-out 0.2s;
  }
  .project-item-expander.active {
    transform: translate(0, 0.2vw);
  }
  .project-item-pinner {
    transform-origin: 50% 50%;
    font-size: 1.5vw;
    transition: transform ease-in-out 0.2s;
    transform: rotate(35deg);
  }
  .project-item-pinner.active {
    transform: translate(0, -0.3vw);
  }
  .project-item-collapsible {
    height: 8.5vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .collapsible-text {
    flex-grow: 1;
    overflow: hidden;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 1.1vw;
  }
  .collapsible-text p {
    width: 100%;
    margin-top: 0.3vw;
    margin-bottom: 0.3vw;
    text-align: justify;
  }
  .collapsible-text p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .collapsible-text p i {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .collapsible-text p em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" -10, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .collapsible-text p:first-child {
    margin-top: 0vw;
  }
  .collapsible-text p:last-child {
    margin-bottom: 0vw;
  }
  .collapsible-action-container {
    height: 1.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }
  .collapsible-action {
    width: 3.2vw;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 570, "YTUC" 700;
    font-size: 1vw;
  }
  .contacts {
    position: relative;
    background-color: rgba(0, 0, 0, 0.8274509804);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .contacts-background {
    position: absolute;
    top: -75vh;
    left: -15vh;
    height: -moz-min-content;
    height: min-content;
    width: -moz-min-content;
    width: min-content;
    font-family: Hikoku-Diagonal;
    font-size: 200vh;
    opacity: 1;
    color: #242424;
  }
  .contacts-container {
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .contacts-title-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    width: 10%;
  }
  .contacts-title {
    font-family: Hikoku-Outline;
    font-size: 10vw;
    color: white;
    transform-origin: 100% 100%;
    transform: rotate(-90deg) translateX(100%);
  }
  .contacts-address-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    color: white;
  }
  .contacts-address-container .availability-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .contacts-address-container .availability-container .day-container {
    margin-right: 0.5vw;
  }
  .contacts-address-container .availability-container .day-container p {
    color: #888888;
  }
  .contacts-address-container .availability-container br {
    margin-bottom: 0.3vw;
  }
  .contacts-address-container .contacts-address-divider {
    height: 0.05vw;
    margin-top: 0.5vw;
    margin-bottom: 1vw;
  }
  .contacts-address-container .phone-number-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .contacts-address-container h2 {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    margin-bottom: 0.3vw;
    font-size: 1.5vw;
  }
  .contacts-address-container h3 {
    text-decoration: none;
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    margin-margin-top: 0px;
    margin-margin-bottom: 0px;
    margin-margin-left: 0px;
    margin-left: 1vw;
    margin-bottom: 0.2vw;
    margin-top: 0.2vw;
    color: #888888;
  }
  .contacts-address-container h3.phone-country-title {
    width: 1.2vw;
  }
  .contacts-address-container a {
    text-decoration: none;
  }
  .contacts-address-container a p {
    color: white;
  }
  .contacts-address-container p {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    font-size: 1vw;
    margin-left: 1vw;
  }
  .contacts-address-container i {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" -100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    margin-right: 0.05vw;
    color: white;
  }
  .contacts-address-container em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    font-size: 3vw;
    color: #888888;
  }
  .contacts-map-container {
    flex-grow: 1;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    padding: 6px;
  }
  .contacts-map-container .map {
    height: 100%;
    width: 100%;
    border: 0;
  }
  .contacts-credits-container {
    position: absolute;
    bottom: 1vw;
    right: 1vw;
  }
  .contacts-credits-container p {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" -5, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    margin: 0;
    font-size: 1.3vw;
    color: #666666;
  }
  .contacts-credits-container p em {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 100, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 760, "YTDE" -300, "YTFI" 738, "YTLC" 570, "YTUC" 760;
    color: #888888;
  }
  .indicator-container-trigger {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    z-index: 1;
    width: 12vw;
    height: 50vh;
    right: 0px;
    top: 25vh;
  }
  .indicator-container-trigger .indicator-container {
    transform: translate(14.5vw, 0px);
  }
  .indicator-container-trigger .scrollbar-container {
    transform: translate(4.07vw, 0px);
  }
  .indicator-container-trigger:hover:not(.active) .indicator-container {
    transform: translate(1.67vw, 0px);
  }
  .indicator-container-trigger.active .scrollbar-container {
    transform: translate(0px, 0px);
  }
  .indicator-container-trigger.negative .scrollbar-container {
    border-color: white;
  }
  .indicator-container-trigger.negative .scrollbar-dot {
    background-color: white;
  }
  .indicator-container-trigger.negative .indicator-item-name {
    color: white;
  }
  .indicator-container-trigger.negative .indicator-item-letter {
    color: #444444;
  }
  .indicator-container-trigger.negative .indicator-item-letter.active:not(.selected) {
    color: #ffffff;
  }
  .indicator-container-trigger.negative .indicator-item-letter.selected:not(.active) {
    color: #777777;
  }
  .indicator-container-trigger.negative .indicator-item-letter.selected.active {
    color: #ffffff;
  }
  .indicator-container-trigger.negative .indicator-item-dot {
    border-color: white;
  }
  .indicator-container-trigger.negative .indicator-item-dot.selected.active {
    background-color: white;
  }
  .scrollbar-container {
    width: 0.52vw;
    height: 6.4vw;
    margin-right: 1.05vw;
    border-radius: 0.52vw;
    border-style: solid;
    border-color: black;
    border-width: 0.05vw;
    transition: all ease-in-out 0.2s;
  }
  .scrollbar-dot {
    position: relative;
    width: 0.52vw;
    height: 0.52vw;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-radius: 0.52vw;
    background-color: black;
    transition: background-color ease-in-out 0.2s;
  }
  .indicator-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    transition: all ease-in-out 0.2s;
  }
  .indicator-item-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-top: 0vw;
    margin-bottom: 0vw;
  }
  .indicator-item-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    height: 1.3vw;
    margin: 0.625vw 0px 0.625vw 0.625vw;
  }
  .indicator-item-box.item-box-1 {
    width: 6.5vw;
  }
  .indicator-item-box.item-box-2 {
    width: 7.8vw;
  }
  .indicator-item-box.item-box-3 {
    width: 7.8vw;
  }
  .indicator-item-letter {
    font-family: Hikoku-Outline;
    font-size: 2.35vw;
    font-weight: 100;
    transition: all ease-in-out 0.2s;
    transform-origin: 50% 50%;
    transform: translate(0.52vw, -0.15vw) scale(1);
    color: #bbbbbb;
  }
  .indicator-item-letter.active:not(.selected) {
    transform: translate(-0.26vw, -0.15vw) scale(1.2);
    color: #000000;
  }
  .indicator-item-letter.selected:not(.active) {
    transform: translate(0.52vw, -0.15vw) scale(1.2);
    color: #888888;
  }
  .indicator-item-letter.selected.active {
    transform: translate(-0.26vw, -0.15vw) scale(1.2);
    color: #000000;
  }
  .indicator-item-name {
    font-size: 0.83vw;
    font-weight: 250;
    transition: color ease-in-out 0.2s;
  }
  .indicator-item-name::first-letter {
    font-size: 0.94vw;
  }
  .indicator-item-name.active:not(.selected) {
    font-size: 0.94vw;
  }
  .indicator-item-name.selected:not(.active) {
    font-weight: 500;
    font-size: 0.94vw;
  }
  .indicator-item-name.active.selected {
    font-weight: 400;
    font-size: 0.94vw;
  }
  .indicator-item-dot {
    width: 0.3125vw;
    height: 0px;
    border-color: black;
    border-style: solid;
    border-width: 0.052vw;
    margin-left: 0.52vw;
    margin-right: 0.52vw;
    transition: all ease-in-out 0.2s;
  }
  .indicator-item-dot.active:not(selected) {
    width: 0.3125vw;
    height: 0.83vw;
  }
  .indicator-item-dot.selected:not(.active) {
    width: 0px;
    height: 0.83vw;
  }
  .indicator-item-dot.selected.active {
    background-color: black;
    width: 0.3125vw;
    height: 0.83vw;
  }
  .background-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .background-container.animated .background-svg {
    animation-composition: add;
    animation-name: translationX, translationY, rotation, skewX, skewY;
    animation-duration: 8s, 7s, 6s, 5.5s, 5s;
    animation-delay: -1s, -2s, -5s, -3s, -4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .background-active-animation {
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    transition: transform linear 0.05s;
  }
  .background-passive-animation {
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    padding-top: 10vh;
    transition: transform ease-in-out 0.5s;
  }
  .background-passive-animation.page-1 {
    transform: translateY(0vh);
  }
  .background-passive-animation.page-2 {
    transform: translateY(-10vh);
  }
  .background-passive-animation.page-3 {
    transform: translateY(-20vh);
  }
  .background-svg {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    width: 200vw;
    height: 200vh;
    left: -100vw;
    top: -100vh;
    transform-origin: 50% 50%;
    transform: scale(120%);
  }
  @keyframes translationX {
    0% {
      transform: translateX(-1.5vw);
    }
    100% {
      transform: translateX(1.5vw);
    }
  }
  @keyframes translationY {
    0% {
      transform: translateY(-1.5vw);
    }
    100% {
      transform: translateY(1.5vw);
    }
  }
  @keyframes rotation {
    0% {
      transform: rotateZ(-1.5deg);
    }
    100% {
      transform: rotateZ(1.5deg);
    }
  }
  @keyframes skewX {
    0% {
      transform: skewX(-2deg);
    }
    100% {
      transform: skewX(2deg);
    }
  }
  @keyframes skewY {
    0% {
      transform: skewY(-2deg);
    }
    100% {
      transform: skewY(2deg);
    }
  }
  .lines {
    stroke: #d4d4d4;
    stroke-width: 0.05%;
    opacity: 0.5;
  }
  .dot {
    fill: #b9b9b9;
  }
  .resume-container {
    z-index: 4;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 100vw;
    transition: left ease-in-out 0.2s;
    background-color: #181818;
    overflow: none;
    overscroll-behavior: none;
  }
  .resume-container.active {
    left: 0vw;
  }
  .resume-container .background-logo-container {
    position: absolute;
    right: -20vw;
    top: -15vw;
    width: 110vw;
  }
  .resume-container .background-logo-container #t, .resume-container .background-logo-container #f {
    fill: rgba(0, 0, 0, 0);
    stroke: #222222;
    stroke-width: 1vw;
  }
  .resume-container .close-button-trigger {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .resume-container .close-button-container {
    width: 3vw;
    height: 3vw;
    margin: 1vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .resume-container .close-button-icon {
    font-size: 3vw;
    transform-origin: 50% 50%;
    transition: transform ease-in-out 0.2s;
    color: #ffffff;
  }
  .resume-container .close-button-icon.active {
    transform: scale(1.1);
  }
  .resume-container .resume-scroller {
    position: relative;
    width: 70vw;
    height: 100vh;
    left: 20vw;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    scrollbar-width: none;
  }
  .resume-container .resume-scroller::-webkit-scrollbar {
    display: none;
  }
  .resume-container .resume-scroller .resume-content {
    width: 100%;
  }
  .resume-container .resume-minimap {
    position: absolute;
    width: 12vw;
    height: 90vh;
    top: 5vh;
    left: 1vw;
  }
  .resume-container .resume-minimap .resume-scrollbar-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .resume-container .resume-minimap .page-preview {
    pointer-events: none;
    transform-origin: 0 0;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    position: relative;
  }
  .resume-container .resume-minimap .page-viewport {
    position: absolute;
    width: calc(100% - 2px);
    left: 0;
    top: 0;
    border: 1px solid white;
    transform-origin: 50% 50%;
    transform: scaleX(1);
    transition: background-color ease-in-out 0.2s;
  }
  .resume-container .resume-minimap .page-viewport:hover {
    background-color: rgba(185, 184, 184, 0.1803921569);
  }
  .resume-content {
    margin: 0;
    margin-top: 7vw;
    color: white;
    display: inline-block;
  }
  .resume-content .resume-separator {
    position: relative;
    height: 15vw;
  }
  .resume-content .resume-title {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 600;
    color: #aaaaaa;
    font-size: 5vw;
    margin-top: 2vw;
    margin-bottom: 1.5vw;
  }
  .resume-content .resume-paragraph {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
    font-size: 1.5vw;
  }
  .resume-content .resume-paragraph p {
    margin-top: 1vw;
    margin-bottom: 1vw;
    text-align: justify;
    color: #cccccc;
  }
  .resume-content .resume-paragraph p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
  }
  .resume-content .resume-experience {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-items: stretch;
  }
  .resume-content .resume-experience-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #bbbbbb;
    margin: 0;
  }
  .resume-content .resume-experience-header-picture {
    width: 7vw;
    height: 7vw;
  }
  .resume-content .resume-experience-header-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .resume-content .resume-experience-header-company {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2.5vw;
    text-transform: uppercase;
    margin-left: 1vw;
  }
  .resume-content .resume-experience-header-separator {
    flex-grow: 1;
  }
  .resume-content .resume-experience-header-duration {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2.7vw;
    color: #aaaaaa;
    text-transform: uppercase;
  }
  .resume-content .resume-experience-subheader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #bbbbbb;
    margin: 0;
    margin-left: 9.5vw;
    margin-top: 1vw;
  }
  .resume-content .resume-experience-subheader-role {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2vw;
  }
  .resume-content .resume-experience-subheader-separator {
    flex-grow: 1;
  }
  .resume-content .resume-experience-subheader-duration {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2vw;
    color: #aaaaaa;
  }
  .resume-content .resume-experience-content {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
    font-size: 1.5vw;
    margin-left: 9.5vw;
  }
  .resume-content .resume-experience-content li::marker {
    color: #cccccc;
  }
  .resume-content .resume-experience-content p {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    text-align: justify;
    color: #cccccc;
  }
  .resume-content .resume-experience-content p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
  }
  .resume-content .resume-skill {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-items: stretch;
  }
  .resume-content .resume-skill-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #bbbbbb;
    margin: 0;
  }
  .resume-content .resume-skill-header-picture {
    width: 5vw;
    height: 5vw;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .resume-content .resume-skill-header-picture img {
    width: 80%;
    height: 80%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .resume-content .resume-skill-header-title {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2.5vw;
    text-transform: uppercase;
  }
  .resume-content .resume-skill-header-separator {
    flex-grow: 1;
  }
  .resume-content .resume-skill-header-level {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 75, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 600, "YTLC" 500, "YTUC" 600;
    font-size: 2.2vw;
    color: #aaaaaa;
    text-transform: uppercase;
  }
  .resume-content .resume-skill-content {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
    font-size: 1.5vw;
    margin-left: 9.5vw;
  }
  .resume-content .resume-skill-content ul {
    margin: 0;
  }
  .resume-content .resume-skill-content li::marker {
    color: #cccccc;
  }
  .resume-content .resume-skill-content p {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    text-align: justify;
    color: #cccccc;
  }
  .resume-content .resume-skill-content p b {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 500, "YTUC" 720;
  }
  .resume-credits {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    color: #888888;
    text-align: right;
    font-size: 0.8vw;
  }
  .resume-authors {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    color: #aaaaaa;
    text-align: right;
    font-size: 0.8vw;
    margin-bottom: 0.5vw;
  }
  .resume-authors em {
    font-size: 1vw;
  }
  body {
    margin: 0;
  }
  body.no-mouse {
    cursor: none;
  }
  .body-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
  }
  .mobile-page-container {
    display: none;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  a:not(.noicon)::after {
    content: "link";
    display: inline-block;
    font-family: "Material Symbols Outlined";
    color: inherit;
    font-size: 0.8em;
    top: -0.4em;
    position: relative;
    font-weight: 100;
  }
}
@media only screen and (max-width: 1279px) {
  @font-face {
    font-family: Hikoku-Light;
    src: url("./assets/fonts/Hikou Light.otf");
  }
  @font-face {
    font-family: Hikoku-Regular;
    src: url("./assets/fonts/Hikou Regular.otf");
  }
  @font-face {
    font-family: Hikoku-Diagonal;
    src: url("./assets/fonts/Hikou Diagonal.otf");
  }
  @font-face {
    font-family: Hikoku-Outline;
    src: url("./assets/fonts/Hikou Outline.otf");
  }
  .roboto-body {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: auto;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  }
  .montserrat-body {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  .navbar-container {
    display: none;
  }
  .resume-container {
    display: none;
  }
  .indicator-container-trigger {
    display: none;
  }
  .body-container {
    display: none;
  }
  .cursor-container {
    display: none;
  }
  .background-container {
    display: none;
  }
}
@media only screen and (max-width: 1279px) and (max-aspect-ratio: 1/1) {
  .mobile-page-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .mobile-page-container .mobile-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .mobile-page-container .mobile-background svg {
    height: 200vh;
  }
  .mobile-page-container .mobile-background .lines {
    stroke: #d4d4d4;
    stroke-width: 0.05vh;
    opacity: 0.5;
  }
  .mobile-page-container .mobile-background .dot {
    fill: #b9b9b9;
  }
  .mobile-page-container .mobile-logo-container {
    width: 70vw;
    height: 70vw;
  }
  .mobile-page-container .mobile-separator {
    width: 50vw;
    height: 0.1vh;
    background-color: black;
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
  .mobile-page-container .mobile-text-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .mobile-page-container .mobile-text-container .mobile-text-title {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 8vw;
    text-transform: uppercase;
  }
  .mobile-page-container .mobile-text-container .mobile-text-title::first-letter {
    font-size: 9vw;
  }
  .mobile-page-container .mobile-text-container .mobile-text-subtitle {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 4vw;
    text-align: center;
  }
}
@media only screen and (max-width: 1279px) and (min-aspect-ratio: 1/1) {
  .mobile-page-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .mobile-page-container .mobile-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .mobile-page-container .mobile-background svg {
    width: 200vw;
  }
  .mobile-page-container .mobile-background .lines {
    stroke: #d4d4d4;
    stroke-width: 0.1vw;
    opacity: 0.5;
  }
  .mobile-page-container .mobile-background .dot {
    fill: #b9b9b9;
  }
  .mobile-page-container .mobile-logo-container {
    width: 30vh;
    height: 30vh;
  }
  .mobile-page-container .mobile-separator {
    height: 20vh;
    width: 0.1vw;
    background-color: black;
    margin-left: 5vw;
    margin-right: 5vw;
  }
  .mobile-page-container .mobile-text-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .mobile-page-container .mobile-text-container .mobile-text-title {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 4.5vw;
    text-transform: uppercase;
  }
  .mobile-page-container .mobile-text-container .mobile-text-title::first-letter {
    font-size: 5.5vw;
  }
  .mobile-page-container .mobile-text-container .mobile-text-subtitle {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 150, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
    font-size: 2vw;
    text-align: center;
  }
}