/* Media queries */

/* Define CSS variables if not already defined */
:root {
  --button-size: 50px;      /* Size of the circular buttons */
  --icon-size: 24px;        /* Size of the icons */
}



body.touchscreen .sidebar {
    /* remove for phone */
    display: none;
    width: 0;
  }

body.touchscreen #start{
    background-color: (--start-bg-color);
    background-image: none;
}

body.touchscreen #projects{

  padding: 0 1rem 0 1rem;
}
  body.touchscreen .section {
    width: 100vw;
    min-height: 0vh;
    padding: 1rem;
  }

  

  




  body.touchscreen .EndorsementButton {
    width: 99%;
  }
  

  
  body.touchscreen #start.section {
    padding: 0rem;
  }
  
  body.touchscreen .content {
    margin-left: 0;
  }
  
  body.touchscreen .grid {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
    
  
  }

  body.touchscreen .grid h3{
    font-size: 1.5rem;
  }
  body.touchscreen .grid p{
    font-size: 1rem;
  }
  
  body.touchscreen .single-image {
    width: 95vw;
  }


  
  
  canvas {
    will-change: transform;
    transform: translateZ(0);
}
    

  body.touchscreen .Subtitle {
  
    margin-top: 0;
    
  }

  body.touchscreen .download-button {
  
    margin-top: 0;
    /* top: calc(12vh + 7rem+ 110rem); */
  }


  body.touchscreen .Title {
    font-size: max(2.2rem, 6vw);
    display: flex;
    align-items: center; /* Vertically centers */
    justify-content: center; /* Horizontally centers */
    height: 26vh; /* Adjust height to control positioning */
}

  

    body.touchscreen .Subtitle {
      
        font-size: 1rem;
    }
    
    



/* Styles specific to touchscreen devices */




/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  body.touchscreen .LinkItem {
    flex-direction: row; /* Keep row direction for better readability */
    align-items: center;
  }

  body.touchscreen .LinkItem span {
    margin-left: 15px;
    margin-top: 0;
  }
}

    

    


    /* cards */
    







  


body.touchscreen .cards-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* Adjust gap as needed */
}

body.touchscreen .cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  overflow-x: hidden; /* Prevent overflow in landscape */
}


/* Remove grid-specific properties and allow cards to take full width */
body.touchscreen .card {
  width: 100%; /* Full width on mobile */
  /* max-width: 95dvw; */
  perspective: 1000px; /* Ensure perspective for flip */
  margin: 0 auto; /* Center the card */
}

/* Remove fixed height and allow dynamic height based on content */
body.touchscreen .card-inner {
  height: auto; /* Allow height to adjust based on content */
  padding-top: 0; /* Remove aspect ratio padding */
  transition: transform 0.6s; /* Ensure transition remains smooth */
  transform-style: preserve-3d;
}

/* Adjust expanded state if necessary */
body.touchscreen .card.expanded .card-inner {
  min-height: 0; /* Optional: Adjust if you want expanded cards to have a minimum height */
}

/* Change positioning to relative and allow height to adjust based on content */
body.touchscreen .card-front,
body.touchscreen .card-back {
  position: relative; /* Remove absolute positioning */
  height: auto; 
  backface-visibility: hidden;
  padding: 1rem; /* Adjust padding for mobile readability */
  box-sizing: border-box;
}

body.touchscreen .multi-card-row .card-inner {
  height: 10rem !important; /* Set fixed height for consistent row height */
  
}

body.touchscreen .multi-card-row .card-front,
body.touchscreen .multi-card-row .card-back {
  height: 100% !important;
  
}

body.touchscreen #endorsements {
  margin-top: 5rem;
}


/* Hide the back of the card by default on mobile */
body.touchscreen .card-back {
  display: none; /* Hide back initially */
  transform: rotateY(180deg);
  background-color: var(--card-back-color); /* Ensure back has appropriate background */
}

/* Show back when the card is flipped */
body.touchscreen .card.flipped .card-back {
  display: block; /* Show back when flipped */
  
}

body.touchscreen .card.flipped .card-front {
  display: none; /* Hide front when flipped */
}



/* project button starts */


body.touchscreen .project-button-container {
  /* centre the buttons */
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}


/* project button ends */

/* wallpaper start */

body.touchscreen #start::before {
  /* calculate minimum between 50vw and 50vh - set as width and height */
  width: min(70vw, 70vh);
  
  height: min(70vw, 70vh);
  /* the top distance equals: (vh - sqr_side_length)/2 */
  top: calc((100vh - min(70vw, 70vh))/2);
  /* same with left right */
  left: calc((100vw - min(70vw, 70vh))/2);
}

/* wallpaper end */

body.touchscreen .arrow-down {

  
  bottom: calc(15%); /* Adjust as needed */

}