html, body {
    margin: 0;
    padding: 0;
    width: 100%;  
    overflow-x: hidden; 
  }
  
/* Header starts here */

.Navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1vw;
    height: 30px;
    box-sizing: border-box;
    }

#Navbar-left {
    display: flex;
    justify-content: flex-start;
}

#Navbar-right {
    display: flex;
    gap: 12px;
}

#Navbar-home, #Navbar-photos, #Navbar-blogs, #Navbar-diary {
    color: rgb(181, 181, 181);
    font-size: 1.3rem;
    font-family: 'Suisseintl Webxl', Arial, sans-serif; 
    cursor: pointer;
    transition: color 0.2s;
    padding: 8px 10px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: -0.08rem;
}

.links {
    text-decoration: none;
    color: rgb(181, 181, 181);
}


#Navbar-photos:hover, #Navbar-blogs:hover, #Navbar-diary:hover {
    text-decoration: underline;
    color: #ff5555;
}

@media (max-width: 768px) {
    .Navbar {
        height: 30px;
        padding: 0 1vw;
    }
    #Navbar-home, #Navbar-photos, #Navbar-blogs, #Navbar-diary {
        font-size: 1.3rem;
        padding: 6px 8px;
    }
    #Navbar-right {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .Navbar {
        height: auto;
        padding: 6px 3vw;
    }
    #Navbar-left {
        justify-content: flex-start;
    }
    #Navbar-right {
        justify-content: space-between;
        gap: 2px;
        margin-top: 4px;
    }
    #Navbar-home, #Navbar-photos, #Navbar-blogs, #Navbar-diary {
        font-size: 0.7rem;
        padding: 3px 5px;
    }
}


/* Header Ends here */

/* Background 1 starts here */

.bg1{
    position : absolute;
    z-index : -1;
    top : 0;
    left : 0;
    height : 100vh;
    width : 100vw;
    box-sizing: border-box;
    display : flex;
    flex-direction: column;
    align-items : start;
    justify-content: start;
    font-family:  'Suisseintl Webxl', Arial, sans-serif;
    margin-top : 20vh;
    padding : 5vh;
    filter: blur(2px);
}

.bg1-big {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.3rem;
    color : rgb(202, 202, 202);
}

.bg1-tilt-left {
    color : rgb(202, 202, 202);
    transform-origin: bottom right;
    transform : rotate(-90deg);
    width : fit-content;
    height : fit-content;
    font-weight : 600;
}
#bg1-tilt-1 {
    font-size : 0.5rem;
}
#bg1-tilt-2 {
    font-size : 0.6rem;
}

.bg1-quotes {
    height : 5vh;
    display: flex;
}

.bg1-tilt-right {
    color : rgb(202, 202, 202);
    transform-origin: bottom left;
    transform : rotate(90deg);
    width : fit-content;
    height : fit-content;
    font-weight : 600;
}
#bg1-straight {
    color : rgb(202, 202, 202);
    font-size : 0.5rem;
}
#bg1-tilt-3 {
    font-size : 0.5rem;

}
.bg1-inside-flex {
    display : flex;
    width : fit-content;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding-left : 1vh;
}

#bg1-tilt-4 {
    font-size : 0.5rem;
   
}

#bg1-tilt-5 {
    font-size : 0.4rem;
}


/* Mobile and below */
@media (max-width: 600px) {
    .bg1 {
        margin-top: 30vh;
        padding: 2vh;
        filter: blur(1.3px);
    }
    .bg1-big {
        font-size: 1.2rem;
        letter-spacing: -0.08rem;
    }
    .bg1-tilt-left,
    .bg1-tilt-right {
        font-size: 0.3rem !important;
    }
    .bg1-quotes {
        height: 3vh;
    }
    .bg1-insidie-flex {
        padding-left: 0;
    }
    #bg1-tilt-1,
    #bg1-tilt-2,
    #bg1-tilt-3,
    #bg1-tilt-4,
    #bg1-tilt-5{
        font-size: 0.3rem;
    }
    #bg1-straight {
        font-size : 0.2rem;
    }
}

/* Background 1 ends here */

/* Foreground container starts here */
.fg-container {
    position : relative;
    top : 0;
    left : 0;
    height : 100vh;
    width : 100vw;
}

/* Foreground container ends here */

/* Foreground 1 starts here */

.fg1 {
    position : relative;
    background-color: transparent;
    z-index : 1;
    top : 10vh;
    text-align: center;
    width: fit-content;
    left : 44vw;
}

.quote-1 {
    font-family: 'Suisseintl Webxl', Arial, sans-serif; 
    font-size : 0.6rem;
    color : #ff0000;
    font-weight: 600;
}

@media(max-width: 600px) {
    .fg1 {
        top : 10vh;
        left : 44vw;
    }
    .quote-1 {
        font-size: 0.3rem;
    }
}


/* Foreground 1 ends here */

/* Foreground 2 starts here */
.fg2 {
    position : relative;
    background-color: transparent;
    z-index: 1;
    top : 18vh;
    left : 10vh;
    width : fit-content;
    height: fit-content;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    color : #ff0000e4;
    --span-size-large : 4.4rem;
    --span-size-small : 2.2rem;
    --span-weight : 600;
    --span-size-medium : 3.3rem;
    --span-spacing : -0.3rem;
    --span-size-smaller : 1.5rem;
    --span-spacing-small : -0.2rem;
}

.grid-container {
    display: grid;
    width : fit-content;
    height : auto;
    grid-template-columns: repeat(25,auto);
    grid-template-rows : repeat(5,auto);
    column-gap : 0vh;
}


.grid-container>span {
    display: block;
    box-sizing : border-box;
    margin : 0;
    padding : 0;
    width : fit-content;
    height: fit-content;
    text-align :left;
    
}

#fg2-1 {
    font-size : var(--span-size-small);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 1 / 1 / span 1 / span 1;
    text-align: center;
}
#fg2-3 {
    font-size : var(--span-size-large);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 1 / 2 / span 1 / span 5;
    position : relative;
    top : 2vh;
    left : -2vh;
}
#fg2-4 {
    font-size : var(--span-size-medium);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 2 / 1 / span 1 / span 1;

}
#fg2-5 {
    font-size : var(--span-size-medium);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 2 / 2 / span 1 / span 1;
    
}
#fg2-6 {
    font-size : var(--span-size-medium);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 2 / 3/ span 1 / span 4;

}
#fg2-7 {
    font-size : var(--span-size-small);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing-small);
    grid-area : 3 / 1 / span 1 / span 2;
}
#fg2-9 {
    font-size : var(--span-size-large);
    font-weight : var(--span-weight);
    letter-spacing: var(--span-spacing);
    grid-area : 3 / 3 / span 1 / span 7;
}

#fg2-12 {
    font-size : 5rem;
    font-weight : var(--span-weight);
    letter-spacing: -0.8rem;
    grid-area : 4 / 1 / span 2 / span 9;
    position : relative;
    top : -2vh;
}


.grid-container span {
    opacity: 0; 
    transition: opacity 0.5s ease;
  }
  
  .grid-container span.visible {
    opacity: 1;
  }

/* Mobile-first adjustments */
@media (max-width: 600px) {
    .fg2 {
        top: 28vh;
        left: 5vw;
        --span-size-large: 2.5rem;
        --span-size-medium: 1.8rem;
        --span-size-small: 1.2rem;
        --span-spacing: -0.15rem;
        --span-spacing-small: -0.1rem;
    }

    .grid-container {
        grid-template-columns: repeat(15, auto); /* Reduced columns */
        grid-template-rows: repeat(7, auto); /* More rows for vertical stacking */
    }

    /* Grid item adjustments */
    #fg2-1 {
        font-size: var(--span-size-small);
        grid-area: 1 / 1 / span 1 / span 1;
    }
    #fg2-3 {
        font-size: var(--span-size-large);
        grid-area: 1 / 2 / span 1 / span 5;
        position : relative;
        top : 1vh;
    }
    #fg2-4 {
        grid-area: 2 / 1 / span 1 / span 1;
        
    }
    #fg2-5 {
        grid-area: 2 / 2 / span 1 / span 1;
        position: relative;
        left : -1vh;
    }
    #fg2-6 {
        grid-area: 2 / 3 / span 1 / span 2;
        position: relative;
        left : -1vh;
    }
    #fg2-7 {
        grid-area: 3 / 1 / span 1 / span 2;
    }
    #fg2-9 {
        font-size: var(--span-size-medium);
        grid-area: 3 / 3 / span 1 / span 6;
    }
    #fg2-12 {
        font-size: 3rem;
        letter-spacing: -0.4rem;
        grid-area: 4 / 1 / span 2 / span 8;
        position: relative;
        top : -1vh;
    }
}

/* Extra small devices (portrait phones) */
@media (max-width: 400px) {
    .grid-container{
        column-gap : 0vh;
    }
    .fg2 {
        top: 28vh;
        left: 3vw;
        --span-size-large: 1.8rem;
        --span-size-medium: 1.4rem;
    }
    #fg2-1 {
        text-align: center;
    }
    #fg2-3 {
       position : relative;
       top : 1.5vh;
       left : -1.5vh;
        
    }
    #fg2-4 {
        grid-area: 2 / 1 / span 1 / span 1;
    }
    #fg2-5 {
        grid-area: 2 / 2 / span 1 / span 1;
        position : relative;
        left : -3vw;
    }
    #fg2-6 {
        grid-area: 2 / 3 / span 1 / span 2;
        position : relative;
        left : -3vw;
    }
    #fg2-9 {
        font-size : var(--span-size-large);
        position : relative;
        top : 0.5vh;
    }
    #fg2-12 {
        font-size: 2.2rem;
        letter-spacing: -0.3rem;
        position: relative;
        top : 0vh;
    }
}


/* Foreground 2 ends here */

/* Foreground 3 starts here */

.fg3 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
    background: transparent;
    z-index: 2;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    color: #ff0000e0;
    font-weight: 700;
    letter-spacing: -2.8rem;
    font-size : 21rem;
}

@media (max-width :1024px) {
    .fg3 {
        font-size: 15rem;
        letter-spacing: -1.9rem;
    }
}
@media (max-width :780px) {
    .fg3 {
        bottom : 5vh;
        font-size: 11rem;
        letter-spacing: -1.4rem;
    }
}

@media(max-width: 450px) {
    .fg3 {
        bottom : 8vh;
        font-size: 4.9rem;
        letter-spacing: -0.5rem;
    }
}


/* Foreground 3 ends here */

/* Foreground 4 starts here */

.fg4 {
    position : absolute;
    top : -40vh;
    left : 30vw;
    background-color: transparent;
    z-index : 2;
    color : #ff0000e0;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size : 20vw;
    font-weight: 700;
    height: 5vh;
    width: fit-content;
}

@media (max-width: 480px) {
    .fg4 {
        font-size: 20vw;
        top : -20vh;
    }
}

/* Foreground 4 ends here */

/* Foreground 5 starts here */

.fg5 {
    position : absolute;
    top : -10vh;
    left : 50vw;
    background-color: transparent;
    z-index : 2;
    color : #ff0000e0;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size : 8vw;
    font-weight: 700;
    height: 5vh;
    width: fit-content;
}

@media (max-width: 480px) {
    .fg4 {
        font-size: 15vw;
        top : 0vh;
    }
}

/* Foreground 5 ends here */

/* Foreground 6 starts here */

.fg6 {
    position: absolute;
    top: 12vh;
    right: 8vw;
    background-color: transparent;
    color: #ff0000e0;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size: 1.2vw;
    font-weight: 700;
    letter-spacing: -0.1vw;
    width: fit-content;
    margin: 0;
    padding: 0;
    line-height: 0.8;

}

/* 
Foreground 6 ends here */

/* Foreground 7 starts here */
.fg7 {
    position : absolute;
    bottom : 30vh;
    right : 10vw;
    background-color: transparent;
    color: #ff0000e0;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size: 1.3vw;
    font-weight: 700;
    letter-spacing: -0.1vw;
    width: fit-content;
    margin: 0;
    padding: 0;
    line-height: 0.8;


}

/* Foreground 7 ends here */

/* Face starts here */
.face {
    position: relative;
    width: 100%;
    height: 100vh;        
    display: flex;
    align-items: center;   
    justify-content: center; 
    background: transparent; 
    z-index: 1;            
  }
  
  .face canvas {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    z-index: 0;
  }

 .face-text2, .face-text3 , .face-text4, .face-text5 {
    position : absolute;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    color: #ff000083;
}
.face-text2 {
    font-size: clamp(1.1rem, 2.5vw, 2.2rem);
    top: 22vh;
    left: 5vw;
    z-index: 2;
    font-weight : 600;
    letter-spacing: -0.1vw;
}
.face-text3 {
    font-size: 1vw;
    top: 24vh;
    right: 5vw;
    z-index: 2;
    font-weight : 600;
}

.face-text4 {
    font-size: 0.4vw;
    bottom: 5vh;
    left: 5vw;
    z-index: 2;
    font-weight : 600;
}
.face-text4 a {
    text-decoration: none;
    color : #ff000083;
}
.face-text5 {
    font-size: 0.8vw;
    top: 40vh;
    right: 20vw;
    z-index: 2;
    font-weight : 600;
}

/* Face ends here */

/* after face starts here */
.after-face-quote {
    font-size : 2vw;
    width : 100%;
    text-align: right;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    color: #ff0000cf;
    font-weight: 600;
    letter-spacing: -0.1vw;
    padding-right: 4vw;
  }
  
  /* after face ends here */

  /* intro starts here */
  .intro-black {
    color : gray;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.1rem, -0.1vw - 0.05rem, -0.05rem); 
    filter: blur(2px); 
  }
.intro {
    background-color: transparent;
    color : #ff0000e0;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.1rem, -0.1vw - 0.05rem, -0.05rem);  
   margin-left : 5vw;
    margin-top : 5vh;
    box-sizing: border-box;
}
  /* intro ends here */

  /* footer starts here  */

  footer {
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top : 10vh;
    margin-bottom : 5vh;
    height: fit-content;
    background-color: transparent;
    font-family: 'Suisseintl Webxl', Arial, sans-serif;
    display: flex;
    justify-content : space-between
  }

  .footer-left {
    padding-left : 5vw;
  }

  .footer-left1 {
        display: flex;
        font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.1rem, -0.1vw - 0.05rem, -0.05rem);
  }
  #footer-black {
     color : gray;
     filter: blur(1px);
  }
  #footer-red {
    color : #ff0000e0;
  }

  .footer-left-red2 {
    color : #ff0000e0;
    font-size: clamp(1rem, 1.2vw + 0.3rem, 1.5rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.07rem, -0.07vw - 0.02rem, -0.03rem);
  } 

  .footer-right {
    padding-right : 5vw;
  }

  .footer-right-1 {
    padding-top : 0;
    display: flex;
    flex-direction: column;
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.1rem, -0.1vw - 0.05rem, -0.05rem);
  }

  #footer-right-1-1 {
    display : flex;
    gap : 5px;
    height : fit-content;
    margin-top : -33px;
  }

  .footer-links {
    margin-top : -2vh;
    
  }
  .link {
    color: rgb(181, 181, 181);
    font-family: 'Suisseintl Webxl', Arial, sans-serif; 
    cursor: pointer;
    transition: color 0.2s;
    font-size: clamp(1rem, 1.2vw + 0.3rem, 1.5rem); 
    font-weight: 700;
    letter-spacing: clamp(-0.07rem, -0.07vw - 0.02rem, -0.03rem);
    padding-right : 10px;
  }

    .link:hover {
        text-decoration: underline;
        color: #ff5555;
    }


    @media(max-width:600px) {

        footer {
            display : flex;
            flex-direction: column;
        }
        .footer-right {
            margin-left : 6vw;
            text-align: right;
        }
        .footer-left {
            display: none;
        }
        #footer-right-1-1 {
            display : flex;

            justify-content: right;
        }
    }

  /* footer ends here   */