@import url(https://fonts.googleapis.com/css2?family=Bungee&display=swap);
:root { --highlight: #ED5565; }

body {
  background: #333;
  font-family: 'Bungee', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  perspective: 2000px;
  overflow: hidden;
}

.profile-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-bottom: 20px;
  object-fit: cover;
}

.bk-book {
  width: 400px;
  height: 550px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}

.bk-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: left;
  cursor: pointer;
}

.page-front, .page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  padding: 30px;
  /* translateZ(0) helps prevent flickering during 3D transforms */
  transform: translateZ(0); 
}

/* 1. Reset standard pages to light grey */
.page-front, 
.page-back { 
    background: #efefef; 
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.1); 
}

/* 2. Force the Cover Style to be dark (Increased specificity) */
.bk-book .bk-cover-style { 
    background: #241F20 !important; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

/* 3. Keep the inside cover separate */
.bk-book .inside-cover-style { 
    background: #dcdcdc; 
}

.page-back { transform: rotateY(180deg) translateZ(0); }

/* Flipped State */
.bk-page.flipped { transform: rotateY(-180deg); }

/* Book opens by shifting right */
.book-opened { transform: translateX(50%); }

.bk-cover-style { 
    background: #241F20; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

.inside-cover-style { background: #dcdcdc; }

.page-front, .page-back:not(.bk-cover-style) { 
    background: #efefef; 
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.1); 
}

.bk-title {
  text-align: left;
  padding: 0 10px;
}

.bk-title h2.highlight {
  font-size: 1.2rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.bk-title h1 {
  font-size: 2.8rem;
  line-height: 0.9;
  margin: 0 0 15px 0;
}

.bk-title .author {
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0.8;
  padding-top: 10px;
  display: inline-block;
}

.highlight { color: var(--highlight); }

.page-content p { 
    font-family: Georgia, serif;
    color: #333; 
    line-height: 1.6; 
    font-size: 0.95rem;
    text-align: justify;
    hyphens: auto;
}

.bk-left { 
    width: 30px; 
    left: -15px; 
    position: absolute; 
    height: 100%; 
    background: #1a1a1a; 
    transform: rotateY(-90deg); 
}

.color-grid { display: flex; width: 100%; height: 30px; position: absolute; top: 0; left: 0; }
.color-square { flex: 1; cursor: pointer; }
.bg-ED5565 { background: #ED5565; } .bg-DA4453 { background: #DA4453; }
.bg-FC6E51 { background: #FC6E51; } .bg-E9573F { background: #E9573F; }
.bg-FFCE54 { background: #FFCE54; }
/* Container to align items side-by-side */
.project-meta {
    display: flex;
    align-items: center; /* Vertically centers the list next to the image */
    gap: 20px;           /* Space between the image and the text */
    margin-top: 15px;
}

/* Make the project image smaller so it fits with the list */
.profile-img-small {
    width: 150px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Adjust the list styling */
.learning-list h2 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.learning-list ul {
    margin: 0;
    padding-left: 20px; /* Gives room for bullet points */
    font-size: 0.85rem;
}
.project-date {
    font-family: Georgia, serif;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Mobile View: Stack pages vertically */
@media (max-width: 768px) {
  body {
    height: auto;
    overflow-y: auto; /* Allow scrolling */
    display: block;
    padding: 20px 10px;
  }

  .portfolio {
    perspective: none;
    width: 100%;
  }

  .bk-book {
    width: 100%;
    height: auto;
    transform: none !important; /* Disable the shift-right animation */
  }

  .bk-page {
    position: relative; /* Stack them in order */
    width: 100%;
    height: auto;
    transform: none !important; /* Disable flip */
    margin-bottom: 20px;
    cursor: default;
  }

  .page-front, 
  .page-back {
    position: relative; /* Stack front and back on top of each other */
    width: 100%;
    height: auto;
    backface-visibility: visible;
    transform: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    min-height: 300px;
  }

  /* Separate the front and back of the "sheets" visually */
  .page-back {
    margin-top: -1px; /* Join them slightly */
    border-top: 1px dashed #ccc;
  }

  /* Hide the book spine on mobile */
  .bk-left {
    display: none;
  }

  /* Ensure images fit nicely */
  .profile-img, .profile-img-small {
    max-width: 100%;
    height: auto;
  }

  /* Fix the color grid positioning */
  .color-grid {
    position: relative;
    margin-bottom: 10px;
  }
}