/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@400;500;600;700&family=Josefin+Sans:wght@600&display=swap&family=Lobster&display=swapfamily=Lobster&family=Pacifico&display=swap');


*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Resize in mobile View */

@media (min-width: 0) and (max-width: 767px) {
    p, .body-text {
    font-size: 10px !important;
    }
}
  /* Resize in Tablet View */

@media (min-width: 768px) and (max-width: 991px) {
    p, .body-text {
    font-size: 15px !important;
    }
}

/* Intro */

.introParent {
    height: 100vh;
    background: url("../../assets/ld.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;

}

.boxText {
 background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  z-index: 2;
  width: 60%;
  padding: 40px;
  text-align: center;
  font-size: 44px;
   
}

.scrollParent {
    position: absolute;
    bottom: 0px;
    text-align: center;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    z-index: 2;
    width: 40%;
    padding: 30px;
    font-size: 32px;
    
}

.downParent {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}



blockquote{
    color: #69ede6;
}
blockquote:hover{
    color: #b9f392;
    cursor: default;
}

#down_arr {
    /* z-index: 99; */
    /* width: 25px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: #000;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0.8; */
   width: 40px;
   background-color: #5db96f;
   height: 40px;
   border-radius: 50%;
   background-color: rgb(255, 255, 255);
   text-decoration: none;


}

#down_arr:hover {
    background-color: rgba(160, 160, 160, 0.8);
    color: #000;
}
/*


/* parallax 1 */
/* scene 1 */

.cherry_blossom {
    width: 100%;
    height: 100vh;
    background: url("../../assets/pexels-bagus-pangestu-1440476.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.cherry_blossom h2 {
    color: #f00;
    font-size: 100px;
    font-family: 'Dancing Script', cursive;
    text-align: center;
    padding-top: 30px;
}
.cherry_blossom p {
    font-size: 90px;
    text-align: right;
    padding-right: 10vw;
}

.cherry_blossom {
    transition: 10ms;
}

p {
    color: #00f;
    font-size: 69px;
    font-family: 'Allura', cursive;
}

.m {
    
    display: table;
    height: 30vh;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.5);
}
.m p {
display: table-cell;
vertical-align: middle;
/* padding-top: 20vh; */
padding-left: 2%;
text-align: center;
/* letter-spacing: 0.45em; */
}

.sep{
    display: table;
    height: 70vh;
    width: 100vw;
    background-color: transparent;
}

/* .rm {
    text-align: right;
    padding-top: 12vh;
    padding-right: 10%;
}

.mm {
    padding-top: 30vh;
    padding-left: 10%;
} */

.autumn {
    width: 100%;
    height: 100vh;
    background: url("../../assets/Autumn_leaves_Osaka_castle.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.chameleons {
    width: 100%;
    height: 100vh;
    background: url("../../assets/cham_fall.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.hibernation {
    width: 100%;
    height: 100vh;
    background: url("../../assets/cham_snow.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.sunset {
    width: 100%;
    height: 100vh;
    background: url("../../assets/sunset.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.sunset_f {
    width: 100%;
    height: 100vh;
    background: url("../../assets/sunset_birds.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.squ {
    width: 100%;
    height: 100vh;
    background: url("../../assets/sunset_squ.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.night {
    width: 100%;
    height: 100vh;
    background: url("../../assets/sunset_nit.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.windy {
    width: 100%;
    height: 100vh;
    background: url("../../assets/wind1.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.storm {
    width: 100%;
    height: 100vh;
    background: url("../../assets/storm.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.waterfall {
    width: 100%;
    height: 100vh;
    background: url("../../assets/waterfall_1_0000_Layer-1.png");
    background-size: 100% 100%;
    background-attachment: scroll;
}

.waterpit {
    width: 100%;
    height: 100vh;
    background: url("../../assets/waterfall_1_0001_Layer-0.png");
    background-size: 100% 100%;
    /* background-attachment: fixed; */
}


#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background-color: rgb(255, 255, 255);
    color: #000;
    cursor: pointer;
    border: 0;
    border-radius: 32px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0.8;
}

#back-to-top:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
}

#back-to-top.show {
    opacity: 1;
}


footer {
    /* position: relative; */
    bottom: 0;
    width: 100%;
    height: 4vh;  
    padding-left: 30px;
    padding-right: 30px;
    background: #5db96f;
    font-family: Pacifico;
    font-size: 20px;
    color: #4223bb;
    display: flex;
    /* justify-content: center; */
    justify-content: space-around;
    
}

.soc-icn {
    height: 30px;
    width: 30px;
    cursor: pointer;
    background-color: #818a91;
    border-radius: 50%;
    margin-left: 10px;
    position: relative;
    transition: 0.3s;
    justify-content: right;
}
.soc-icn svg{
    height: 25px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    fill: #4223bb;
}
a svg:hover{
    background-color: #e25555;
    border-radius: 50%;
    transition: scale(1.3);
}


.heart{ color:#e25555; }