:root {
  /* Colors: */
  --unnamed-color-f4d99e: #f4d99e;
  --unnamed-color-c5b085: #c5b085;
  --unnamed-color-d48868: #d48868;
  --unnamed-color-707070: #707070;
  --unnamed-color-000000: #000000;
  --unnamed-color-ffffff: #ffffff;
  --unnamed-color-a1ac9c: #a1ac9c;

  /* Font/text values */
  --unnamed-font-family-plantin-mt-pro: Georgia;
  --unnamed-font-family-helvetica-neue: Helvetica;
  --unnamed-font-style-italic: italic;
  --unnamed-font-style-normal: normal;
  --unnamed-font-weight-300: 300px;
  --unnamed-font-weight-600: 600px;
  --unnamed-font-weight-bold: bold;
  --unnamed-font-weight-medium: medium;
  --unnamed-font-size-15: 15px;
  --unnamed-font-size-17: 17px;
  --unnamed-font-size-20: 2.5vh;
  --unnamed-font-size-57: 9vh;
  --unnamed-font-size-74: 12vh;
  --unnamed-character-spacing-0: 0px;
  --unnamed-character-spacing-1-85: 1.85px;
  --unnamed-character-spacing-0-42: 0.42px;
  --unnamed-character-spacing-0-5: 0.5px;
  --unnamed-line-spacing-18: 18px;
  --unnamed-line-spacing-21: 21px;
  --unnamed-line-spacing-24: 24px;
  --unnamed-line-spacing-79: 9vh;
  --unnamed-line-spacing-90: 14vh;
}

.unnamed-character-style-1 {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-300);
  font-size: var(--unnamed-font-size-20);
  line-height: var(--unnamed-line-spacing-24);
  letter-spacing: var(--unnamed-character-spacing-0-5);
  color: var(--unnamed-color-000000);
}
.unnamed-character-style-2 {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-medium);
  font-size: var(--unnamed-font-size-17);
  line-height: var(--unnamed-line-spacing-21);
  letter-spacing: var(--unnamed-character-spacing-0-42);
  color: var(--unnamed-color-000000);
}

/* common */
.margin {
  margin-left: 10vw;
  margin-right: 10vw;
}

.sub-text-font {
  font-family: var(--unnamed-font-family-plantin-mt-pro);
  font-style: var(--unnamed-font-style-italic);
  font-weight: var(--unnamed-font-weight-600);
  font-size: var(--unnamed-font-size-57);
  line-height: var(--unnamed-line-spacing-79);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-000000);
}

/* nav */
#nav {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  margin-left: 130px;
  margin-right: 130px;
  margin-top: 40.48px;
  width: -webkit-fill-available;
  width: -moz-available;
  z-index: 999;
}

#nav .link {
  margin-right: 40px;
  margin-top: auto;
  margin-bottom: auto;
  text-decoration: none;

  /* generated */
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-medium);
  font-size: var(--unnamed-font-size-15);
  line-height: var(--unnamed-line-spacing-18);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-707070);
}

#nav .link:hover {
  -webkit-text-stroke: 1px black;
  color: #000000;
  cursor: pointer;
}

#nav .home-link {
  margin-right: auto;
}

#nav #home {
  height: 56.05px;
  width: 175.9px;
}

#nav a {
  margin-top: auto;
  margin-bottom: auto;
}

#nav .icon {
  height: 17px;
  width: 17px;
  margin-right: 7px;
  filter: invert(40%);
}

#nav .icon:hover {
  filter: unset;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  padding-top: 6px;
  position: absolute;
  background-color: #ffffff00;
  min-width: 100px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 6px 2px;
  text-decoration: none;
  display: block;
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-medium);
  font-size: var(--unnamed-font-size-15);
  line-height: var(--unnamed-line-spacing-18);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-707070);
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {-webkit-text-stroke: 1px black;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* intro */
#intro {
  position: relative;
  margin-top: 30vh;
  text-align: right;
  padding-bottom: 12vh;
  overflow: hidden;
}

#intro .title-text {
  /* generated */
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-bold);
  font-size: var(--unnamed-font-size-74);
  line-height: var(--unnamed-line-spacing-90);
  letter-spacing: var(--unnamed-character-spacing-1-85);
  color: var(--unnamed-color-000000);
}

#intro .title-inverted-text {
  padding-left: 4px;
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-bold);
  font-size: var(--unnamed-font-size-74);
  line-height: var(--unnamed-line-spacing-90);
  letter-spacing: var(--unnamed-character-spacing-1-85);
  -webkit-text-stroke: .5vh var(--unnamed-color-000000);
  color: var(--unnamed-color-ffffff);
  opacity: 1;
  transition: .5s;
}

#intro .title-inverted-text:hover {
  color: var(--unnamed-color-000000);
  background-color: var(--unnamed-color-a1ac9c);
}

#intro .box {
  display: inline-block;
  width: 15vw;
  height: 2vh;
  margin-top: 5vh;
  margin-bottom:7vh;
  background-color: var(--unnamed-color-000000);
}

#intro .sub-title-block {
  pointer-events: none;
}

#intro .sub-title {
  pointer-events: auto;
  display: inline;
}

#intro .sub-title-block:hover + .stroke-cover {
  transform: translateX(685px)
}

#intro .scroll-text {
  position: absolute;
  font-family: var(--unnamed-font-family-helvetica-neue);
  color: var(--unnamed-color-707070);
  left: 2vw;
  top: 60vh;
  font-size: var(--unnamed-font-size-20);
}

#intro .scroll-text:hover{
  text-decoration: underline;
}

#stroke {
  position: absolute;
  bottom: -10vh;
  right: -10vh;
  z-index: -2;
  width: 100vh;
  height: 50vh;
}

#intro .stroke-cover {
  position: absolute;
  bottom: -10vh;
  right: -10vh;
  z-index: -1;
  width: 100vh;
  height: 50vh;
  overflow-x: hidden;
  transition: transform .8s;
}

#intro .left-margin {
  margin-left: 37px;
}

/* transition */
#transition {
  position: relative;
  margin-top: 186px;
}

/* green box and art link */
/* #green-box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 63vw;
  height: 382px;
  background: var(--unnamed-color-a1ac9c) 0% 0% no-repeat padding-box;
  opacity: 1;
}

#art-link-container {
  position: absolute;
  top: 59px;
  left: 52vw;
}

#art-picture {
  width: 412px;
  height: 260px;
  opacity: 1;
  z-index: 1;
  transition: box-shadow .3s;
}

#art-picture:hover {
  box-shadow: -10px 10px 10px 10px #0000002f;
}

#art-text {
  position: absolute;
  top: 199px;
  left: 279px;
  z-index: 2;
} */

/* red box and design link */
/* #red-box {
  position: absolute;
  top: 450px;
  right: 0px;
  width: 51vw;
  height: 295px;
  background: var(--unnamed-color-d48868) 0% 0% no-repeat padding-box;
  opacity: 1;
}

#design-link-container {
  position: absolute;
  top: 547px;
  right: 44vw;
}

#design-picture {
  width: 557px;
  height: 336px;
  z-index: 1;
  transition: box-shadow .3s;
}

#design-picture:hover {
  box-shadow: 10px 10px 10px 10px #0000002f;
}

#design-text {
  position: absolute;
  top: 274px;
  left: 11px;
  z-index: 2; 
}*/

/* Footer */
#footer {
  margin-top: 25vh;
  margin-bottom: 25vh;
  text-align: center;
}

#footer .box {
  display: inline-block;
  height: 10px;
  width: 76px;
  background-color: var(--unnamed-color-000000);
}

#footer #footer-text {
  font-family: var(--unnamed-font-family-plantin-mt-pro);
  font-style: var(--unnamed-font-style-italic);
  font-weight: var(--unnamed-font-weight-400);
  font-size: 29px;
  line-height: 79px;
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-000000);
}

#footer #footer-links > *{
  margin-left: 17px;
  margin-right: 17px;
  text-decoration: none;
}

#footer .icon {
  height: 25px;
  width: 25px;
  cursor: pointer;
}

#footer .icon:hover {
  filter: invert(40%);
}

#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: black; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 5; /* Add a z-index if needed */
  left: calc(50% - 158px); /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */

  font-family: var(--unnamed-font-family-helvetica-neue);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-medium);
  font-size: var(--unnamed-font-size-15);
  line-height: var(--unnamed-line-spacing-18);
  letter-spacing: var(--unnamed-character-spacing-0);
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* Popup Model */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: auto;
  height: 80%;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

#work-body {
  position: relative;
  width: 850px;
  height: 1200px;
  margin: auto;
  margin-top: 25vh;
}

#work-body .yellow-box {
  /* top: 0; */
  position: absolute;
  width: 425px;
  height: 1200px;
  background: var(--unnamed-color-f4d99e) 0% 0% no-repeat padding-box;
  background: #f4d99e 0% 0% no-repeat padding-box;
  opacity: 1;
}

#work-body .title {
  position: absolute;
  top: 70px;
  left: 350px;
  font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold)
    40px/60px var(--unnamed-font-family-helvetica-neue);
  color: var(--unnamed-color-000000);
  text-align: left;
  letter-spacing: 1.23px;
  color: #000000;
  opacity: 1;
}

#work-body .black-box {
  position: absolute;
  top: 120px;
  left: 350px;
  width: 200px;
  height: 5px;
  background: var(--unnamed-color-000000) 0% 0% no-repeat padding-box;
  opacity: 1;
  z-index: 1;
}

#work-body .image-title-text {
  font-size: 35px;
  font-weight: 500;
  line-height: 30px;
  font-family: Helvetica;
  color: var(--unnamed-color-000000);
  text-align: right;
  letter-spacing: 1.07px;
  opacity: 1;
}

#work-body .image-subtitle-text {
  font: normal normal 300 18px/18px "Helvetica";
  letter-spacing: var(--unnamed-character-spacing-0-42);
  color: var(--unnamed-color-000000);
  text-align: right;
  line-height: 20px;
  opacity: 1;

}
#work-body .image {
  margin-left: 290px;
  width: 500px;
  transition: transform .4s;
  cursor: pointer;
}

.image:hover {
  transform: scale(1.05); 
}

#work-body .freetail-link {
  position: absolute;
  top: 150px;
  left: 60px;
}

#work-body .freetail-line {
  position: absolute;
  border-left: 1px solid black;
  top: 10px;
  left: 270px;
  height: 230px;
}

#work-body .freetail-title {
  position: absolute;
  top: 250px;
  right: 510px;
}

#work-body .freetail-subtitle {
  position: absolute;
  top: 290px;
  right: 510px;
}

#work-body .work-art-link {
  position: absolute;
  top: 500px;
  left: 60px;
}

#work-body .art-line {
  position: absolute;
  border-left: 1px solid black;
  top: 10px;
  left: 270px;
  height: 210px;
}

#work-body .art-title {
  position: absolute;
  top: 230px;
  right: 510px;
}

#work-body .art-subtitle {
  position: absolute;
  top: 270px;
  right: 510px;
}

#work-body .progress-text{
  position: absolute;
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: 20px;
  font-style: italic;
  width: 600px;
  left: 200px;
  top: 900px;
}