/* Bg gradient effect */
body {
	background: linear-gradient(-45deg, #FF9AA2, #FFB7B2, #B5EAD7, #C7CEEA);
	background-size: 1000%;
	animation: gradient 10s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#page2 {
    display:none;
}
#page3 {
    display:none;
}
#page4 {
    display:none;
}
#page5 {
    display:none;
}

.kotak-title {
    margin: auto;   
    text-align: center;
    width: 146px;
    height: 5px;
    background: #B5EAD7;
    margin-bottom: 2rem;
}

/* HEADER */    
a:link {
    text-decoration: none;
    color: white;
}
a:hover {
    text-decoration: none;
    color: white;
}
.navv {
    background-color: #FFDAC1;
    margin: 10px;
    border-radius: 10px;
    border: 0px solid #ff6e7a;
    height: 5rem;
    justify-content: center;
    align-items: center;
}
.header-nav li, a {
    font-family: 'Lato', cursive;
    font-size: 25px;
    font-weight: 1000;
    color: #ffffff;
    text-decoration: none;
    list-style: none;
}
.header-nav li {
    width: fit-content;
    text-align: center; 
    float: left;
    display: block;
    margin-right: 15px;
    text-decoration: none;
    justify-content: space-evenly;
}
.nav-list {
    float: right;
    display: flex;
}
.logo {
    position: absolute;
    display: inline;
    padding-left: 10px;
    align-items: center;
}
.boxheader li {
    text-align: center;
    vertical-align: middle;
    line-height: 45px; 
    height: 45px;
    width: 200px;
    margin-top: 15px;
    border-radius: 15px;
}
.boxheader li{
    background-color: #FF9AA2;
}
.boxheader :hover {
    background-color: #B5EAD7;
}

/* Body main */
.hbd {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.hbd-title {
    text-align: center;
    /* background-color: #FFDAC1; */
    padding: 1rem;
    margin-left: 30rem;
    margin-right: 30rem;
    border-radius: 10px;
    border: 3px solid #ff6e7a;
}
.hbd-title h1 {
    color: white;
    font-size: 5rem;
}
.hbd-title p {
    color: white;
    font-size: 20px;
    font-style: italic;
    font-family: 'Lato', sans-serif;
}
.upi5 {
    max-height: 450px;
    position:fixed;
    bottom: 0;
    left: 77%;
}

/* Body Ambition */
.amb-title {
    text-align: center;
    padding: 1rem;
    padding-top: 3rem;
    margin-left: 30rem;
    margin-right: 30rem;
    border-radius: 10px;
}
.amb-title h1 {
    color: white;
    font-size: 5rem;
}
.amb {
    text-align: justify;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}
.amb img {
    width: 340px;
    height: 270px;
    margin-bottom: 1rem;
}
.skincare {
    align-items: center;
    width: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px;
}
.veggie {
    align-items: center;
    width: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px;
}
.gender {
    align-items: center;
    width: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px;
}
.amb p {
    margin: auto;
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
}

/* Body Bunga Harapan */
.bunga {
    text-align: justify;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}
.bunga-box {
    padding: 10px ;
    border: 5px solid #c5a6ff ;
}
.bunga-pics img{
    max-height: 280px;
}
.bunga-p {
    margin-top: 4rem;
    margin-left: 25rem;
    margin-right: 25rem;
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
}
.mas1 {
    max-height: 300px;
    position:fixed;
    bottom: 0;
    left: 85%;
}

/* Body Reflect-back */
.refback-boxx {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr ;
    gap: 15px 15px;
    grid-template-areas: ". PIX-1 PIX-2 ." ". PIX-1 NOTES ." ". . . .";
}
.PIX-1 { grid-area: PIX-1; }
.PIX-1 img {
    margin-top: 20px;
    max-height: 700px;
}
.PIX-2 { grid-area: PIX-2; }
.PIX-2 img {
    margin-top: 20px;
    max-width: 400px;
}
.NOTES { grid-area: NOTES; }
.NOTES {
    width: 400px;
    text-align: justify;
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}
.NOTES h3 {
    color: rgb(75, 75, 75);
    font-weight: bold;
}
.p1 {
    color: rgb(75, 75, 75);
    font-size: 25px;
}
.mas5 {
    max-height: 500px;
    position:fixed;
    bottom: 0;
    left: 84%;
}
.mas10 {
    max-height: 500px;
    position:fixed;
    bottom: 0;
    left: -5%;
}

.tracking-in-expand-fwd{-webkit-animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
.tracking-in-contract-bck-bottom{-webkit-animation:tracking-in-contract-bck-bottom 1s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-contract-bck-bottom 1s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-contract-bck-bottom{0%{letter-spacing:1em;-webkit-transform:translateZ(400px) translateY(300px);transform:translateZ(400px) translateY(300px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}@keyframes tracking-in-contract-bck-bottom{0%{letter-spacing:1em;-webkit-transform:translateZ(400px) translateY(300px);transform:translateZ(400px) translateY(300px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}

/*Scrollbar*/
body::-webkit-scrollbar {
    width: 0.5rem;
    }
    body::-webkit-scrollbar-track {
    background: black;
    }
    body::-webkit-scrollbar-thumb {
    background: linear-gradient(to top, #ff677b, #7decff);
    }

/* Footer */
.footerbox {
    position: sticky;
    min-height: 10vh;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; 
    text-align: center;
    align-content: center;
}

/* COLOR CODE */
/* #FF9AA2 more pink
#FF9AA2 pink
#FF9AA2 more pink
#FFB7B2 peach
#FFDAC1 cream
#E2F0CB green
#B5EAD7 tosca
#C7CEEA purple */