@font-face {
  font-family: "ny-bold-italic";
  src: url("NewYorkLarge-BoldItalic.otf") format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: "ny-med";
  src: url("NewYorkExtraLarge-Medium.otf") format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: "sf-sb";
  src: url("SF-Pro-Display-Semibold.otf") format("woff2");
  font-weight: bold;
}
#dbsvg{
  width: 55px;
  height: auto;
}
body{
    cursor: url("macCursor.svg"), auto;
    color: #3b3b3b;
    font-family: "inter";
    margin: 0;
    padding-top: 32px;
    padding-left: 64px;
    padding-right: 64px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.headerLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;      
}
.svg-container {
  cursor: url("macPointer.svg"), auto;
  width: 55px;
  height: auto;  
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
a{
  cursor: url("macPointer.svg"), auto;
}

@keyframes draw {
    0% {
      stroke-dasharray: 0, 1000;
    }
    50% {
      stroke-dasharray: 1000, 0;
    }
    100% {
        stroke-dasharray: 0, 1000;
    }
  }  

  #path1{
    -webkit-animation: 12s ease-in-out infinite;
    animation: draw 12s ease-in-out infinite;

  }

@keyframes drawText {
  to {
      stroke-dashoffset: 0; 
  }
}
@keyframes fade-slide{
  0%{
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0px);
  }
}
.cls-1 {
    fill: none;
    stroke: #3B3B3B;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
.bigText {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  text-wrap: balance;
  font-weight: 500;
  font-size: 42px;
  transition: opacity 0.5s ease,height 0.5s ease;
  line-height: 1.1;
  opacity: 1;
  background: linear-gradient(to top, #3b3b3bb5, #3b3b3b); /* Grey to black gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  -webkit-text-fill-color: transparent; /* Safari support to make text transparent */ 
}

.bigText.fade-out {
  opacity: 0;
}
.bigText.fade-slide-in {
  animation: fade-slide 0.5s ease; 
}
.focus{
  margin-top: 48px;
  padding-bottom: 4px;
  border-bottom: dashed 0.5px #CECECE;
  font-weight: 400;
  font-size: 12px;
}
@keyframes dynamite {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes dynamite2 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(10px);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
.grid-container {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; 
  filter: blur(0px);
}
.projectName{
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 32px;
}
.grid-item {
  padding: 20px; 
  overflow-x: hidden;
  overflow-y: auto; 
  object-fit: cover;
  animation: dynamite 24s ease infinite;
}
#grid-item2 {
  animation: dynamite2 24s ease infinite;
}
.grid-item img{
  object-fit: contain;
  width: 100%;
  border-radius: 8px;
}
.squircle {
  z-index: 9999 !important;
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    padding-bottom: 18px;
    width: 380px;
    margin-bottom: 16px;          
    height: 70px;  
    background-image: url("squircleblur_2.svg");
    background-size: 105%;
    background-position: center;
    border-radius: 30px;
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 10px 0px #00000061;
}
.squircle::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(202, 202, 202, 0.6), rgba(255, 255, 255, 0.374), rgba(255, 255, 255, 1));
    border-radius: 32px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.7; 
    backdrop-filter: blur(3px);
}
/* Magnification effect */
.squircle2{
  z-index: 9999 !important;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px;
  width: 380px;
  margin-bottom: 68px;          
  height: fit-content;
  border-radius: 35px / 30px; 
  font-weight: 600; 
}
.appName{
  display: flex;
  justify-content: center;
  align-items: center;
}
.squircle img{
    width: 70px;
}
div .squircle{
    position: fixed; 
    bottom: 0px;
}

div .squircle2{
  position: fixed; 
  bottom: 42px;
}
.Nav{
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 12px;
    z-index: 9999 !important;
}
.homeHover{
  opacity: 0;
  text-align: center;
  width: 70px;
  padding: 8px;
  font-weight: 500;
  font-size: 12px;
  background-color: #cecece6b;
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px #00000061;
}
.contactHover{
  opacity: 0;
  text-align: center;
  width: 70px;
  padding: 8px;
  font-weight: 500;
  font-size: 12px;
  background-color:#cecece80;
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px #00000061;
}
.aboutHover{
  opacity: 0;
  text-align: center;
  width: 70px;
  padding: 8px;
  font-weight: 500;
  font-size: 12px;
  background-color:#cecece80;
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px #00000061;
}
.experimentHover{
  opacity: 0;
  text-align: center;
  width: 70px;
  padding: 8px;
  font-weight: 500;
  font-size: 12px;
  background-color:#cecece80;
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px #00000061;
}
.explore{
  clear: both;
  cursor: url("macPointer.svg"), auto;
  color: transparent;
  text-align: center;
  margin-bottom: 142px;
  font-family: "ny-med";
  font-weight: 600;
  font-size: 48px;
  background: linear-gradient(to top, #3b3b3bb5, #3b3b3b); /* Grey to black gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  -webkit-text-fill-color: transparent; /* Safari support to make text transparent */
}
.dorCraftsContainer {
  display: flex;
  justify-content: flex-end; /* Aligns the child to the left */
  width: 95vw;
  padding: 16px;
}
.dorCrafts{
  margin-left: 0;
  font-size: 10px;
  font-weight: 400;
  color: #616161;
  text-align: center;
  text-transform: capitalize;
}
.kingContainer{
  width: 87px;
  height: auto;

}
.blurOverlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; 
  pointer-events: none;
}
.closeOverlay{
  cursor: url("macPointer.svg"), auto;
  opacity: 0;
  position: -webkit-sticky;
  position: fixed;
  top: 40px;
  right: 40px;
  width: 30px;
  height: 30px;
  padding: 14px;
  border-radius: 100px;
  background-color:#cecece80;
  backdrop-filter: blur(8px);
  box-shadow: 0px 0px 10px 0px #00000061;
  display: flex;
  z-index: 20; 
}
/*about page css*/
.center-container {
  margin-top: 0px;
  position: relative;
  width: fit-content;
  height: 500px; 
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; 
}
.card {
  position: absolute;
  width: 216px;
  height: 384px;
  border-radius: 25px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}
#card1 {
  background-image: url("edited/db bnw 2 .jpg");
  z-index: 4;
  transform: rotate(-5deg) translateX(-30px);
}

#card2 {
  background-image: url("edited/db bnw.jpg");
  z-index: 3;
  transform: rotate(0deg) translateX(-10px);
}

#card3 {
  background-image: url("edited/db bnw 3.jpg");
  z-index: 2;
  transform: rotate(5deg) translateX(10px);
}
#card4 {
  background-image: url("edited/db bnw 4.jpg");
  z-index: 1;
  transform: rotate(10deg) translateX(30px);
}
.dorseyText {
  text-align: center;
  line-height: 1.2;
  clear: both;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 128px;
  font-weight: 600;
  background: linear-gradient(to top, #3b3b3bb5, #3b3b3b); /* Grey to black gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  -webkit-text-fill-color: transparent; /* Safari support to make text transparent */ 
  }
.centreContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}
.resetDrag{
  width: fit-content;
  height: fit-content;
  font-weight: 600;
  background-color: #cecece80;
  padding: 5px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url("macPointer.svg"), auto;
}
.aboutPara{
  clear: both;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width:772px;

  text-wrap: balance;
}
.subHead{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 600;
  background: linear-gradient(to top, #3b3b3bb5, #3b3b3b); /* Grey to black gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  -webkit-text-fill-color: transparent; /* Safari support to make text transparent */ 
  border-bottom: dashed 0.5px #CECECE;
  margin-bottom: 12px;
}
.designIcon{
  height: 38px;
  width: auto;
}
.skillList{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  flex-direction: column;
  gap: 12px;
  font-size: 24px;
  font-weight: 600;
  color: #3b3b3bb5;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.webDevImg{
  width: 56px;
  height: auto;
}
.gridVancouver{
  margin-top: 48px;
  display: grid;                     
  grid-template-columns: 1fr 1fr;   
  gap: 24px; 
  width: 772px;
  height: 500px; 
  justify-items: start;       
  align-items: center;
}
.vanPhotos{
  margin-top: 0px;
  position: relative;
  width: fit-content;
  height: 500px; 
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; 
}
.eduPhotos{
  margin-top: 0px;
  position: relative;
  width: fit-content;
  height: 500px; 
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; 
}
.Vancard {
  position: absolute;
  width: 240px;
  height: 426px;
  border-radius: 25px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}
.Educard {
  position: absolute;
  width: 240px;
  height: 426px;
  border-radius: 25px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}
.vanBigText{
  clear: both;
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(to top, #3b3b3bb5, #3b3b3b); /* Grey to black gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  -webkit-text-fill-color: transparent; /* Safari support to make text transparent */ 
}
.aboutVancouver{
  clear: both;
  position: static;
  text-align: left;
  width: 372px;
  padding: 8px;
  text-wrap: balance;
}
#Vancard1 {
  background-image: url("edited/van1.jpg");
  z-index: 4;
  transform: rotate(-5deg) translateX(-30px);
}

#Vancard2 {
  background-image: url("edited/van2.jpg");
  z-index: 3;
  transform: rotate(0deg) translateX(-10px);
}

#Vancard3 {
  background-image: url("edited/van3.jpg");
  z-index: 2;
  transform: rotate(5deg) translateX(10px);
}
#Vancard4 {
  background-image: url("edited/van\ 4.jpg");
  z-index: 1;
  transform: rotate(10deg) translateX(30px);
}
#Educard1 {
  background-image: url("edited/comp2.jpg");
  z-index: 2;
  transform: rotate(-5deg) translateX(0px);
}
#Educard2 {
  background-image: url("edited/comp1.jpg");
  z-index: 1;
  transform: rotate(0deg) translateX(20px);
}

/*contact page css*/
.bookContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 148px;
  margin-bottom: 148px;
}
.flipbook {
  border-radius: 60px;
  width: 600px;
  height: 300px;
  
}

.flipbook .hard {
  border-radius: 60px;
  background: #d3b98d !important;
  color: #fff;
  font-weight: bold;
  border: none; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flipbook .hard small{
  border-radius: 30px;
  font-style: italic;
  font-weight: lighter;
  opacity: 0.7;
  font-size: 14px;
}

.flipbook .page {
    border-radius: 30px;
  border-radius: 30px;
  background: rgb(168, 168, 168);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.11);
}

.flipbook .page small{
  border-radius: 30px;
font-size: 14px;
  margin-bottom: 10px;
}
/*Contact book*/
.containerContactBook{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: fit-content;
  width: fit-content;
  background-color: #00000061;
  background-repeat: none;
}
#contact1{
  width: 100px;
  height: 100px;
  z-index: 3;
  background-image: url("front_flip.svg");
  background-position: center;
  background-size: contain;
  background-repeat: none;
}
#contact2{
  width: 200px;
  height: auto;
  z-index: 2;
  background-image: url("Card.svg");
  background-position: center;
  background-repeat: none;
}
#contact3{
  z-index: 1;
  background-image: url("base-flip.svg");
  background-position: center;
  background-repeat: none;
}
@media (max-width: 768px) {
  body{
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 24px;
  }
  .Nav{
    scale: 0.8;
    z-index: 99999 !important;
  }
  .bigText{
    font-size: 32px;
  }
  .dorseyText{
    font-size: 42px;
  }
  .gridVancouver{
    grid-template-columns: 1fr;      
    width: 100%;                     
    height: auto;
    align-items: center;
    justify-items: center;

  }
  .card{
    width: 194px;
    height: 345px;
  }
  .Vancard{
    width: 194px;
    height: 345px;
  }
  .Educard{
    width: 194px;
    height: 345px;
  }
  .center-container{
    height: 400px; 
    width: 80%;
  }
  .vanPhotos{
    height: 300px;
    width: 80%;
  }
  .eduPhotos{
    height: 300px;
    width: 80%;
  }
  .aboutVancouver{
    width: 80%;
  }
  .gridVancouver{
    margin-top: 124px;
  }
  #about{
    margin-top: 100px;
  }
}