@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

      :root {
        --blue: #38B6FF;
        --chip-image: url("https://lh5.googleusercontent.com/y58mIMZC-IwE41TNehTaXikfD26LtOLULH3BRTAnFxSB33UHwDwf5wVfVvwVwsju1uo=w2400");
        --whiteish-letters: #dafffd;
        --cube-size: 600px;   /* responsive size */
  	    --cube-half: calc(var(--cube-size) / 2);
      }

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-family: 'IBM Plex Mono', sans-serif;
        color: white;
        font-size: 14px;
      }

      body {
        background-color: black;
        width: 100vw;
        height: 100vh;
      }

      /* Layout: menu beside cube on desktop, stacked on mobile */
      main {
        padding: 50px;
        width: 100%;
        height: 100%;
        display: flex;
      /*   flex-direction: column; */
        flex-direction: row;
        align-items: center;
      }

      .menu {
        width: 220px;
      }

      .menu>button {
        width: 120px;
        height: 40px;
        padding-bottom: 5px;
        margin-top: 20px;
        background-color: transparent;
        background-image:url(https://lh6.googleusercontent.com/B3GZqaB4CtIuOZqveBVoBvWZPBZQ7bkkyTEXs9kBCWaop3KXDi5GaHa_zi9Dekl_igc=w2400);
        background-size: contain;
        background-repeat:no-repeat;
        transition: width 0.3s;
        border: none;
      }

      .menu>.btn:hover {
        color:var(--blue);
        background-color: transparent;
        box-shadow: none;
        width: 140px;
      }

      .scene {
        width: 600px;
        height: 600px;
        perspective: 1800px;
      }

      a {
        text-decoration: none;
      }

      .cube {
        width: 100%;
  	height: 100%;
  	position: relative;
  	transform-style: preserve-3d;
  	-webkit-transform-style: preserve-3d;
  	transform: translateZ(calc(var(--cube-half) * -1));
	  transition: transform 1s;
	  will-change: transform;
      }

	.cube.show-front  { transform: translateZ(calc(var(--cube-half) * -1)) rotateY(  0deg); }
	.cube.show-right  { transform: translateZ(calc(var(--cube-half) * -1)) rotateY(-90deg); }
	.cube.show-back   { transform: translateZ(calc(var(--cube-half) * -1)) rotateY(-180deg); }
	.cube.show-left   { transform: translateZ(calc(var(--cube-half) * -1)) rotateY( 90deg); }
	.cube.show-top    { transform: translateZ(calc(var(--cube-half) * -1)) rotateX(-90deg); }
	.cube.show-bottom { transform: translateZ(calc(var(--cube-half) * -1)) rotateX( 90deg); }

      .df.fd-c {
        display: flex;
        flex-direction: column;
      }

      .df.fd-r {
        display: flex;
        flex-direction: row;
      }

       /* Faces use the same size + half-depth */
	.cube-face {
	  position: absolute;
	  width: var(--cube-size);
	  height: var(--cube-size);
	  padding: 40px;
	  display: flex; 
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  background-color: rgba(0,0,0,0.8);
	  background-image: var(--chip-image);
	  background-size: contain;
	  background-repeat: no-repeat;

	}

        .cube-face-front  { transform: rotateY(   0deg) translateZ(var(--cube-half)); 
            
        }
        
      .intro-wrapper {
      /*   display: flex; */
        margin-bottom: 20px;
        align-items: center;
      }

      .image {
        border-radius: 50%;
        overflow: hidden;
        width: 210px;
        height: 170px;
        border: 1px dashed var(--blue);
      /*   display: flex; */
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .image-wrapper {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
      }

      img {
        width: 100%;
        height: 200px;
        object-fit:cover;
      }

      .intro {
        width: 70%;
        margin-left: 20px;
      }

      .intro-heading {
        font-size: 3rem;
        font-family: 'IBM Plex Mono', monospace;
        width: 100%;
        color: var(--whiteish-letters);
        padding-bottom: 20px;
        line-height: 3rem;
      }

      .intro-heading>span {
        font-size: inherit;
        font-family: inherit;
        color: var(--blue);
      }

      .intro-text {
        color: var(--whiteish-letters);
        width: 90%;
        padding: 5px 0;
      }

      .buttons>button {
        color: var(--whiteish-letters);
        border: 2px solid var(--blue);
        background-color: transparent;
        padding: 5px 5px;
        margin: 5px;
        box-shadow: 0 0 10px var(--blue);
        transition: box-shadow 0.3s;
      }

      button:hover {
        cursor: pointer;
        box-shadow: 0 0 15px var(--blue);
        background-color: var(--blue);
      }


	.cube-face-back   { transform: rotateY( 180deg) translateZ(var(--cube-half)); }

      .work-edu-section {
        margin-bottom: 10px;
      }
      .work-edu-heading {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.2rem;
        padding-bottom: 10px;
        font-weight: 400;
      }
      .work-edu-heading>i {
        font-size: 1.0rem;
        color: var(--blue);
      }
      .work-edu-heading.date {
        color: var(--blue);
      }
      .work-edu-info {
        width: 75%;
        margin-left: 10px;
      }
      .work-edu-info>ul {
        margin-left: 20px;
      }
      .work-edu-heading.company {
        width: 100%;
      }

	.cube-face-right  { transform: rotateY(  90deg) translateZ(var(--cube-half)); }
	.cube-face-left   { transform: rotateY( -90deg) translateZ(var(--cube-half)); }
	.cube-face-top    { transform: rotateX(  90deg) translateZ(var(--cube-half)); }
	.cube-face-bottom { transform: rotateX( -90deg) translateZ(var(--cube-half)); }

      .social-media-btns {
        margin-top: 10px;
        margin-bottom: 40px;
      }
      .social-media-btns>i {
        font-size: 2rem;
        margin: 5px 5px;
      }
      .social-media-btns>i:hover {
        cursor: pointer;
        color: var(--blue);
      }

      .year {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 1px;
      }
      .year-border {
        width: 120px;
        height: 120px;
        background-image: url("https://lh5.googleusercontent.com/zgccmEHip1xVXgGhdxVPYB6skDCyHX5LpfqmHHw09nbybd9en_GQdBxOlUlXFSnURks=w2400");
        background-size: contain;
        background-repeat: no-repeat;

        display:flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
      }
      .year-wrapper {
        width: 90px;
        height: 90px;
      }

      .visit-wrapper {
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .year-border:nth-of-type(1)>.year-wrapper {
        background-image: url("https://media.istockphoto.com/id/1277822133/photo/futuristic-scifi-battle-ships-hover-over-an-alien-planet.jpg?s=612x612&w=0&k=20&c=JSZtYp2TtvE19LWxOV1mhgfpvZX6Y-jxlC-KRwYi6cs=");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(2)>.year-wrapper {
        background-image: url("https://www.e-booksdirectory.com/categoryimg/448.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(3)>.year-wrapper {
        background-image: url("https://www.e-booksdirectory.com/categoryimg/448.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(4)>.year-wrapper {
        background-image: url("https://media.istockphoto.com/id/1277822133/photo/futuristic-scifi-battle-ships-hover-over-an-alien-planet.jpg?s=612x612&w=0&k=20&c=JSZtYp2TtvE19LWxOV1mhgfpvZX6Y-jxlC-KRwYi6cs=");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(5)>.year-wrapper {
        background-image: url("https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/c/i/n/cinematography-mass-effectromeda-wallpaper-daf81.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(6)>.year-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(7)>.year-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(8)>.year-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(9)>.year-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .year-border:nth-of-type(10)>.year-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }

      .app-title {
        background-color: rgba(0,0,0,0.7);
        padding: 3px 7px;
        margin-bottom: 5px;
      }

      .visit-app {
        background-color: rgba(0,0,0,0.7);
        padding: 5px 5px;
      }
      .visit-app:hover {
        text-decoration: underline;
      }

      .visit-app,
      .visit-app>i {
        font-size: 0.8rem;
      }

      .visit-app>i {
        color: var(--blue);
      }
      .certificate-section {
        width: 80%;
        justify-content: start;
        align-items: center;
        margin-left: 15px;
        margin-bottom: 10px;
      }

      .cube-face-left > div:nth-last-of-type(2) {
        margin-bottom: 20px;
      }

      .certificate-date {
        font-size: 1.5rem;
        color: var(--blue);
      }
      .certificate-heading {
        font-size: 1.5rem;
        margin-left: 20px;
      }

	/* Mobile stacking */
	@media (max-width: 768px) {
	  main { flex-direction: column; align-items: stretch; }
	  .menu { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
	  .menu > .btn { flex: 1 1 calc(50% - 8px); }
	}


	.cube, .cube-face {
	  transform-style: preserve-3d;
	  -webkit-transform-style: preserve-3d;

	}

	/* Popup overlay */
.popup {
  display: none;                /* Hidden by default */
  position: fixed;
  inset: 0;                     /* top:0, right:0, bottom:0, left:0 */
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Inner popup window */
.popup-content {
  position: relative;
  width: min(90vw, 700px);
  height: min(80vh, 600px);
  background: #050b0c;
  border: 2px solid #00ffd5;
  box-shadow: 0 0 25px rgba(0, 255, 213, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

/* Embedded page */
.popup-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  border: none;
  color: #00ffd5;
  font-size: 1.4rem;
  cursor: pointer;
}