/* Manual overrides */
:root.light, :root {
  --text-color: black;
  --bg-color: white;
}

:root.dark {
  --text-color: white;
  --bg-color: rgb(32, 33, 36);
  /* 2. Modern Standard Method (Firefox & modern Chrome/Edge) */
  /* Syntax: scrollbar-color: [Thumb Color] [Track Color]; */
  scrollbar-color: grey var(--bg-color);

}

:root{
    --left-img-width:300px
}


body{
    padding: 40px;

}

pre{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;      /* IE 10 and Edge */
    user-select: none;
}

.nlp-desc, .intro-frame{
    display: flex;
}
.intro-frame{
    justify-content: space-between;
    
}
.photo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right {
    display: flex;
    gap: 10px;
}

.photo-left{
    background-color: black;
    width: calc(var(--left-img-width));
}
.photo-right, .photo-left{
    height: 180px;
    margin-top: 20px;
    overflow: hidden;
}
.photo-right{
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo-left > img{
    height: 180px;
    
}

.top > img, .bottom > img{
    width: 155px;
}
.bottom{
    overflow: hidden;
    position: relative;
}
.bottom > img{
    width: 160px;
    scale: .95;
    transform: translate(-5px,-30px);
    z-index: -1;
}

.photo-right>.top{
    background-color: red;
    height: 85px;
    width: 150px;
    gap: 5px;
}
.photo-right>.bottom{
    background-color: blue;
    height: 85px;
    width: 150px;
    gap: 5px;
}

/* 1. Target the gallery itself to align the images inside it */
.gallery {
  display: flex;
  justify-content: center; /* Centers the images horizontally */
  flex-wrap: wrap;        /* Allows images to wrap to the next line if needed */
  gap: 10px;              /* Adds clean spacing between your photos */
}

/* Optional: Ensure images stay a reasonable size */
.gallery img {
  max-width: 40%;
  height: auto;
}


.projects-container-row{
  display: flex;
  gap: 10px;
}
.projects-container-col{

  border: 2px solid grey;
  border-radius: 20px;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  padding: 10px;
}
.project-img{
    border: 1px solid black;
    height: 100px;
    margin: 20px;
    aspect-ratio: 1/1;
    display: block;
}
/* Large screens */

/* ======================================== Large screens ======================================== */ 
@media screen and (min-width: 2000px) {
    .nlp-desc, .intro-frame { flex-direction:  row; } 
    /* Make the left image larger */ 
    .photo-left { 
        width: calc(var(--left-img-width) * 1.5); 
        height: 270px; 
    } 
    .photo-left > img {
        height: 270px; 
    } /* Make the right column larger */ 
    .photo-right {
        width: 225px;
        height: 270px; 
    } 
    .photo-right > .top, .photo-right > .bottom {
        width: 225px; height: 127.5px; 
    } 
    .top > img {
        width: 232.5px; 
    } 
    .bottom > img { 
        width: 240px;
        scale: 0.95;  
        transform: translate(-7px, -45px); 
    }
    .ascii-art{
        font-size: 20px;
    }

    .projects-container{
        display: flex;
        gap: 10px;

    }

}


/* ========================================
   Small screens (Mobile devices)
   ======================================== */
@media screen and (max-width: 768px) {
    .nlp-desc, .intro-frame{
        flex-direction: column;
    }
    .photo-left{
        display: grid;
        place-items: center;
    }
    .projects-container-row{
      flex-direction: column;
    }

}

@media screen and (max-width: 431px) {
    .nlp-desc, .intro-frame{
        flex-direction: column;
    }
    
    :root{
        --left-img-width:150px
    }

    .photo-left > img{
       
        transform: translateX(-150px);
       
    }
    .ascii-art{
        font-size: 10px;
    }

}