html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: black;
    color: white;
}

section {
    height: 100vh;
    scroll-snap-align: start;
}

h1, h2, h3 {
    font-family: "Instrument Serif", serif;
}

.title {
  text-align: center;
  margin-top: 0;
  padding-top: 10px; 
  font-size: 60px;
  font-weight:normal;
  left: 480px;
  top: 20px;
}

.projects {
  font-size: 60px;
  font-weight:normal;
  left: 600px;
  top: 280px;
  font-size:70px;
}

header {
  margin-top: 5px;
  padding-top: 5px;
}

.logo {
    position: fixed;
    top: 30px;
    left: 20px;
    width: 50px;
    height: auto;
    z-index: 1000;
}

.navigation {
    position: fixed;
    top: 30px;
    right: 20px;
    width: 40px;
    height: auto;
    z-index: 1000;
}

.image-container {
  position: fixed;
    bottom: 40px;
    right: 30px;
    width:1000px;
}

.bottom-text {
    position: fixed;
    bottom: 40px;
    right: 40px;
    margin: 0;
    font-size: 30px;
}

.fineprint {
    position: fixed;
    bottom: 10px;
    left: 10px;
    margin: 0;
    font-size: 12px;
}

/* projects page */
.projects-container {
  display: flex;
  justify-content: center; 
  align-items: center;     
  height: 100vh;          
}

.bamboo-projects {
  position: absolute;
  top: 0px;    
  left: 570px;   
  width: 200px;
  opacity: 0.5;
}

.sakura-projects {
  position: absolute;
  bottom: 0px;    
  left: 0px;   
  width: 170px;
  opacity: 0.5;
}

.cave-projects {
  position: absolute;
  top: 215px;    
  right: 0px;   
  width: 190px;
  opacity: 0.5;
}

.dandy-projects {
    position: absolute;
    top: 320px;
    left: 800px;
    width: 200px;
    opacity: 0.5;
    z-index: 1;
}

h1 {
    position: absolute;
    z-index: 2;
}

/*japan projects*/
.japan-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 103px;
  left: 90px;
}

.japanese-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 103px;
  left: 397px;
}

.japan-cap,
.japanese-cap {
    display: inline-block;
    margin: 0 270px; 
    color: white;
     white-space: nowrap;
}

.japanProjects-container {
    position: relative;
}

/* image stays above text */
.japanProjects-container a {
    position: relative;
    z-index: 2;
    display: block;
}

.japan-caption {
    position: absolute;
    top: 0px;
    left: -25%;

    display: flex;
    gap: 20px;

    transform: translateY(0px);
    transition: transform 0.4s ease;

    z-index: 1;
}

.japanProjects-container:hover .japan-caption {
    transform: translateY(-70px);
}

.japan-cap,
.japanese-cap {
    margin: 0;
    color: white;
}
.japanProjects-container {
    position: absolute;
    display: inline-block;
    top: 150px;
    left: 90px;
    width: 350px;
    z-index: 2;
}

.fuji-projects {
  display: block;
  width: 350px;
}

.japan-caption {
    position: absolute;
    top: -60px;          
    left: -25%;
    bottom: 100%; 
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.japan-cap,
.japanese-cap {
    margin: 0;
    color: white;
    transform: translateY(20px); 
    transition: all 0.5s ease-out;
}

.japanProjects-container:hover .japan-cap,
.japanProjects-container:hover .japanese-cap {
    opacity: 1;
    transform: translateY(0);
}

/*australia pojects*/
.ausProjects-container {
    position: relative;
}

/* image stays above text */
.ausProjects-container a {
    position: relative;
    z-index: 2;
    display: block;
}

.aus-cap {
    color: white;
    font-size: 20px;
    font-weight:normal;
    position: absolute;
    top: 0px;
    left: -25%;

    display: flex;

    z-index: 1;
}

.ausProjects-container:hover .aus-cap {
    transform: translateY(-70px);
}

.ausProjects-container {
    position: absolute;
    display: inline-block;
    top: 420px;
    left: 400px;
    z-index: 2;
}

.phillip-projects {
  display: block;
  width: 250px;
}

.aus-cap {
    position: absolute;
    top: -27px;          
    left: -0%;
    bottom: 100%; 
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.aus-cap {
    margin: 0;
    color: white;
    transform: translateY(50px); 
    transition: all 0.5s ease-out;
}

.ausProjects-container:hover .aus-cap {
    opacity: 1;
    transform: translateY(0);
}

/*thailand projects*/
.thailand-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 403px;
  right: 277px;
}

.thai-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 403px;
  right: 5px;
}

.thailand-cap,
.thai-cap {
    display: inline-block;
    margin: 0 270px; 
    color: white;
     white-space: nowrap;
}

.thaiProjects-container {
    position: relative;
}

.thaiProjects-container a {
    position: relative;
    z-index: 2;
    display: block;
}

.thailand-caption {
    position: absolute;
    top: 0px;
    left: -25%;

    display: flex;
    gap: 20px;

    transform: translateY(0px);
    transition: transform 0.4s ease;

    z-index: 1;
}

.thaiProjects-container:hover .thailand-caption {
    transform: translateY(-20px);
}

.thailand-cap,
.thai-cap {
    margin: 0;
    color: white;
}

.thaiProjects-container {
    position: absolute;
    display: inline-block;
    top: 530px;
    right: 0px;
    width: 350px;
    z-index: 2;
}

.phuket-projects {
  display: block;
  width: 350px;
}

.thailand-caption {
    position: absolute;
    top: -410px;          
    right: -0%;
    bottom: 100%; 
    transform: translateX(0%);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.thailand-cap,
.thai-cap {
    margin: 0;
    color: white;
    transform: translateY(20px); 
    transition: all 0.5s ease-out;
}

.thaiProjects-container:hover .thailand-cap,
.thaiProjects-container:hover .thai-cap {
    opacity: 1;
    transform: translateY(0);
}

/*malaysia projects*/
.malaysia-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 13px;
  right: 644px;
}

.malay-cap {
  position: absolute;
  font-size: 20px;
  font-weight:normal;
  top: 13px;
  right: 347px;
}

.malaysia-cap,
.malay-cap {
    display: inline-block;
    margin: 0 270px; 
    color: white;
     white-space: nowrap;
}

.malaysiaProjects-container {
    position: relative;
}

.malaysiaProjects-container a {
    position: relative;
    z-index: 2;
    display: block;
}

.malaysia-caption {
    position: absolute;
    top: 10px;
    left: -25%;

    display: flex;
    gap: 20px;

    transform: translateY(0px);
    transition: transform 0.4s ease;

    z-index: 1;
}

.malaysiaProjects-container:hover .malaysia-caption {
    transform: translateY(-5px);
}

.malaysia-cap,
.malay-cap {
    margin: 0;
    color: white;
}

.malaysiaProjects-container {
    position: absolute;
    display: inline-block;
    top: 15px;
    right: 20px;
    width: 370px;
    z-index: 2;
}

.batu-projects {
  position: absolute;
  top: 40px;    
  right: 160px;   
  width: 370px;
  display: block;
}

.malaysia-caption {
    position: absolute;
    top: 5px;          
    right: -50%;
    bottom: 100%; 
    transform: translateX(0%);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.malaysia-cap,
.malay-cap {
    margin: 0;
    color: white;
    transform: translateY(20px); 
    transition: all 0.5s ease-out;
}

.malaysiaProjects-container:hover .malaysia-cap,
.malaysiaProjects-container:hover .malay-cap {
    opacity: 1;
    transform: translateY(0);
}

/*malaysia*/
.hibiscus-outline {
  position: absolute;
  right: 200px;
  top: 70px;
  width: 1000px;
  opacity: 0.4;
  z-index: 0;
}

/*
.malaysia- {
    position: relative;
    height: 2000px;
}

.gallery-img {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s;
}

.photo1 {
    top: 0px;
    left: 650px;
    width: 200px;
}

.photo2 {
    top: 267px;
    left: 625px;
    width: 250px;
}

.photo3 {
    top: 414px;
    left: 640px;
    width: 210px;
}

.photo4 {
    top: 640px;
    left: 600px;
    width: 300px;
}

.photo5 {
    top: 803px;
    left: 650px;
    width: 200px;
}

.gallery-img {
    position: absolute;
    transition: transform 0.3s ease;
    z-index: 1;
}

.gallery-img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    z-index: 10;
}
*/

/* Lightbox */

#lightbox-img {
    width: 1000px;
    height: 1000px;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
}

#lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10000;
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#close-btn {
    top: 10px;
    right: 40px;
    font-size: 70px;
}

#prev-btn {
    left: 40px;
    bottom: 50px;
     font-size: 20px;
}

#next-btn {
    right: 40px;
    bottom: 50px;
    font-size: 20px;
}

#prev-btn:hover,
#next-btn:hover {
    text-decoration: underline;
}
 
/*
.sematan-text {
  position: absolute;
    top: 100px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.ferringhi-text {
  position: absolute;
    top: 300px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.cave-text {
  position: absolute;
    top: 500px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.temple-text {
  position: absolute;
    top: 700px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.pool-text {
  position: absolute;
    top: 880px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.sematan-date {
  position: absolute;
    top: 100px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.ferringhi-date {
  position: absolute;
    top: 300px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.cave-date {
  position: absolute;
    top: 500px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.temple-date {
  position: absolute;
    top: 700px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.pool-date {
  position: absolute;
    top: 880px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.photo1-container:hover .sematan-text,
.photo1-container:hover .sematan-date {
    opacity: 1.0 !important;
}

.photo2-container:hover .ferringhi-text,
.photo2-container:hover .ferringhi-date {
    opacity: 1.0 !important;
}

.photo3-container:hover .cave-text,
.photo3-container:hover .cave-date {
    opacity: 1.0 !important;
}

.photo4-container:hover .temple-text,
.photo4-container:hover .temple-date {
    opacity: 1.0 !important;
}

.photo5-container:hover .pool-text,
.photo5-container:hover .pool-date {
    opacity: 1.0 !important;
}

.malaysiaArrow {
  position: absolute;
    top: 1020px;
    right: 680px;
    font-size: 50px;
    color: white;
     transition: transform 0.2s ease-in-out;
}

.malaysiaArrow:hover {
  color: #fff;
  text-shadow: 0 0 10px #fff; 
  transform: scale(1.5);
}
*/

.malaysiaTimeline {
    width: 100%;
    overflow: visible;
}

.entry {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
     gap: 3vw;
  margin-bottom: 0px;
  opacity:1;
  z-index: 1;
  width: 90%;
}

.left{
  z-index: 20;
  position: relative;
  text-align:center;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  flex: 0 0 25%;
  word-spacing: 5vw;
}

.number{
    font-size:20px;
    opacity:.5;
    transition:.3s;
     color: white;
}

/* Centre */

.malaysiaPhoto{
  position: relative;
    flex: 0 0 50%;
    width:100%;
    max-width:300px;
    min-width: 0;
    height: auto;
    transition: opacity 0.3s ease;
    display: block;
}

.malaysiaPhoto img {
  width: 100%;
  max-width:300px;
  display: block;
}

/* Right side */

.right{
    z-index: 20;
  position: relative;
  text-align:center;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  flex: 0 0 25%;
  word-spacing: 5vw;
  min-width: 0;
  overflow: hidden;
}

.date{
    font-size:20px;
    opacity:.5;
    transition:.3s;
     color: white;
}

/* Hover */
.entry:has(.malaysiaPhoto:hover) .left {
  opacity: 1 !important;
}

.entry:has(.malaysiaPhoto:hover) .right {
    opacity: 1 !important;
}

.entry:hover .malaysiaPhoto{

    transform:scale(1.02);
}

/*australia*/
.eucalyptus-outline {
  position: absolute;
  right: 150px;
  top: 20px;
  width: 1300px;
  opacity: 0.4;
}


.gallery-img {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s;
}

/* Position each image */
.photo6 {
    top: 0px;
    left: 650px;
    width: 200px;
}

.photo7 {
    top: 267px;
    left: 625px;
    width: 250px;
}

.photo8 {
    top: 444px;
    left: 640px;
    width: 210px;
}

.photo9 {
    top: 724px;
    left: 600px;
    width: 300px;
}

.photo10 {
    top: 899px;
    left: 650px;
    width: 200px;
}

.photo11 {
    top: 1165px;
    left: 590px;
    width: 310px;
}

.photo12 {
    top: 1346px;
    left: 650px;
    width: 200px;
}

.dandenong-text {
  position: absolute;
    top: 100px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.dandenong-date {
  position: absolute;
    top: 100px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phillipBeach-text {
  position: absolute;
    top: 320px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phillipBeach-date {
  position: absolute;
    top: 320px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.tootgarook-text {
  position: absolute;
    top: 540px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.tootgarook-date {
  position: absolute;
    top: 540px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.redHill-text {
  position: absolute;
    top: 770px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.redHill-date {
  position: absolute;
    top: 770px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phillipIsland-text {
  position: absolute;
    top: 1000px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phillipIsland-date {
  position: absolute;
    top: 1000px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.rosebud-text {
  position: absolute;
    top: 1220px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.rosebud-date {
  position: absolute;
    top: 1220px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.spiderweb-text {
  position: absolute;
    top: 1440px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.spiderweb-date {
  position: absolute;
    top: 1440px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.photo6-container:hover .dandenong-text,
.photo6-container:hover .dandenong-date {
    opacity: 1.0 !important;
}

.photo7-container:hover .phillipBeach-text,
.photo7-container:hover .phillipBeach-date {
    opacity: 1.0 !important;
}

.photo8-container:hover .tootgarook-text,
.photo8-container:hover .tootgarook-date {
    opacity: 1.0 !important;
}

.photo9-container:hover .redHill-text,
.photo9-container:hover .redHill-date {
    opacity: 1.0 !important;
}

.photo10-container:hover .phillipIsland-text,
.photo10-container:hover .phillipIsland-date {
    opacity: 1.0 !important;
}

.photo11-container:hover .rosebud-text,
.photo11-container:hover .rosebud-date {
    opacity: 1.0 !important;
}

.photo12-container:hover .spiderweb-text,
.photo12-container:hover .phillipIsland-date {
    opacity: 1.0 !important;
}

.australiaArrow {
  position: absolute;
    top: 1570px;
    right: 680px;
    font-size: 50px;
    color: white;
     transition: transform 0.2s ease-in-out;
}

.australiaArrow:hover {
  color: #fff;
   text-shadow: 0 0 10px #fff; 
  transform: scale(1.5);
}

/*thailand*/
.cassia-outline {
  position: absolute;
  right: 150px;
  top: 20px;
  width: 1080px;
  opacity: 0.4;
}


.gallery-img {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s;
}

/* Position each image */
.photo13 {
    top: 0px;
    left: 600px;
    width: 300px;
}

.photo14 {
    top: 192px;
    left: 645px;
    width: 200px;
}

.photo15 {
    top: 458px;
    left: 595px;
    width: 300px;
}

.photo16 {
    top: 646px;
    left: 645px;
    width: 200px;
}

.photo17 {
    top: 913px;
    left: 600px;
    width: 300px;
}

.thaiWater-text {
  position: absolute;
    top: 70px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.thaiWater-date {
  position: absolute;
    top: 70px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.thaiCafe-text {
  position: absolute;
    top: 300px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.thaiCafe-date {
  position: absolute;
    top: 300px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phuket-text {
  position: absolute;
    top: 510px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.phuket-date {
  position: absolute;
    top: 510px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.waterfall-text {
  position: absolute;
    top: 740px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.waterfall-date {
  position: absolute;
    top: 740px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.watArun-text {
  position: absolute;
    top: 980px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.watArun-date {
  position: absolute;
    top: 980px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.photo13-container:hover .thaiWater-text,
.photo13-container:hover .thaiWater-date {
    opacity: 1.0 !important;
}

.photo14-container:hover .thaiCafe-text,
.photo14-container:hover .thaiCafe-date {
    opacity: 1.0 !important;
}

.photo15-container:hover .phuket-text,
.photo15-container:hover .phuket-date {
    opacity: 1.0 !important;
}

.photo16-container:hover .waterfall-text,
.photo16-container:hover .waterfall-date {
    opacity: 1.0 !important;
}

.photo17-container:hover .watArun-text,
.photo17-container:hover .watArun-date {
    opacity: 1.0 !important;
}

.thailandArrow {
  position: absolute;
    top: 1040px;
    right: 680px;
    font-size: 50px;
    color: white;
     transition: transform 0.2s ease-in-out;
}

.thailandArrow:hover {
  color: #fff;
   text-shadow: 0 0 10px #fff; 
  transform: scale(1.5);
}

/*japan*/
.sakura-outline {
  position: absolute;
  right: 150px;
  top: 20px;
  width: 1080px;
  opacity: 0.4;
}


.gallery-img {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s;
}

/* Position each image */
.photo18 {
    top: 0px;
    left: 600px;
    width: 300px;
}

.photo19 {
    top: 189px;
    left: 647px;
    width: 200px;
}

.photo20 {
    top: 455px;
    left: 595px;
    width: 300px;
}

.photo21 {
    top: 662px;
    left: 645px;
    width: 200px;
}

.photo22 {
    top: 914px;
    left: 600px;
    width: 300px;
}

.fuji-text {
  position: absolute;
    top: 70px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.fuji-date {
  position: absolute;
    top: 70px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.bamboo-text {
  position: absolute;
    top: 300px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.bamboo-date {
  position: absolute;
    top: 300px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.osaka-text {
  position: absolute;
    top: 510px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.osaka-date {
  position: absolute;
    top: 510px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.sakura-text {
  position: absolute;
    top: 740px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.sakura-date {
  position: absolute;
    top: 740px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.trees-text {
  position: absolute;
    top: 980px;
    left: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.trees-date {
  position: absolute;
    top: 980px;
    right: 120px;
    font-size: 20px;
    word-spacing:220px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.photo18-container:hover .fuji-text,
.photo18-container:hover .fuji-date {
    opacity: 1.0 !important;
}

.photo19-container:hover .bamboo-text,
.photo19-container:hover .bamboo-date {
    opacity: 1.0 !important;
}

.photo20-container:hover .osaka-text,
.photo20-container:hover .osaka-date {
    opacity: 1.0 !important;
}

.photo21-container:hover .sakura-text,
.photo21-container:hover .sakura-date {
    opacity: 1.0 !important;
}

.photo22-container:hover .trees-text,
.photo22-container:hover .trees-date {
    opacity: 1.0 !important;
}

.japanArrow {
  position: absolute;
    top: 1050px;
    right: 680px;
    font-size: 50px;
    color: white;
    transition: transform 0.2s ease-in-out
}

.japanArrow:hover {
  color: #fff;
  text-shadow: 0 0 10px #fff; 
  transform: scale(1.5);
}

/*about*/
.aboutBubble-container {
    position: relative;
    width: 500px;
    height: 500px;
    left: 450px;
    top: 120px;
}

.aboutBubble {
    width: 100%;
    display: block;
    z-index: 1;
}

.sector {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.top {
    clip-path: polygon(
        50% 50%,
        20% 0%,
        80% 0%
    );
}

.right {
    clip-path: polygon(
        50% 50%,
        100% 20%,
        100% 80%
    );
}

.bottom {
    clip-path: polygon(
        50% 50%,
        80% 100%,
        20% 100%
    );
}

.left {
    clip-path: polygon(
        50% 50%,
        0% 80%,
        0% 20%
    );
}

.text {
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    position:absolute;
    z-index: 3;

}

.top-text{
    top:-30px;
    left:50%;
     font-size: 30px;
    transform:translateX(-50%);
     font-family: "Instrument Serif", serif;
}

.right-text{
    right:-210px;
    top:50%;
     font-size: 30px;
      font-family: "Instrument Serif", serif;
    transform:translateY(-50%);
}

.bottom-text{
    bottom: -35px;
    left:51%;
    font-size: 30px;
    font-family: "Instrument Serif", serif;
    transform:translateX(-50%);
   white-space: nowrap;
}

.left-text{
    left:-220px;
    top:50%;
     font-size: 30px;
    transform:translateY(-50%);
     font-family: "Instrument Serif", serif;
}

.gif {
   position: absolute;
    width: 200px;
    height: 200px;
    left: -205px;
    top: 150px;
    opacity: 0;
    transition: 0.8s ease-in-out;
}

.top:hover ~ .top-text{
    opacity:1;
}

.right:hover ~ .right-text{
    opacity:1;
}

.bottom:hover ~ .bottom-text{
    opacity:1;
}

.left:hover ~ .left-text {
    opacity:1;
}

.left:hover ~ .gif {
    opacity:0.8;
}

.aboutHeading {
  position: absolute;
  right: 230px;
  top: 770px;
  font-size: 60px;
  font-weight: medium;
}

.aboutText1 {
  position: absolute;
  width: 40%;
  right: 95px;
  top: 900px;
  font-size: 20px;
  font-weight: medium;
}

.aboutText2 {
  position: absolute;
  width: 40%;
  right: 95px;
  top: 1050px;
  font-size: 20px;
  font-weight: medium;
}

.aboutText3 {
  position: absolute;
  width: 40%;
  right: 95px;
  top: 1290px;
  font-size: 20px;
  font-weight: medium;
}

.aboutText4 {
  position: absolute;
  width: 40%;
  right: 95px;
  top: 1450px;
  font-size: 20px;
  font-weight: medium;
}

.me {
   position: absolute;
    width: 280px;
    height: auto;
    left: 200px;
    top: 850px;
}

.instagram {
   position: absolute;
    left: 200px;
    top: 1250px;
    color: white;
    font-weight: medium;
    font-size: 25px;
}

.instagramArrow {
   position: absolute;
    left: 300px;
    top: 1219px;
    color: white;
    font-weight: medium;
    font-size: 30px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.instagram:hover ~ .instagramArrow {
  opacity: 1;
}

.linkedIn {
   position: absolute;
    left: 200px;
    top: 1310px;
    color: white;
    font-weight: medium;
    font-size: 25px;
}


.linkedinArrow {
   position: absolute;
    left: 280px;
    top: 1303px;
    color: white;
    font-weight: medium;
    font-size: 30px;
    opacity: 0;
     transition: transform 0.2s ease;
}