@font-face {
    font-family: Hooey; 
    src: url("https://cdn.jsdelivr.net/gh/katetriestocode/personalwebsite@main/Fonts/Hooey%20Y2k%20Font-2/WOFF/Hooey-Regular.woff2") format('woff2'), 
        url("https://cdn.jsdelivr.net/gh/katetriestocode/personalwebsite@main/Fonts/Hooey%20Y2k%20Font-2/WOFF/Hooey-Regular.woff") format('woff');
}
@font-face {
  font-family: Archivo; 
  src: url("https://cdn.jsdelivr.net/gh/katetriestocode/personalwebsite@main/Fonts/archivo/WEB/fonts/Archivo-Light.woff2") format('woff2'), 
        url("https://cdn.jsdelivr.net/gh/katetriestocode/personalwebsite@main/Fonts/archivo/WEB/fonts/Archivo-Light.woff") format('woff');
}

body {
    background-image: url("https://github.com/katetriestocode/personalwebsite/blob/main/assets/JA%20Jayagiri%20Sans.png?raw=true");
    background-size: 40vw;
    background-repeat: repeat;
    text-align: center;
    font-family: Hooey;
    color: white;
    position: relative; 
    min-height: 100vh;
    padding-top: 0vw; 
    background-attachment: fixed; 
    margin: 0;
    overflow-x: hidden;
}

.top-tab {
    position: relative; 
    top: 0;
    left: 0;
    background: white;
    width: 100%;
    z-index: 1000;
    height: 60px; 
}
.wave-bottom {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none; 
}


.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; 
    padding: 0.7vw 6vw;
}

.left-links, .right-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    font-family: Archivo;
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s;
}

.nav-icon img {
    width: 30px;
    height: 30px;
}

.nav-icon:hover {
    transform: scale(1.05);
    color: #ff00ff;
}


.scroll-container {
    margin-top: 10vw; 
    position: relative;
    z-index: 1;
}

.corner-left {
    left: 2vw;        
    position: absolute; 
    top: 0vw; 
    width: 18vw;        
    z-index: 500;
}

.corner-right {
    right: 2vw;       
    position: absolute; 
    top: 0vw; 
    width: 18vw;        
    z-index: 500;
}



h1 {
    font-size: 12vw;
    padding-top: 0vw;
    font-family: Hooey;
}

.corner-left {
    left: 2vw;         /* Distance from the left */
    position: absolute; /* Pins them to the page */
    top: -4vw;          /* Distance from the top */
    width: 18vw;        
}

.corner-right {
    right: 2vw;        /* Distance from the right */
    position: absolute; /* Pins them to the page */
    top: -4vw;          /* Distance from the top */
    width: 18vw;        
}

.split-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5vw; /* Space between image and text */
    max-width: 90vw; /* Keeps it from getting too wide on big screens */
    margin: 2vw auto 10vw auto; /* Added 10vw to the bottom margin here */
    padding: 0 8vw;
    text-align: left; /* Overrides the body's center alignment for this section */
}

.split-text {
    flex: 1; /* Makes the text take up the remaining space */
}


.selfie {
    width: 25vw;
    transform: rotate(-10deg);
    height: auto;
    pointer-events: none;
}

h2 {
    font-size: 8vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    line-height: 0%;
    font-family: Hooey;
    word-spacing: -1.5vw;
    margin-top: 0;
    margin-bottom: 4vw;
}

p1 {
    font-size: 2.5vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    line-height: 3vw;
    font-family: Archivo;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    width: 90%;
}

h3 {
    font-size: 1;
    padding-top: 0vw;
    padding-bottom: 0vw;
    font-family: Archivo;
    margin-top: 0;
    margin-bottom: 0;
    color: black;
}


.split-section2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw; /* Space between image and text */
    max-width: 90vw; /* Keeps it from getting too wide on big screens */
    margin: 2vw auto 10vw auto; /* Added 10vw to the bottom margin here */
    padding: 0 8vw;
    text-align: left; /* Overrides the body's center alignment for this section */
}

.split-text2 {
    flex: 1; /* Makes the text take up the remaining space */
}

.image-scatter {
    position: relative;
    width: 60vw; /* Total width of the "messy pile" */
    height: 40vw; /* Total height of the "messy pile" */
    display: flex;
    justify-content: center;
    align-items: center;
}

.scatter-photo {
    position: absolute;
    width: 15vw; /* Size of individual polaroids */
    height: auto;
    background: white; /* Optional: adds a polaroid border feel */
    padding: 5px 5px 30px 5px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.scatter-photo:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 100 !important;
}

.scatter-photo:nth-child(1) { top: 5vw; left: -3vw; transform: rotate(-10deg); z-index: 1; }
.scatter-photo:nth-child(2) { top: 5vw; left: 24vw; transform: rotate(8deg); z-index: 2; }
.scatter-photo:nth-child(3) { top: 15vw; left: 2vw; transform: rotate(5deg); z-index: 3; }
.scatter-photo:nth-child(4) { top: 10vw; left: 47vw; transform: rotate(10deg); z-index: 3; }
.scatter-photo:nth-child(5) { top: 20vw; left: 15vw; transform: rotate(-8deg); z-index: 5; }
.scatter-photo:nth-child(6) { top: 2vw; left: 10vw; transform: rotate(5deg); z-index: 0; }
.scatter-photo:nth-child(7) { top: 18vw; left: 30vw; transform: rotate(15deg); z-index: 2; }
.scatter-photo:nth-child(8) { top: 2vw; left: 40vw; transform: rotate(-12deg); z-index: 1; }


.split-section3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0vw; /* Space between image and text */
}
.dinoatwork {
    position: center;
    width: 18vw;        
}

p2 {
    font-size: 2.5vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    line-height: 3vw;
    font-family: Archivo;
    margin-top: 0;
    margin-bottom: 0;
}

.split-section4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw; 
    max-width: 90vw; 
    margin: 2vw auto 2vw auto;
    padding: 0 8vw;
    text-align: left; 
}

.split-text4 {
    flex: 1; /* Makes the text take up the remaining space */
}

.image-scatter {
    position: relative;
    width: 60vw; 
    height: 40vw; 
    display: flex;
    justify-content: center;
    align-items: center;
}


.image-scatter2 {
    position: relative;
    width: 60vw; 
    height: 40vw; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.scatter-photo2 {
    position: absolute;
    height: auto;
    background: white; /* Optional: adds a polaroid border feel */
    padding: 5px 5px 10px 5px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.scatter-photo2:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 100 !important;
}

.scatter-photo2:nth-of-type(1) { top: 0vw; left: 0vw; transform: rotate(-10deg); z-index: 1; width: 25vw;}
.scatter-photo2:nth-of-type(2) { top: 8vw; left: 15vw; transform: rotate(8deg); z-index: 3; width: 17vw;}
.scatter-photo2:nth-of-type(3) { top: 0vw; left: 25vw; transform: rotate(5deg); z-index: 1; width: 25vw; }
.scatter-photo2:nth-of-type(4) { top: 10vw; left: 32vw; transform: rotate(-5deg); z-index: 2; width: 25vw; }


.image-scatter3 {
    position: relative;
    width: 60vw; 
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scatter-photo3 {
    position: absolute;
    height: auto;
    background: white;
    padding: 5px 5px 5px 5px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.scatter-photo3:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 100 !important;
}


.scatter-photo3:nth-of-type(1) { top: 5vw; left: 0vw; transform: rotate(-10deg); z-index: 0; width: 35vw;}
.scatter-photo3:nth-of-type(2) { top: 15vw; left: 40vw; transform: rotate(-8deg); z-index: 2; width: 13vw;}
.scatter-photo3:nth-of-type(3) { top: 18vw; left: 20vw; transform: rotate(5deg); z-index: 3; width: 15vw;}
.scatter-photo3:nth-of-type(4) { top: 2vw; left: 35vw; transform: rotate(5deg); z-index: 1; width: 15vw;}





.modal {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px);
}

/* The box in the middle */
.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 1.5vw;
    border-radius: 2vw;
    width: 50%;
    max-width: 40vw;
    color: black;
    font-family: Archivo;
    position: relative;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}


p2 {
    font-size: 2.5vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    line-height: 3vw;
    font-family: Archivo;
    margin-top: 0;
    margin-bottom: 0;
}


.click-me-hint {
    position: absolute;
    top: -2.5vw; 
    left: 5vw;
    transform: rotate(-10deg); 
    z-index: 20; /* Make sure it's above the image */
    pointer-events: none; 
    color: white;
    text-shadow: 1px 1px 0px rgb(255, 150, 250);
}

p3 {
    font-size: 3vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    line-height: 3vw;
    font-family: Archivo;
    margin-top: 0;
    margin-bottom: 0;
}