@font-face {
  font-family: 'CustomFont';
  src: url("./resources/Fonts/CSLoreto-Regular_demo-BF67bfee7365cf5.otf") format("opentype"); }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/* base style */
html {
  overflow-x: hidden; }

body {
  overflow-x: hidden;
  padding: 5vh 5vw 5vh 5vw;
  margin: 0;
  font-family: "CustomFont";
  font-style: italic;
  background-color: white; }
  @media (max-width: 925px) {
    body {
      padding: 0; } }

a {
  user-select: none;
  text-decoration: none;
  color: inherit; }

ul {
  list-style-type: none; }

/* text formating */
.title {
  font-size: 3rem;
  font-weight: 700;
  user-select: none; }
  @media (max-width: 925px) {
    .title {
      font-size: 1.8rem; } }

nav .btn {
  font-size: 1.3rem;
  font-weight: 500; }
  @media (max-width: 925px) {
    nav .btn {
      font-size: 0.9rem; } }

.section-title {
  font-size: 2.2rem;
  font-weight: 500; }
  @media (max-width: 925px) {
    .section-title {
      font-size: 1.3rem; } }

.desc {
  font-size: 1.3rem;
  font-weight: 500; }
  @media (max-width: 925px) {
    .desc {
      font-size: 0.9rem; } }

h1 {
  font-size: 2.2rem; }
  @media (max-width: 925px) {
    h1 {
      font-size: 1.3rem; } }

p {
  font-size: 1.3rem;
  font-weight: 100; }
  @media (max-width: 925px) {
    p {
      font-size: 0.9rem; } }

/* default structural style */
.all-content {
  display: flex;
  flex-direction: column; }

header {
  position: relative;
  height: 10vh;
  padding: 0 2vw;
  display: flex;
  background-color: white; }
  header .title {
    position: absolute;
    bottom: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease; }

main {
  position: relative;
  height: 70vh;
  background-color: white;
  display: flex;
  flex-direction: row; }
  @media (max-width: 925px) {
    main {
      height: 85vh; } }

footer {
  height: 10vh;
  padding: 0 2em;
  display: flex;
  background-color: white; }
  @media (max-width: 925px) {
    footer {
      height: 0; } }

.links {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  bottom: 0;
  gap: 0.2rem;
  transform: translateY(80px);
  width: 90vw;
  height: 80px; }
  .links p {
    font-size: 0.9rem; }
  .links a {
    font-size: 0.9rem; }

.main-view {
  position: absolute;
  left: 0;
  z-index: 1;
  width: calc(100% - 5rem - 8vw);
  height: 100%;
  display: flex;
  margin-right: calc(5rem + 8vw);
  flex-direction: row;
  align-items: center; }
  .main-view #main-photo {
    box-sizing: unset;
    min-width: 405px;
    height: 80%;
    padding: 2vh 2vw; }
    .main-view #main-photo img {
      height: 100%;
      width: 100%;
      object-fit: cover; }
    @media (max-width: 925px) {
      .main-view #main-photo {
        width: 80%;
        max-height: 400px; } }
  .main-view #desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2vh 2vw;
    width: 40vw;
    gap: 0.9rem; }
    @media (max-width: 925px) {
      .main-view #desc {
        width: 90%; } }
  @media (max-width: 925px) {
    .main-view {
      flex-direction: column; } }

.side-view {
  position: absolute;
  right: 0;
  width: auto;
  height: 100%;
  z-index: 3;
  display: flex; }
  .side-view .nav-view {
    box-sizing: initial;
    left: 0;
    height: 100%;
    width: 5rem;
    right: 0;
    z-index: 3;
    display: flex;
    padding: 0 4vw;
    background-color: white;
    align-items: center; }
    .side-view .nav-view nav {
      width: 100%; }
  .side-view .content-view {
    position: relative;
    right: 0;
    height: 100%;
    width: 0;
    z-index: 10;
    background-color: white;
    transition: width 0.5s ease; }
    .side-view .content-view .view {
      overflow: hidden;
      position: absolute;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease; }
    .side-view .content-view #resume-view,
    .side-view .content-view #photo-view {
      overflow-y: scroll;
      height: 100%; }
    .side-view .content-view #project-view {
      overflow-y: hidden;
      height: 100%; }

/* resume */
#resume-view {
  width: 100%;
  white-space: pre-line;
  line-height: 0.9rem; }
  @media (max-width: 925px) {
    #resume-view {
      line-height: 0.8rem; } }
  #resume-view h2 {
    font-size: 2.2rem; }
    @media (max-width: 925px) {
      #resume-view h2 {
        font-size: 1.3rem; } }
  #resume-view p {
    font-size: 0.9rem; }
  #resume-view strong {
    font-weight: bold; }

/* projects */
.project-container {
  position: relative;
  width: calc(90vw - calc(5rem + 8vw));
  height: 100%; }
  .project-container nav {
    position: absolute;
    z-index: 12;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: white;
    transition: height 0.5s ease; }
    .project-container nav .p-nav {
      visibility: visible;
      transition: visibility 0.2s ease; }
      .project-container nav .p-nav:hover {
        box-shadow: unset;
        border: unset;
        transform: scale(1.2);
        transition: transform 0.2s ease; }
    .project-container nav .p-nav img {
      width: 150px;
      height: 150px;
      object-fit: cover; }
      @media (max-width: 925px) {
        .project-container nav .p-nav img {
          width: 100px;
          height: 100px; } }
    @media (max-width: 925px) {
      .project-container nav {
        flex-direction: column; } }
  .project-container .project-shows {
    position: relative;
    box-sizing: unset;
    height: 100%;
    transition: height 0.5s ease; }
    .project-container .project-shows .show {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease; }
      @media (max-width: 925px) {
        .project-container .project-shows .show {
          flex-direction: column; } }
      .project-container .project-shows .show .desc {
        width: 35%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 0.9rem; }
        .project-container .project-shows .show .desc p {
          font-size: 0.9rem; }
          @media (max-width: 925px) {
            .project-container .project-shows .show .desc p {
              font-size: 0.8rem; } }
        @media (max-width: 925px) {
          .project-container .project-shows .show .desc {
            width: 100%; } }
      .project-container .project-shows .show .photo-wrapper {
        position: relative;
        width: 65%;
        padding: 0 20px;
        margin: 0 20px; }
        @media (max-width: 925px) {
          .project-container .project-shows .show .photo-wrapper {
            height: 20%; } }
        .project-container .project-shows .show .photo-wrapper .scroll-btn {
          background-color: unset;
          z-index: 20;
          position: absolute;
          top: 0;
          color: black;
          border: none;
          cursor: pointer;
          box-sizing: unset;
          height: 3vh;
          width: 20px;
          padding: 33.5vh 0; }
          .project-container .project-shows .show .photo-wrapper .scroll-btn:hover {
            font-size: 1.3rem; }
          @media (max-width: 925px) {
            .project-container .project-shows .show .photo-wrapper .scroll-btn {
              padding: 10% 0;
              font-size: 0.8rem;
              font-weight: 100; } }
        .project-container .project-shows .show .photo-wrapper .left {
          left: 0;
          padding-right: 70px; }
          @media (max-width: 925px) {
            .project-container .project-shows .show .photo-wrapper .left {
              padding-right: 0;
              padding-left: 30px;
              transform: translatex(-30px); } }
        .project-container .project-shows .show .photo-wrapper .right {
          right: 0;
          padding-left: 70px; }
          @media (max-width: 925px) {
            .project-container .project-shows .show .photo-wrapper .right {
              padding-left: 0;
              padding-right: 30px;
              transform: translatex(30px); } }

#p1-state:checked ~ .project-container nav,
#p2-state:checked ~ .project-container nav,
#p3-state:checked ~ .project-container nav,
#p4-state:checked ~ .project-container nav,
#p5-state:checked ~ .project-container nav {
  height: 0;
  transition: height 0.5s ease; }
#p1-state:checked ~ .project-container > nav > .p-nav,
#p2-state:checked ~ .project-container > nav > .p-nav,
#p3-state:checked ~ .project-container > nav > .p-nav,
#p4-state:checked ~ .project-container > nav > .p-nav,
#p5-state:checked ~ .project-container > nav > .p-nav {
  visibility: hidden;
  transition: visibility 0.2s ease; }

#p1-state:checked ~ .project-container > .project-shows > #p1,
#p2-state:checked ~ .project-container > .project-shows > #p2,
#p3-state:checked ~ .project-container > .project-shows > #p3,
#p4-state:checked ~ .project-container > .project-shows > #p4,
#p5-state:checked ~ .project-container > .project-shows > #p5 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease; }

#p1-state:checked ~ .project-container > nav > #p1-btn,
#p2-state:checked ~ .project-container > nav > #p2-btn,
#p3-state:checked ~ .project-container > nav > #p3-btn,
#p4-state:checked ~ .project-container > nav > #p4-btn,
#p5-state:checked ~ .project-container > nav > #p5-btn {
  text-decoration: underline; }

/* photos */
.floating-box {
  font-size: 0.9rem;
  font-weight: 500;
  position: absolute;
  padding: 0.2rem 10px 0.2rem 10px;
  color: white;
  background-color: black;
  border-radius: 10px;
  height: 1.5rem;
  display: none;
  z-index: 24; }

#photo-view > .photo-container {
  width: calc(90vw - calc(5rem + 8vw));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; }
  #photo-view > .photo-container .photo-preview {
    z-index: 11;
    width: 100%;
    aspect-ratio: 1 / 1.618;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    transition: transform 0.3s ease; }
    #photo-view > .photo-container .photo-preview:hover {
      transform: scale(1.01); }
    #photo-view > .photo-container .photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.show .photo-wrapper {
  display: flex;
  align-items: center; }
  .show .photo-wrapper .photo-scroll {
    height: 90%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain; }
    .show .photo-wrapper .photo-scroll ::-webkit-scrollbar {
      display: none; }
    .show .photo-wrapper .photo-scroll .photo-container {
      display: flex;
      width: 100%;
      height: 100%; }
      .show .photo-wrapper .photo-scroll .photo-container .photo-preview {
        z-index: 11;
        flex: 0 0 100%;
        height: 100%;
        object-fit: cover;
        scroll-snap-align: center;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: white;
        transition: transform 0.3s ease; }
        .show .photo-wrapper .photo-scroll .photo-container .photo-preview:hover {
          cursor: pointer; }
        .show .photo-wrapper .photo-scroll .photo-container .photo-preview img {
          width: 100%;
          height: 100%;
          object-fit: cover; }

/* navigation */
.btn {
  cursor: pointer; }

.side-view li {
  margin: 6px 0; }

nav .btn {
  user-select: none;
  padding: 4px 4px;
  display: flex; }
  nav .btn:hover {
    cursor: pointer;
    background-color: beige; }

.main-view .nav-btn {
  justify-content: left;
  width: 200px; }

/* states */
#default-state:checked ~ main > .side-view > .nav-view #main-btn {
  display: none; }

#resume-state:checked ~ main > .side-view > .content-view,
#project-state:checked ~ main > .side-view > .content-view,
#photo-state:checked ~ main > .side-view > .content-view {
  width: calc(90vw - calc(5rem + 8vw));
  transition: width 0.5s ease; }
  @media (max-width: 925px) {
    #resume-state:checked ~ main > .side-view > .content-view,
    #project-state:checked ~ main > .side-view > .content-view,
    #photo-state:checked ~ main > .side-view > .content-view {
      width: calc(calc(90vw - calc(5rem + 8vw)) + 10vw); } }
#resume-state:checked ~ main > .main-view,
#project-state:checked ~ main > .main-view,
#photo-state:checked ~ main > .main-view {
  display: none; }
#resume-state:checked ~ header > .title,
#project-state:checked ~ header > .title,
#photo-state:checked ~ header > .title {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease; }
#resume-state:checked ~ .links,
#project-state:checked ~ .links,
#photo-state:checked ~ .links {
  display: none; }

#resume-state:checked ~ main > .side-view > .nav-view #resume-btn,
#project-state:checked ~ main > .side-view > .nav-view #project-btn,
#photo-state:checked ~ main > .side-view > .nav-view #photo-btn {
  text-decoration: underline; }

#resume-state:checked ~ main > .side-view > .content-view > #resume-view,
#project-state:checked ~ main > .side-view > .content-view > #project-view,
#photo-state:checked ~ main > .side-view > .content-view > #photo-view {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease; }

.state-linker {
  display: none; }

.no-transition {
  transition: none !important; }

/* Lightbox */
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 28;
  padding-top: 5vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #a1a1a1a1; }

/* Modal Content */
.modal-content {
  background-color: white;
  position: relative;
  margin: auto;
  width: 90vw; }

/* The Close Button */
.close {
  color: black;
  position: absolute;
  font-size: 1.4rem;
  top: 10px;
  right: 25px;
  font-weight: bold; }

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer; }

/* Hide the slides by default */
.mySlides {
  width: 90vw;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }

.mySlides .img {
  width: 100%;
  height: 100%;
  object-fit: contain; }

/* Next & previous buttons */
.prev,
.next {
  font-size: 1.2rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  margin-top: -50px;
  color: black;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none; }

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: white; }

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  background-color: white;
  padding: 8px 12px;
  position: absolute;
  top: 0; }

/*# sourceMappingURL=index.css.map */