body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end;   /*Anchor to the bottom of the screen*/
    background-image: url("assets/bg.png");
    background-size: cover;
    image-rendering: pixelated;
    font-family: "VT323", monospace;
}

/*Loading screen*/
#loader {
  position: fixed;
  inset: 0;
  background-color: #e4c1c6;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.treats {
  display: flex;
  gap: 1vw;
  justify-content: center;
}

.treat {
  width: 6vw;
  image-rendering: pixelated;
  opacity: 0.3;
  animation: flash 1.2s infinite;
}

.treat:nth-child(1) { animation-delay: 0s; }
.treat:nth-child(2) { animation-delay: 0.2s; }
.treat:nth-child(3) { animation-delay: 0.4s; }

@keyframes flash {
  0% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0.7; transform: translateY(0); }
}

.loading-text {
    color: #756262;
    font-family: 'VT323', monospace;
    font-size: 3vw;
    font-weight: 800;
}

.dots::after {
  content: "";
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}

/*Top Bar*/
.top-bar {
    position: fixed;        
    top: 0;
    left: 0;
    width: 100%;
    padding: 1vw 2vw;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    box-sizing: border-box;
    z-index: 1000; /*On top of everything*/
    pointer-events: auto;
}

#music-toggle {
    width: 5vw;
    min-width: 24px; 
    cursor: pointer;
}

.social-icons {
    display: flex;
    gap: 1.2vw;
}

.social-icons img {
    width: 5vw;
    min-width: 20px;
    cursor: pointer;
    animation: bounce 0.6s ease infinite;
}

/*Main scene*/
.scene {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: end;         
    justify-items: center;  
    gap: 0;                    
    position: relative;
}

/*Avatar image-scaling and animation*/
.avatar-img {
    --base-x: -3vw;
    grid-column: 1;
    grid-row: 2;
    width: 15vw;
    align-self: end; 
    animation: move 1.5s ease-in-out infinite;
}

@keyframes move {
    0%, 100% {
        transform: translateX(calc(var(--base-x) - 0.6vw));
    }
    50% {
        transform: translateX(calc(var(--base-x) + 0.6vw));
    }
}

/*Right column (bakery and text images)*/
.right-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    gap: 0.5vw;                 
    grid-column: 2;
    grid-row: 1 / span 2;        
}

#bakery-outside {
    width: 35vw;
    transform: translateX(-5vw); 
}
#bakery-outside:hover {
    cursor: pointer;
}

.text-box-container {
    position: relative; 
    width: 35vw;       
}

.text-box-img {
    width: 100%; 
    display: block;
    align-self: flex-end; 
    transform: translateX(-3vw);
}

#scene-text {
    position: absolute;
    top: 10%;
    left: 3%;
    color: #756262;
    font-family: 'VT323', monospace;
    font-size: 2vw;
    font-weight: 800;
    text-align: left;
    white-space: pre-wrap; 
    pointer-events: none;
}

/*Sidebar*/
.sidebar {
    position: absolute;
    right: 20vw;                  
    bottom: calc(20vw + 5vw);     
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.sidebar p {
    margin: 0;
    line-height: 1;
    font-size: 2vw; 
    font-weight: 800;
    font-family: "VT323", system-ui;
    color: #756262;
}

/*Bounce animation for each letter*/
.bounce-text span {
    display: inline-block;
    animation: bounce 0.6s ease infinite;
}

.bounce-text span:nth-child(1) { animation-delay: 0s; }
.bounce-text span:nth-child(2) { animation-delay: 0.1s; }
.bounce-text span:nth-child(3) { animation-delay: 0.2s; }
.bounce-text span:nth-child(4) { animation-delay: 0.3s; }
.bounce-text span:nth-child(5) { animation-delay: 0.4s; }
.bounce-text span:nth-child(6) { animation-delay: 0.5s; }
.bounce-text span:nth-child(7) { animation-delay: 0.6s; }
.bounce-text span:nth-child(8) { animation-delay: 0.7s; }
.bounce-text span:nth-child(9) { animation-delay: 0.8s; }
.bounce-text span:nth-child(10){ animation-delay: 0.9s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

#menu-side { color: #a095b9; }
#menu-side:hover { color: #b8848c; }

.sidebar p:hover {
    cursor: pointer;
    transform: scale(1.1);
    color: #b8848c;
}

/*Mouse sparkle and background star animations*/
#stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; 
}

.star {
    position: absolute;
    width: 10px; 
    height: 10px; 
    background: #fff1dc;
    image-rendering: pixelated; 
    opacity: 0;
    animation: twinkle 1.5s infinite;
    z-index: 0;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

#sparkle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.sparkle {
    position: absolute;
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.sparkle div {
    position: absolute;
    width: 5px;
    height: 5px;
    background:#fff1dc;
    image-rendering: pixelated;
}

/*Menu page*/
#big-menu {
    display: none; /*Starts off hidden*/
    position: absolute;  
    left: 35vw;
    bottom: 21vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    pointer-events: auto;
}

#b-menu {
    width: 35vw; 
    height: auto;
    image-rendering: pixelated;
}

.menu-grid {
    position: absolute;     
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 90%;              
    height: 70%;
    top: 16%;
    gap: 5%;                
    pointer-events: auto;
    z-index: 2;             
}

.menu-icon {
    width: 60%;          
    height: auto;
    cursor: pointer;
    justify-self: center; 
    align-self: center;   
}

/*Pages*/
.hidden {
    display: none !important;
}

#edu-page, #exp-page, #proj-page, #abt-page {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    pointer-events: none;
}

.page-content {
    pointer-events: auto;
    position: absolute;
    width: 30vw;
    height: 70vh;
    overflow-y: auto;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%); 
    padding: 0 2vw;
    background: rgba(255,255,255,0.05);
    color: #756262;
    font-size: 1.5vw;
    line-height: 1.5;
    border-radius: 4px;
    z-index: 3001;
}

#page-bg {
    width: 58vw;
    height: auto;
    image-rendering: pixelated;
    pointer-events: none;
}

.page-content::-webkit-scrollbar {
    width: 0.5vw;
}

.page-content::-webkit-scrollbar-thumb {
    background-color: #b8848c;
    fill-opacity: 80%;
}

.page-content::-webkit-scrollbar-track {
    background: #cda3aa;
}

hr {           
    border: none;
    width: 10vw;
    height: 0.2vw;              
    background-color: #756262; 
    margin: 30px 0;           
}

/*Skills tags*/
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.skill-tag {
    background-color: #f3e8e0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 1.2vw;
    white-space: nowrap;
}

a {
    color: #b8848c;
}

/* Block mobile & small screens */
@media (max-width: 992px) {
  body {
    display: none;
  }

  html::before {
    content: "Mobile version in progress (╥﹏╥). Please view on desktop!";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: "VT323", monospace;
    font-size: 2rem;
    text-align: center;
    padding: 2rem;
    background: #b8848c;
    color: #f3e8e0;
  }
}