html {
  scroll-behavior: smooth;
  /* background-color: #f8f6f6; */
  /* overflow-x: hidden; */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  /* overflow-x: hidden; */
  background-color: #fffefe;
}

.wrapper {
  overflow-x: hidden;
  position: relative;
}

::selection {
  /* color: #8d122a; */
  background-color: #eeccd2;
}

::-webkit-scrollbar {
  display: none;
}

/* ______________ LOADING SCREEN ______________ */

#loading {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 300;
  background-color: #FFFFFF;

  text-align: center;

  animation-delay: 300ms;

}

#loadingLogo {
  animation-delay: 100ms;
  animation-fill-mode: both;
  position: relative;
  top: calc(50vh - 80px);

}


/* ______________ SCREEN TOO SMALL ______________ */
#screentoosmall {
  box-sizing: border-box;
  margin: 0;
  padding: 50vw 20vw;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 301;
  background-color: #FFFFFF;
  text-align: center;

  display: none;
}

/* ______________ GRID ______________ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* grid-gap: 30px; */
  /* padding: 95px 160px 95px 160px; */
  max-width: 1500px;
  margin: 0 auto;
}

/* .cell {
  background-color: rgb(240,240,240);
  height: 100px;
} */

/* default - small devices */
[class*="col"] {
  grid-column-end: span 12;
}

@media only screen and (max-width: 206px) {
  #screentoosmall {
    display: block;
  }
}

@media only screen and (max-width: 435px) {
  /* #screentoosmall {
    display: block;
  } */
  #cs1_imagetop, #cs3_imagetop {
    right: 50px!important;
  }

  #about_imagetop {
    right: calc(-400px - 20vw)!important;
  }

  #about_line {
    right: calc(-85px - 20vw)!important;
    transform: scale(1.2)!important;
  }
}

/* up to 800px typically phone */
@media only screen and (max-width: 800px) {
  .grid {
    padding: 30px;
    max-width: 580px;
  }

  .sm1 {
    grid-column-end: span 12;
  }

  .sm2 {
    grid-column-end: span 6;
  }

  .sm3 {
    grid-column-end: span 4;
  }

  .sm4 {
    grid-column-end: span 3;
  }

  .sm6 {
    grid-column-end: span 2;
  }

  .sm12 {
    grid-column-end: span 1;
  }

  .smspan8 {
    grid-column-end: span 8;
  }

  /* layout */
  .mdspan5 {
    grid-column-end: span 12;
  }

  .line_computer {
    display: none !important;
  }

  .line_tablet {
    display: none !important;
  }

  .line_mobile {
    display: block !important;
  }

  .hidemobile {
    display: none !important;
  }

  #cs2_book {
    grid-row-start: 6;
  }

  /* nav */
  label[for="nav-trigger"] {
    right: 30px !important;
    top: 30px!important;
  }

  .nav_burger_ul {
    display: block !important;
    padding: 0!important;
  }

  .nav_burger_logo {
    display: block !important;
    padding-left: 20px !important;
  }

  .logo_top {
    width: 60px!important;
  }

  .nav_burger_content {
    height: 100% !important;
    top: -100% !important;
    /* padding: 0!important; */
    box-sizing: border-box;
    width: 100vw !important;
    padding: 30px!important;
    overflow: scroll;
  }

  .nav-trigger:checked~.nav_burger_content {
    top: 0 !important;
  }

  .nav_buttons {
    font-size: 14px!important;
    line-height: 1.6rem;
  }

  /* HOME PAGE ABSOLUTE POSITIONINGS & MIN HEIGHTS */
  #home_logo_top {
    height: 480px;
  }

  #home_intro {
    /* height: calc(430px + 6vw); */
    height: 1310px;
  }

  .square {
    width: 15px!important;
    height: 15px!important;
  }

  #cs1_image,
  #cs3_image {
    /* width: 50vw !important; */
    /* max-width: 300px !important; */
    width: 300px!important;
    left: 14vw!important;
  }

  #cs1_image {
    position: absolute;
    top: 1200px;
    left: 90px;
  }

  #cs1_content {
    min-height: 1180px;
  }

  #cs2_image {
    position: absolute;
    top: 2660px;
    left: -55px;
    width: 600px;
  }

  #cs2_content {
    min-height: 1480px;
  }

  #cs3_image {
    position: absolute;
    top: 3860px;
    left: 70px;
  }

  #cs3_content {
    min-height: 1250px;
  }

  .footer {
    position: absolute;
    left: 10vw;
    top: calc(5240px + 100vw/15);
    width: 80vw;
    max-width: 650px;
  }

  .copyright {
    display: block!important;
  }

  .social_links {
    display: inline-block!important;
    float: none!important;
    margin: 25px 0px!important;
  }

  /* ABOUT ABSOLUTE POSITIONINGS */
  #about_section1 {
    margin-top: 800px;
  }

  /* CASE STUDY ABSOLUTE POSITIONINGS */
  .cs_tophr {
    margin: 70px 0px;
  }

  .cs_section1 {
    margin-top: 800px;
  }

  /* typography & buttons */
  h1 {
    font-size: 48px !important;
    line-height: 4.5rem!important;
  }

  h2 {
    font-size: 32px !important;
  }

  h3 {
    font-size: 28px !important;
  }

  h4 {
    font-size: 20px !important;
  }
  p, .largep, ul, li, .text_link {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6rem!important;
  }

  small {
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  .callout {
    font-size: 22px!important;
    margin: 20px 10px!important;
    padding: 12px!important;
    line-height: 2.2rem!important;
  }

  .callout a {
    font-size: 22px!important;
  }

  /* case study images */
  .cs1_section img, .cs_scrollcontent img {
    height: 400px!important;
  }

  .cs_scrollcontent {
    padding: 15px 0px!important;
  }

  .cs_scrollimages {
    margin: 0px 4px!important;
  }

  .prototype {
    width: 100%!important;
    height: auto!important;
    aspect-ratio: 0.45/1!important;
    border-radius: 21px!important;
  }

  /* contact sparkle */
  .sparkle {
    width: 25px!important;
    transform: translateX(-2px);

  }

  /* buttons */
  .text_button {
    font-size: 16px !important;
    font-weight: 300 !important;
  }
  
  .home_cs_button {
    position: relative;
    top: 20px;
    font-size: 14px !important;
    padding: 14px 18px!important;
  }

  .button_sparkle {
    width: 40px!important;
    position: relative;
    right: 24px!important;
    top: 16px!important;
    opacity: 0%;
    transition: opacity ease-out 0.3s;
  }
}


/* 801px to 1024px typically tablet */
/* @media only screen and (max-width: 1169px) { */
@media only screen and (min-width: 801px) {
  .grid {
    padding: 95px 160px 95px 160px;
    grid-gap: 30px;
  }

  #screentoosmall {
    display: none;
  }

  .md1 {
    grid-column-end: span 12;
  }

  .md2 {
    grid-column-end: span 6;
  }

  .md3 {
    grid-column-end: span 4;
  }

  .md4 {
    grid-column-end: span 3;
  }

  .md6 {
    grid-column-end: span 2;
  }

  .md12 {
    grid-column-end: span 1;
  }

  .mdspan5 {
    grid-column-end: span 5;
  }

  .mdspan7 {
    grid-column-end: span 7;
  }

  .mdspan8 {
    grid-column-end: span 8;
  }

  /* nav */
  label[for="nav-trigger"] {
    right: 70px;
  }

  .nav_burger_ul,
  .nav_burger_logo {
    display: block !important;
    /* padding-top: 30px!important; */
    /* padding-right: 30px!important; */
    /* padding-left: 90px!important; */
  }

  .nav_burger_content {
    height: calc(100vh - 130px);
    top: -100vh;
    /* padding: 0!important; */
  }

  .nav-trigger:checked~.nav_burger_content {
    top: 0 !important;
  }

  /* layout */
  .line_mobile {
    display: none !important;
  }

  .line_tablet {
    display: block !important;
  }

  .line_computer {
    display: none !important;
  }

  .hidemobile {
    display: none !important;
  }

  #cs2_book {
    grid-row-start: 6;
  }

  /* HOME PAGE ABSOLUTE POSITIONINGS & MIN HEIGHTS */
  #home_logo_top {
    height: 390px;
  }

  #home_intro {
    /* height: calc(430px + 6vw); */
    height: 1140px;
  }

  #cs1_image,
  #cs3_image {
    width: 300px !important;
  }

  #cs1_image {
    position: absolute;
    top: 1100px;
    left: 370px;
  }

  #cs1_content {
    min-height: 1060px;
  }

  #cs2_image {
    position: absolute;
    top: 2485px;
    /* left: 200px; */
    left: 180px;
    width: 600px;
  }

  #cs2_content {
    min-height: 1270px;
  }

  #cs3_image {
    position: absolute;
    top: 3540px;
    left: 360px;
  }

  #cs3_content {
    min-height: 1050px;
  }

  .footer {
    position: absolute;
    left: calc(50vw - 280px);
    top: 4810px;
    max-width: 650px;
  }

  /* ABOUT ABSOLUTE POSITIONINGS */
  #about_section1 {
    margin-top: 750px;
  }

  /* CASE STUDY ABSOLUTE POSITIONINGS */
  .csinfo {
    margin-top: 18px;
  }

  .cs_section1 {
    margin-top: 800px;
  }

  /* typography & buttons */
  h1 {
    font-size: 72px !important;
  }

  h2 {
    font-size: 48px !important;
  }

  .largep {
    font-size: 24px !important;
    font-weight: 300 !important;
  }

  small {
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  /* buttons */
  .text_button {
    font-size: 21px !important;
    font-weight: 300 !important;
  }
}


/* above 1025px typically desktop */
@media only screen and (min-width: 1170px) {
  .col1 {
    grid-column-end: span 12;
  }

  .col2 {
    grid-column-end: span 6;
  }

  .col3 {
    grid-column-end: span 4;
  }

  .col4 {
    grid-column-end: span 3;
  }

  .col6 {
    grid-column-end: span 2;
  }

  .col12 {
    grid-column-end: span 1;
  }

  .span5 {
    grid-column-end: span 5;
  }

  .span7 {
    grid-column-end: span 7;
  }

  .span8 {
    grid-column-end: span 8;
  }

  .span10 {
    grid-column-end: span 10;
  }

  /* nav */
  label[for="nav-trigger"] {
    right: 10%;
  }

  .nav_burger_ul {
    font-size: 16px !important;
    font-weight: 300 !important;
  }

  .nav_burger_content {
    /* height: calc(100vh - 130px); */
    /* top: -100vh; */
    height: 265px !important;
    top: -470px !important;
  }

  /* layout */
  .line_mobile {
    display: none !important;
  }

  .line_tablet {
    display: none !important;
  }

  .line_computer {
    display: block !important;
  }

  .hidemobile {
    display: inline-block !important;
  }

  #cs2_book {
    grid-row-start: 5;
    grid-column-start: 7;
  }

  /* HOME PAGE ABSOLUTE POSITIONINGS & MIN HEIGHTS */
  #home_logo_top {
    height: 100%;
  }

  #home_intro {
    /* min-height: 400px; */
    /* height: calc(440px + 6vw); */
    height: calc(430px + 6vw);
    max-height: 573px;
  }

  #cs1_image {
    position: absolute;
    /* top: 748px; */
    top: 805px;
    left: calc(50vw - 550px);
  }

  #cs1_content {
    min-height: 660px;
  }

  #cs2_image {
    position: absolute;
    top: 1683px;
    /* right: calc(50vw - 605px); */
    left: calc(50vw + 47px);
    width: 40vw;
    max-width: 560px;
  }

  #cs2_content {
    min-height: 720px;
  }

  #cs3_image {
    position: absolute;
    top: 2235px;
    left: calc(50vw - 537px);
  }

  #cs3_content {
    min-height: 1090px;
  }

  .footer {
    position: absolute;
    left: calc(50vw - 325px);
    top: 2990px;
    min-height: 430px;
    max-width: 650px;
  }

  /* ABOUT ABSOLUTE POSITIONINGS */
  #about_section1 {
    margin-top: 0;
    min-height: 600px;
  }

  /* CASE STUDIES ABSOLUTE POSITIONINGS */
  .cs_tophr {
    margin: 70px 0px 40px 0px;
  }

  .csinfo {
    margin-top: 0;
  }

  .cs_section1 {
    margin-top: 0;
  }

  #cs2_imagetop {
    width: 67vw;
  }

  #cs2_frontcover {
    border-right: 1px solid black;
  }

  /* OTHER PROJECTS ABSOLUTE POSITIONINGS */
  #sandbox_section1 {
    min-height: 600px;
  }

  /* typography & buttons */
  h1 {
    font-size: 64px !important;
  }

  h2 {
    font-size: 46px !important;
  }

  .largep {
    font-size: 21px !important;
    font-weight: 300 !important;
  }

  small {
    font-size: 16px !important;
    font-weight: 400 !important;
  }

  /* buttons */
  .text_button {
    font-size: 19px !important;
    font-weight: 300 !important;
  }

  /* ______________ OTHER ______________ */
  .sandbox_image:hover ~ .tooltip {
    display: inline-block;
    position: absolute;
  }

}

/* ______________ LINE ______________ */
.line_computer,
.line_tablet,
.line_mobile {
  position: absolute;
  /* min-width: 100%; */
  /* max-width: 1100px; */
  z-index: -1;
  /* object-fit: fill; */
}

.line_computer {
  /* min-width: 1750px; */
  /* max-width: 100%; */
  /* max-width: 1250px; */
  /* width: 105vw; */
  transform: scale(1.3);
  left: 0;
  right: 0;
  top: 415px;
  margin-left: auto;
  margin-right: auto;
  /* width: 1285px; */
}

.line_tablet {
  width: 760px;
  left: 29px;
  /* left: 3%; */
}

.line_mobile {
  width: 700px;
  /* transform: scale(1.3); */
  /* max-width: 500px; */
  /* left: 15vw; */
  left: -53px;
  /* margin-left: auto; */
  /* margin-right: auto; */
}

#line_cs1 {
  top: 699.4px;
  left: 3px;
  z-index: 1;
}

#line_cs2 {
  top: 1573.4px;
  left: 380px;
  z-index: 1;
}

#line_cs3 {
  top: 2311.1px;
  right: 713.9px;
  z-index: 1;
}


/* ______________ NAVIGATION MENU (burger) ______________ */
#nav-trigger {
  display: none;
}

.nav-trigger {
  position: absolute;
}

label[for="nav-trigger"] {
  position: fixed;
  /* right: 160px; */
  top: 122px;
  z-index: 200;
  cursor: pointer;
  font-size: 48px;
  font-weight: 100;
  /* padding: 0px 7px; */
  /* border: 1px solid black; */
  opacity: 100%;
  line-height: 0.2;
  animation-name: whitetoblack;
  animation-duration: 0.5s;
}

label[for="nav-trigger"]:hover {
  line-height: 0.25;
  transform: rotate(10deg) translate(0px, -3px);
}

/* .nav-trigger + label, .nav_burger_content {
  transition: right 0.5s;
} */

.nav-trigger:checked+label {
  color: white;
  opacity: 100%;
  animation-name: blacktowhite;
  animation-duration: 0.5s;
}

.nav-trigger:checked~.nav_burger_content {
  /* right: 0; */
  top: 0;
}

.nav_burger_content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 15px;

  margin: 0;
  padding: 130px 10% 0px 10%;
  /* padding: 110px 10% 10px 10%; */

  width: calc(100vw - 10%);
  /* height: 265px; */
  position: fixed;
  /* top: -470px; */
  /* -330+108+120 */

  /* right: -210px; */
  /* -width -padding on each side*/

  z-index: 199;
  text-align: left;
  background: #BA344F;
  color: #FFFFFF;
  transition: all 0.5s ease;
}

.nav_burger_ul {
  /* margin: 0; */
  /* padding-left: 270px; */
  margin: 0;
  padding: 0;
  vertical-align: text-top;
  list-style-type: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 2em;
}

.nav_burger_li {
  /* margin: 10px 0; */
  text-align: left;
  transition: all 0.4s ease;
}

.nav_buttons {
  text-decoration: none;
  /* padding: 5px; */
  color: #FFFFFF;
  transition: all 0.4s;
  font-size: 16px;
}

.nav_burger_li:hover {
  transform: translate(2px, 0px);
  /* color: #D95972; */
  opacity: 75%;
}

.nav_burger_logo {
  margin: 0;
  padding-left: 60px;
  vertical-align: text-top;
  display: inline-block;
  transition: all 0.4s ease;
}

#nav_burger_logo {
  opacity: 100%;
}

#nav_burger_logo_filled {
  position: relative;
  right: 126.3px;
  opacity: 0%;
}

#nav_burger_logo_filled:hover {
  opacity: 100%;
}


/* ______________ FOOTER ______________ */

.social_links {
  display: inline;
  padding: 10px;
  transition: all 0.2s;
  position: relative;
  top: 17px;
}

.social_links_image {
  width: 27px;
}

.button_sparkle_footer {
  margin: -33px;

  width: 35px;
  position: relative;
  /* right: 35px; */
  /* bottom: 9px; */

  right: 16px;
  top: 17px;
  float: right;
  opacity: 0%;
  /* margin-bottom: -30px; */
  transition: opacity ease-out 0.3s;

  z-index: 2;

}

.social_links {
  cursor: pointer;
}

.social_links:hover .button_sparkle_footer {
  opacity: 100%;
}

.social_links:hover .social_links_image {
  opacity: 60%;
}

.social_links:hover #linkedin_icon {
  transform: rotate(5deg);
}

#email_icon_hover {
  display: none;
  position: relative;
  /* right: 20px; */
  bottom: 8px;
  transform: rotate(5deg);
}

.social_links:hover #email_icon {
  display: none;
}

.social_links:hover #email_icon_hover {
  display:inline;
}


/* ______________ ANIMATIONS ______________ */
@keyframes blacktowhite {
  0% {
    color: black;
  }

  100% {
    color: white;
  }
}

@keyframes whitetoblack {
  0% {
    color: white;
  }

  100% {
    color: black;
  }
}

/* ________________________ANIMATIONS________________________ */
.fadeInSection {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.5s ease-out, transform 1s ease-out;
}

fadeInSection.isVisible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* fade in */
.fadeIn {
  animation: fadeIn 0.8s;
  animation-iteration-count: 1;
  /* animation-fill-mode: backwards; */
}

@keyframes fadeIn {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

/* fade out */
.fadeOut {
  animation: fadeOut 1s;
  animation-iteration-count: 1;
}

@keyframes fadeOut {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}

/* fade in and out */
.fadeInOut {
  animation: fadeInOut 2s;
  animation-iteration-count: 1;
}

@keyframes fadeInOut {
  0% {
    opacity: 0%;
  }

  25% {
    opacity: 100%;
  }

  75% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}

/* fade out and in */
.fadeOutIn {
  animation: fadeOutIn 1s;
  animation-iteration-count: 1;
}

@keyframes fadeOutIn {
  0% {
    opacity: 100%;
  }

  /* 25% {
    opacity: 0%;
  }

  75% {
    opacity: 0%;
  } */

  30% {
    opacity: 0%;
  }

  50% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

/* fade in from left */
.fadeInLeft {
  animation: fadeInLeft 1s;
  animation-iteration-count: 1;
  position: relative;
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0%;
  }

  100% {
    transform: translateX(0px);
    opacity: 100%;
  }
}

/* rotate 90deg clockwise */
.rotate90Clockwise {
  animation: rotate90Clockwise 1s;
  animation-iteration-count: 1;
  position: relative;
  animation-fill-mode: forwards;
}

@keyframes rotate90Clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

/* animation delays */
.animdelay100 {
  animation-delay: 100ms;
}

.animdelay200 {
  animation-delay: 200ms;
}

.animdelay300 {
  animation-delay: 300ms;
}

/* ______________ TEXT ______________ */
.italic {
  font-style: italic;
}

/* name in home page (marina au) */
h1 {
  font-family: 'ivyora-text', sans-serif;
  font-size: 48px;
  font-weight: 500;
  font-style: normal;

  margin: 10px 0px 27px 0px;
}

/* case study titles */
h2 {
  font-family: 'ivyora-text', sans-serif;
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  line-height: 3rem;

  margin: 10px 0px 27px 0px;
}

/* case study section title */
h3 {
  font-family: 'ivyora-text', sans-serif;
  font-size: 32px;
  font-weight: 500;
  font-style: normal;
}

/* case study section subtitle */
h4 {
  font-size: 24px;
  font-weight: 500;
  font-style: normal;
}

p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.50em;

  margin: 15px 0px 23px 0px;
}

b {
  font-weight: 600;
}

.largep {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.50em;

  /* margin: 15px 0px 23px 0px; */
  /* margin: 0; */
}

ul {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.50em;

  /* margin: 15px 0px 23px 0px; */
}

/* callout */
.callout {
  font-family: 'ivyora-text', sans-serif;
  font-size: 28px;
  font-weight: 400;
  font-style: normal;
  color: #D42347;
  background-color: #FFF0F3;
  padding: 15px 30px;
  border-radius: 5px;
  margin: 40px;
}

/* small capitalized text */
small {
  font-size: 14px;
  font-weight: 400!important;
  color: #B9314F;
  line-height: 1rem;

  margin: 0;
}

.caption {
  font-size: 16px;
  text-align: center;
  font-style: italic;
  margin: 20px 0px;
}

.cs_details {
  margin: 0;
}

.cs_scrollcaption {
  position: relative;
  bottom: 20px;
}

/* TEXT DECORATIONS */
.italic_pink {
  font-style: italic;
  color: #B9314F;
}

.white {
  color: #FFFFFF;
  font-weight: 300 !important;
}

hr {
  border: 0.5px solid #8a3d4e;
}

/* ______________ BUTTONS ______________ */
.text_button {
  text-decoration: none;
  color: #B9314F;

  margin: 15px 0px;
  transition: opacity 0.4s;
}

.text_button:hover {
  opacity: 50%;
}

/* .text_button:hover .text_button_underline {
  border-bottom: 1px solid #B9314F;
} */

.text_link {
  text-decoration: none;
  color: #B9314F;
  transition: opacity 0.4s;
  border-bottom: 1px solid #B9314F;
}

.arrow {
  position: relative;
  left: 2px;
  bottom: 2px;
  width: 11px;
  transition: all 0.3s;
  text-decoration: none;
}

.text_link:hover {
  opacity: 65%;
}

.text_link:hover+.arrow {
  opacity: 75%;
  transform: translate(2px, -2px);
}

.button_sparkle {
  width: 45px;
  position: relative;
  right: 43px;
  bottom: 7px;
  opacity: 0%;
  transition: opacity ease-out 0.3s;

  /* z-index: 2; */

}

/* ______________ IMAGES & LOGOS ______________ */
.logo_top {
  width: 80px;
  height: auto;
  padding: 10px;
  transition: all 0.2s ease;
}

.logo_top:hover {
  opacity: 0.8;
}

.sparkle {
  width: 30px;
  display: inline-block;
  position: absolute;
  /* right: 43px; */
  /* bottom: 7px; */
  /* opacity: 0%; */
  transition: opacity ease-out 0.3s;

  /* z-index: 2; */

}

.cs_image {
  object-fit: contain;
  width: 100%;
  /* padding: 20px; */
  transition: all 0.4s;
  box-sizing: border-box;
}
.cs_image:hover {
  transform: scale(1.02);
  box-shadow: 0px 0px 15px #d9d9d9;
  cursor: zoom-in;
  /* padding: 100%; */
}

.cs_tools {
  height: 30px;
  margin: 3px;
}

/* ______________ LAYOUT ______________ */
.hcenter {
  text-align: center;
}

.hright {
  text-align: right;
}

.vcenter {
  margin: auto 0;
}

/* image */
.image {
  object-fit: contain;
  /* width: 100%; */
  /* width: 25vw; */
}

/* ______________ PAGES: HOME ______________ */

#myName {
  transition: all 0.3s ease;
}

#myNameTextboxContainer {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
#nameDraggable {
  z-index: 20;
}

.blueTextbox {
  border: 1.5px solid hsl(203, 100%, 45%);
  display: inline;
}

.square {
  width: 20px;
  height: 20px;
  border: 1.5px solid #008EE7;
  box-sizing:border-box;
}

#squareTopLeft {
  background-color: #fffefe;
  position: absolute;
  top: -10px;
  left: -9px;
}

#squareTopRight {
  background-color: #fffefe;
  position: absolute;
  top: -10px;
  right: -9px;
}

#squareBottomLeft {
  background-color: #fffefe;
  position: absolute;
  bottom: -10px;
  left: -9px;
}

#squareBottomRight {
  background-color: #fffefe;
  position: absolute;
  bottom: -10px;
  right: -9px;
}

.nameLine {
  box-sizing: border-box;
}

#nameLineTop {
  width: 1px;
  height: 100vh;
  position: absolute;
  bottom: 100%;
  left: calc(100%/2);
  border-right: 1.5px dashed transparent;

}

#nameLineLeft {
  width: 100vw;
  height: 1px;
  position: absolute;
  right: 100%;
  bottom: calc(100%/2);
  border-bottom: 1.5px dashed transparent;

}

#cursor {
  position: absolute;
  transform: scale(0.23);
  /* max-width: 26px; */
  right: -100px;
  opacity: 0;
}

/* cursor animation */
.cursorAnimation {
  /* border: none; */
  animation: cursor 5.3s ease;
  animation-iteration-count: 1;
}

.underline {
  text-decoration: underline;
  text-decoration-color: #008EE7;
  text-decoration-thickness: 1.5px;
}

.unclickable {
  pointer-events: none;
}

@keyframes cursor {
  0% {
    opacity: 1;
    right: 80vw;
    top: 0px;
  }

  40% {
    opacity: 1;
    right: 100px;
    top: -100px;
  }

  60% {
    opacity: 1;
    right: 30px;
    top: -70px;
  }

  100% {
    opacity: 1;
    right: 80vw;
    top: -150px;
  }
}

@-moz-keyframes cursor {
  0% {
    opacity: 1;
    right: 80vw;
    top: 0px;
  }

  40% {
    opacity: 1;
    right: 100px;
    top: -100px;
  }

  60% {
    opacity: 1;
    right: 30px;
    top: -70px;
  }

  100% {
    opacity: 1;
    right: 80vw;
    top: -150px;
  }
}

@-o-keyframes cursor {
  0% {
    opacity: 1;
    right: 80vw;
    top: 0px;
  }

  40% {
    opacity: 1;
    right: 100px;
    top: -100px;
  }

  60% {
    opacity: 1;
    right: 30px;
    top: -70px;
  }

  100% {
    opacity: 1;
    right: 80vw;
    top: -150px;
  }
}

.displayNone {
  opacity: 0;
}

/* typewriter effect */
.blinkingText {
  border: none;
  animation: blinkingText 1.1s;
  animation-iteration-count: infinite;
}

@keyframes blinkingText {
  0% {
    border-right: 2px solid black;
  }

  49% {
    border-right: 2px solid black;
  }

  50% {
    border-right: 2px solid transparent;
  }

  100% {
    border-right: 2px solid transparent;
  }
}

@-moz-keyframes blinkingText {
  0% {
    border-right: 2px solid black;
  }

  49% {
    border-right: 2px solid black;
  }

  50% {
    border-right: 2px solid transparent;
  }

  100% {
    border-right: 2px solid transparent;
  }
}

@-o-keyframes blinkingText {
  0% {
    border-right: 2px solid black;
  }

  49% {
    border-right: 2px solid black;
  }

  50% {
    border-right: 2px solid transparent;
  }

  100% {
    border-right: 2px solid transparent;
  }
}

#fun_fact, #skill {
  /* text-decoration: underline; */
  cursor: pointer;
  border-bottom: 2px solid black;
}

#cs1_content {
  z-index: 3;
}

#cs1_image, #cs2_image, #cs3_image {
  transition: 0.1s all ease;
}

#cs1_image {
  width: 25vw;
  max-width: 340px;
  transform: rotate(6deg);
}

/* #cs2_image {
  width: 40vw;
  max-width: 560px;
} */

#cs3_image {
  width: 25vw;
  max-width: 310px;
  transform: rotate(-6deg);
}

/* buttons */
.home_cs_button {
  background-color: #FFFFFF;
  color: #B9314F;
  font-size: 16px;
  border: 1.2px solid #B9314F;
  padding: 19px 25px;
  transition: all ease-out 0.3s;
  text-decoration: none;
}

.home_cs_button:hover+.button_sparkle {
  opacity: 100%;
}

.home_cs_button:hover {
  background-color: rgb(255, 93, 126, 0.1);
  cursor: pointer;
}

/* ______________ PAGES: ABOUT ______________ */
#about_imagetop {
  /* width: 25vw; */
  object-fit: contain;
  max-width: 940px;
  transform: rotate(4deg);
  position: absolute;
  top: 345px;
  /* bottom: 30px; */
  right: -230px;
  z-index: -10;
}

/* ______________ PAGES: CS1 ______________ */
#cs1_imagetop {
  /* width: 25vw; */
  max-width: 340px;
  transform: rotate(6deg);
  position: absolute;
  top: 240px;
  /* bottom: 30px; */
  right: 245px;
}

.cs_scrollcontent {
  /* background-color: rebeccapurple; */
  /* background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 166, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 128, 0, 0.2), rgba(0, 0, 255, 0.2), rgba(76, 0, 130, 0.2), rgba(238, 130, 238, 0.2)); */
    /* background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 166, 0, 0.2), rgba(255, 255, 0, 0.2)); */
  background-repeat: no-repeat;
  cursor: zoom-in;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 20px 15px;
}

/* images */
.cs_scrollimages {
  height: 500px;
  transition: all 0.4s;
  margin: 0 9px;
  box-sizing: border-box;
}

.cs_scrollimagesshort {
  height: 300px;
  transition: all 0.4s;
  margin: 0 9px;
  box-sizing: border-box;
}

.prototype {
  border-radius: 28px;
}

.cs_scrollimages:hover, .cs_scrollimagesshort:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 15px #d9d9d9;
    /* padding: 100%; */
}

.cs1_section_title {
  /* margin: 9px; */
  padding: 8px 8px 8px 16px;
  background-color: #FFF0F3;
}

.cs1_section {
  display: inline-block;
}

/* _______ LINE _______ */
#cs1_line, #about_line {
  position: absolute;
  z-index: -1;
  transform: scale(1.3);
  /* left:calc(50vw + 300px); */
  right: 66px;
  top: 200px;
  /* margin-left: auto; */
  /* margin-right: auto; */
}

#cs1_lineover, #about_lineover {
  position: absolute;
  z-index: 1;
  transform: scale(1.3);
  /* left:calc(50vw + 82px); */
  right: 259px;
  top: 507px;
  /* margin-left: auto; */
  /* margin-right: auto; */
}

/* _______ HEADER _______ */
.infogrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 13px;
  /* padding: 95px 160px 95px 160px; */
  margin: 0;
  padding: 0;
  /* text-align: center; */
}

/* ______________ PAGES: CS2 ______________ */
#cs2_imagetop {
  max-width: 950px;
  transform: rotate(2deg);
  position: absolute;
  /* top: 805px; */
  top: 435px;
  right: -197px;
}

/* ______________ PAGES: CS3 ______________ */
#cs3_imagetop {
  /* width: 25vw; */
  max-width: 340px;
  transform: rotate(6deg);
  position: absolute;
  top: 240px;
  /* top: 805px; */
  /* bottom: 30px; */
  right: 245px;
}

.csImagePadding {
  padding: 20px;
}

.csImageSmall {
  height: 500px;
  /* width: auto; */
  /* text-align: center; */
}

.backgroundPink {
  background-color: #a8384b;
}

.previousCS, .nextCS {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.arrowLeft {
  display: inline;
  transform: rotate(-135deg);
  position: relative;
  left: 2px;
  bottom: 2px;
  width: 11px;
  transition: all 0.3s;
  text-decoration: none!important;
}

.previousCS:hover .arrowLeft {
  opacity: 75%;
  transform: rotate(-135deg) translate(2px, -2px);
}

.nextCS {
  float: right;
}

.arrowRight {
  display: inline;
  transform: rotate(45deg);
  position: relative;
  left: 2px;
  bottom: 2px;
  width: 11px;
  transition: all 0.3s;
  text-decoration: none!important;
}

.nextCS:hover .arrowRight {
  opacity: 75%;
  transform: rotate(45deg) translate(2px, -2px);
}


/* ______________ PAGES: SANDBOX ______________ */
.sandbox_image {
  width: 100%;
  /* padding: 20px; */
  transition: all 0.4s;
  box-sizing: border-box;
  border: 0.5px solid #d4aeb6;
  background-color: black;
  opacity: 1;
}

.sandboxProject {
  margin: 20px 0px 30px 0px;
  transition: all 0.4s;
}

.sandbox_image:hover {
  /* transform: scale(1.02); */
  opacity: 0.87;
  box-shadow: 0px 0px 15px #ece9e9;
  border: 0.5px solid #f7cad4;

  /* cursor: zoom-in; */
  /* padding: 100%; */
}

.tooltip {
  display: none;
  padding: 0.8rem 1.2rem;
  background-color: #fcd8e0;
  color: #640c1f;
  position: absolute;
  z-index: 20;
  border-radius: 0.2rem;
  max-width: 400px;
  /* Disable glitch */
  pointer-events: none;
}

.tooltipHeader {
  font-family: 'ivyora-text', sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
}

.tooltipText {
  font-size: 14px;
  line-height: 1.3rem;

}

.sandboxCaption {
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 0;
  padding: 0;
  color: #af848d;
}

.tooltip::after {
  content: " ";
  position: absolute;
  top: 99%; /* At the bottom of the tooltip */
  left: 8px;
  margin-left: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #fcd8e0 transparent transparent transparent;
}


.sandbox_image_popup {
  object-fit: fill;
  width: 80vw;
  box-sizing: border-box;
  margin: 0;
}

.cs_image_popup {
  object-fit: fill;
  max-width: 80vw;
  max-height: 80vh;
  box-sizing: border-box;
  margin: 0;
}

#imagePopUpContainer {
  box-sizing: border-box;
  margin: 0;
  padding: 6vw;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 300;
  /* background-color: rgba(37, 7, 13, 0.8); */
  background-color: #f7e2e7e6;

  display: none;
  text-align: center;
  overflow-y: scroll;
  grid-template-columns: repeat(12, 1fr);
  /* max-width: 1500px; */
  margin: 0 auto;
}

#imagePopUpContainer img {
  cursor: zoom-out;
}

#imagePopUpContainerDescription {
  color: black;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.50em;

  margin: 15px 0px 23px 0px;
}

.youtubeVideo {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

.goodwill {
  margin: 0!important;
  padding: 0!important;
}