:root {
--cream: #fdf6ee;
--gold: #c9a84c;
--gold-light: #e8d5a3;
--gold-pale: #f5ecd7;
--pink: #f2e8e8;
--lavender: #e8e4f0;
--rose: #c9878a;
--text-dark: #2a2118;
--text-mid: #6b5c4e;
--text-light: #a89580;
--white: #ffffff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Kh SN Kampongsom Regular', sans-serif;
background: var(--cream);
color: var(--text-dark);
overflow-x: hidden;
}

/* ─── FLORAL DECORATIONS ─── */
.floral {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.18;
}

/* ─── SECTION COMMON ─── */
section {
position: relative;
overflow: hidden;
}

/* ─── MUSIC CONTROL (for YouTube) ─── */
#music-btn {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--gold);
border: none;
cursor: pointer;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(201,168,76,0.4);
transition: transform 0.3s, box-shadow 0.3s;
}

#music-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(201,168,76,0.5);
}

#music-btn svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* ─── SCROLL INDICATOR ─── */
#scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: linear-gradient(to right, var(--gold), var(--rose));
z-index: 9999;
width: 0%;
transition: width 0.1s;
}

/* ─── OPENING COVER ─── */
#cover {
height: 100dvh;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
text-align: center;
background-image: linear-gradient(rgba(33, 150, 243, 0.3), rgb(157 0 247 / 74%)), url(../images/DSC_0479.jpg);
background-size: cover;
background-position: 40% 20%;
position: relative;
overflow: hidden;
padding-bottom: 50px;
}

/* Animated petals */
.petal {
position: absolute;
width: 8px;
height: 12px;
border-radius: 50% 0 50% 0;
opacity: 0;
animation: petalFall linear infinite;
pointer-events: none;
}

@keyframes petalFall {
0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
}

10% {
    opacity: 0.6;
}

90% {
    opacity: 0.3;
}

100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
}
}

/* Cover bokeh */
.bokeh {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,168,76,0.3) 0%, transparent 70%);
animation: bokehFloat ease-in-out infinite;
pointer-events: none;
}

@keyframes bokehFloat {
0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
}

50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.5;
}
}

.cover-ornament {
width: 180px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
margin: 16px auto;
opacity: 0;
transform: scaleX(0);
}

.cover-tag {
font-family: 'Playfair Display', serif;
font-size: 25px;
letter-spacing: 4px;
text-transform: uppercase;
color: #fff;
opacity: 0;
transform: translateY(10px);
}

.cover-names {
font-family: 'Playfair Display', serif;
font-size: clamp(22px, 10vw, 50px);
font-weight: 400;
line-height: 1;
color: #ffb900;
opacity: 0;
transform: translateY(30px);
}

.cover-names .ampersand {
    font-style: italic;
    color: var(--gold);
    font-size: 0.8em;
    line-height: 1.2;
}

.cover-sub {
font-family: 'Montserrat', sans-serif;
font-size: clamp(10px, 2.5vw, 13px);
letter-spacing: 5px;
text-transform: uppercase;
color: #fff;
opacity: 0;
transform: translateY(10px);
margin-top: 8px;
}

.cover-date-chip {
display: inline-block;
border: 1px solid rgb(201 168 76);
padding: 6px 20px;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
font-weight: 300;
opacity: 0;
margin-top: 20px;
}

.open-btn {
margin-top: 40px;
padding: 14px 40px;
background: transparent;
border: 1px solid var(--gold);
color: #ffbc00;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
cursor: pointer;
position: relative;
overflow: hidden;
opacity: 0;
transition: color 0.4s;
}

.open-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: -1;
}

.open-btn:hover {
    color: var(--text-dark);
}

    .open-btn:hover::before {
        transform: scaleX(1);
    }

/* ─── DIVIDER ─── */
.divider {
display: flex;
align-items: center;
gap: 16px;
margin: 0 auto 48px;
max-width: 200px;
}

.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #ffbc00);
}

.divider-line:last-child {
    background: linear-gradient(to left, transparent, #ffbc00);
}

.divider-diamond {
width: 6px;
height: 6px;
background: var(--gold);
transform: rotate(45deg);
}

.section-label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: #de03d5;
font-weight: 500;
margin-bottom: 12px;
opacity: 0;
transform: translateY(16px);
display: block;
}

.section-title {
font-size: clamp(32px, 6vw, 52px);
font-weight: 400;
color: #ffb900;
line-height: 1.15;
margin-bottom: 24px;
opacity: 0;
transform: translateY(20px);
}

/* ─── COUPLE SECTION (Timeline removed) ─── */
#couple {
padding: 100px 24px;
background: var(--cream);
text-align: center;
position: relative;
}

#couple::before,
#couple::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/flower.gif');
    background-size: 150px auto;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

#couple::after {
    transform: scaleX(-1);
}

.couple-names {
display: flex;
justify-content: space-between;
margin: 40px 0;
}

.couple-names .parents {
    text-align: left;
}

.couple-photos {
display: flex;
justify-content: center;
gap: 24px;
margin: 60px 0;
position: relative;
}

.couple-photos::before {
    content: '❧';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: var(--gold);
    z-index: 2;
    background: var(--cream);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 52px;
    box-shadow: 0 0 0 8px var(--cream), 0 0 0 9px #ffbc00;
}

.couple-photo-wrap {
position: relative;
opacity: 0;
transform: translateY(30px);
}

.couple-photo-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #ffbc00;
    opacity: 0.6;
}

.couple-photo {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--gold-pale);
border: 3px solid var(--white);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* Placeholder avatar */
.couple-avatar {
width: 130px;
height: 130px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-pale), var(--pink));
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--white);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
font-family: 'Playfair Display', serif;
font-size: 36px;
color: goldenrod;
font-style: italic;
}

.couple-name-label {
margin-top: 12px;
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 18px;
color: forestgreen;
}

.love-story {
max-width: 560px;
margin: 0 auto 60px;
font-size: 14px;
line-height: 2;
color: var(--text-mid);
font-weight: 300;
opacity: 0;
transform: translateY(20px);
}

/* ─── WEDDING DETAILS ─── */
#details {
padding: 100px 24px;
background: var(--pink);
text-align: center;
}

.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
max-width: 760px;
margin: 0 auto 60px;
}

.detail-card {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(201,168,76,0.2);
padding: 32px 24px;
text-align: center;
opacity: 0;
transform: translateY(24px);
transition: transform 0.3s, box-shadow 0.3s;
}

.detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(201,168,76,0.15);
}

.detail-icon {
font-size: 28px;
display: block;
margin-bottom: 12px;
}

.detail-label {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin-bottom: 8px;
}

.detail-value {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: var(--text-dark);
line-height: 1.3;
}

.detail-sub {
font-size: 11px;
color: var(--text-light);
font-weight: 300;
margin-top: 4px;
}

.map-container {
max-width: 760px;
margin: 0 auto;
height: 300px;
border: 1px solid rgba(201,168,76,0.25);
overflow: hidden;
opacity: 0;
transform: translateY(24px);
position: relative;
background: var(--gold-pale);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: sepia(20%) saturate(80%);
}

/* Map placeholder */
.map-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gold-pale), var(--lavender));
gap: 12px;
}

.map-placeholder span {
    font-size: 40px;
}

.map-placeholder p {
    font-size: 13px;
    color: var(--text-mid);
    font-weight: 300;
    letter-spacing: 1px;
}

/* ─── SCHEDULE var(--cream) ─── */
#schedule {
padding: 100px 24px;
position: relative;
text-align: center;
background: var(--cream);
}

#schedule:before,
#schedule:after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/purple-frame.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: left bottom;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

#schedule:after {
    background-position: left bottom;
    transform: scaleX(-1);
}

.schedule-modern {
max-width: 900px;
margin: 0 auto;
position: relative;
}

.day-block {
position: relative;
}

.day-title {
font-size: 22px;
font-weight: 400;
color: var(--gold);
margin-bottom: 50px;
letter-spacing: 2px;
position: relative;
display: inline-block;
padding: 0 30px;
z-index: 3;
}

.day-title::before,
.day-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 1px;
    background: var(--gold);
    top: 50%;
}

.day-title::before {
    left: -40px;
}

.day-title::after {
    right: -40px;
}

/* timeline container with central line */
.timeline-center {
position: relative;
padding: 20px 0;
}

/* the central vertical line */
.timeline-center::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
    transform: translateX(-50%);
    z-index: 1;
}

/* each row: left + right side */
.timeline-row {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
position: relative;
z-index: 2;
}

/* left side (time + phase) */
.timeline-left {
width: 50%;
padding-right: 35px;
text-align: right;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

/* right side (title + description) */
.timeline-right {
width: 50%;
padding-left: 35px;
text-align: left;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

/* dot on the line */
.timeline-dot {
position: absolute;
left: 50%;
top: 0;
width: 16px;
height: 16px;
background: #fdba00;
border: 3px solid var(--cream);
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 2px var(--gold-light);
z-index: 3;
}

.timeline-time {
font-size: 18px;
font-weight: 500;
color: var(--text-dark);
line-height: 1.2;
display: block;
}

.timeline-phase {
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
color: #fdba00;
background: #746646;
padding: 3px 10px;
border-radius: 30px;
display: inline-block;
margin: 6px 0;
}

.timeline-right h4 {
font-family: 'Kh SN Kampongsom Regular', sans-serif;
font-size: 22px;
color: var(--text-dark);
margin-bottom: 6px;
font-weight: 500;
}

.timeline-right p {
font-size: 14px;
color: var(--text-mid);
font-weight: 300;
line-height: 1.6;
}

/* alternate orientation? we keep same pattern: left always time, right always content.
For days we want consistency, no swapping needed because central line divides clearly.
*/

@media (max-width: 700px) {
.timeline-center::before {
    left: 30px;
}

.timeline-row {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 30px;
}

.timeline-left, .timeline-right {
    width: 100%;
    padding: 0 0 0 30px;
    text-align: left;
}

.timeline-left {
    transform: translateX(-10px);
}

.timeline-dot {
    left: 0px;
}

#schedule:after,
#schedule:before {
    background-size: 50%;
}
}

/* ─── GALLERY ─── */
#gallery {
padding: 100px 24px;
background: linear-gradient(170deg, var(--lavender) 0%, var(--cream) 100%);
text-align: center;
}

.masonry-grid {
columns: 2;
column-gap: 12px;
max-width: 680px;
margin: 0 auto;
}

@media (min-width: 600px) {
.masonry-grid {
    columns: 3;
}

.cover-tag {
    font-size: 55px;
}

#couple-container {
    max-width: 768px;
    margin: 0 auto;
}

#couple::before,
#couple::after {
    background-size: 350px auto;
}
}

.masonry-item {
break-inside: avoid;
margin-bottom: 12px;
overflow: hidden;
cursor: pointer;
position: relative;
opacity: 0;
transform: scale(0.95);
}

.masonry-item::after {
    content: '⊕';
    position: absolute;
    inset: 0;
    background: rgba(201,168,76,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.masonry-item:hover::after {
    opacity: 1;
}

.gallery-img {
width: 100%;
display: block;
background: var(--gold-pale);
transition: transform 0.5s;
}

.gallery-img img {
    width: 100%;
    max-width: 100%;
    display: block;
}

.masonry-item:hover .gallery-img {
transform: scale(1.05);
}

/* Lightbox */
#lightbox {
position: fixed;
inset: 0;
background: rgba(20,12,8,0.96);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}

#lightbox.active {
    display: flex;
}

#lightbox-img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
display: block;
}

.lightbox-close {
position: absolute;
top: 20px;
right: 24px;
font-size: 28px;
color: #ffbc00;
cursor: pointer;
background: none;
border: none;
line-height: 1;
}

.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(201,168,76,0.2);
border: 1px solid rgba(201,168,76,0.4);
color: #ffbc00;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}

.lightbox-nav:hover {
    background: rgba(201,168,76,0.4);
}

#lb-prev {
left: 12px;
}

#lb-next {
right: 12px;
}

/* ─── LETTERS SECTION ─── */
#letters {
padding: 100px 24px;
background: linear-gradient(170deg, var(--lavender) 0%, var(--cream) 100%);
text-align: center;
position: relative;
overflow: hidden;
}

.letters-grid {
font-family: 'Kh SN Kampongsom Regular', sans-serif;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
max-width: 800px;
margin: 0 auto 40px;
}

.letter-card {
background: #fff;
backdrop-filter: blur(12px);
border: 1px solid rgba(201,168,76,0.25);
padding: 40px 28px;
text-align: center;
opacity: 0;
transform: translateY(24px);
transition: transform 0.4s, box-shadow 0.4s;
position: relative;
box-shadow: 0 12px 36px rgba(0,0,0,0.05);
}

.letter-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(201,168,76,0.15);
}

.letter-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 16px;
}

.letter-type {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin-bottom: 16px;
}

.letter-title {
font-size: 26px;
color: var(--text-dark);
margin-bottom: 16px;
}

.letter-preview {
font-size: 14px;
line-height: 1.9;
color: var(--text-mid);
font-weight: 300;
margin-bottom: 24px;
font-style: italic;
}

.letter-btn {
background: transparent;
border: 1px solid var(--gold);
padding: 10px 30px;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dark);
cursor: pointer;
transition: all 0.3s;
margin-top: 8px;
}

.letter-btn:hover {
    background: var(--gold);
    color: white;
}

/* Letter modal */
.letter-modal {
position: fixed;
inset: 0;
background: rgba(20,12,8,0.92);
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}

.letter-modal.active {
    display: flex;
}

.modal-content {
background: var(--cream);
max-width: 500px;
width: 100%;
padding: 48px 40px;
position: relative;
border: 1px solid var(--gold);
box-shadow: 0 24px 48px rgba(0,0,0,0.3);
animation: modalFade 0.4s;
}

@keyframes modalFade {
from {
    opacity: 0;
    transform: scale(0.96);
}

to {
    opacity: 1;
    transform: scale(1);
}
}

.modal-close {
position: absolute;
top: 16px;
right: 20px;
font-size: 22px;
cursor: pointer;
color: var(--text-mid);
background: none;
border: none;
}

.modal-close:hover {
    color: var(--gold);
}

.modal-icon {
font-size: 40px;
margin-bottom: 16px;
display: block;
}

.modal-title {
font-family: 'Playfair Display', serif;
font-size: 28px;
color: var(--text-dark);
margin-bottom: 20px;
}

.modal-text {
font-size: 15px;
line-height: 2;
color: var(--text-mid);
font-weight: 300;
text-align: left;
margin: 20px 0;
white-space: pre-line;
}

.modal-signature {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
color: var(--gold);
margin-top: 24px;
text-align: right;
font-style: italic;
}

/* ─── COUNTDOWN ─── */
#countdown {
padding: 100px 24px;
background: linear-gradient(160deg, #1a0f0a, #2e1a12, #1a0f0a);
text-align: center;
position: relative;
overflow: hidden;
}

#countdown .section-label {
    color: #ffbc00;
}

#countdown .section-title {
    color: var(--white);
}

.countdown-grid {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 48px;
}

.countdown-unit {
min-width: 80px;
opacity: 0;
transform: translateY(20px);
}

.countdown-num {
font-family: 'Playfair Display', serif;
font-size: clamp(48px, 10vw, 72px);
color: var(--gold);
line-height: 1;
font-weight: 400;
}

.countdown-label {
font-size: 9px;
letter-spacing: 3px;
color: rgba(232,213,163,0.5);
text-transform: uppercase;
font-weight: 300;
margin-top: 6px;
}

.countdown-sep {
font-family: 'Playfair Display', serif;
font-size: 48px;
color: var(--gold);
opacity: 0.3;
align-self: flex-start;
margin-top: 8px;
}

/* ─── GIFT ─── */
#gift {
padding: 100px 24px;
background: var(--cream);
text-align: center;
}

.gift-card {
max-width: 480px;
margin: 0 auto;
background: linear-gradient(135deg, var(--gold-pale), rgba(255,255,255,0.9));
border: 1px solid rgba(201,168,76,0.25);
opacity: 0;
transform: translateY(24px);
}

.gift-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}

.gift-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(20px, 4vw, 28px);
color: var(--text-dark);
line-height: 1.5;
margin-bottom: 20px;
}

.gift-sub {
font-size: 12px;
color: var(--text-light);
font-weight: 300;
line-height: 1.8;
margin-bottom: 32px;
}

/* QR placeholder */
.qr-box {
width: 350px;
height: 350px;
margin: 0 auto;
background: var(--white);
border: 1px solid rgba(201,168,76,0.3);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.qr-inner {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(7, 1fr);
gap: 2px;
width: 100px;
height: 100px;
}

.qr-cell {
border-radius: 1px;
background: var(--text-dark);
}

/* ─── FOOTER ─── */
footer {
padding: 80px 24px 40px;
background: linear-gradient(170deg, #1a0f0a, #0f0806);
text-align: center;
}

.footer-names {
font-family: 'Playfair Display', serif;
font-size: clamp(36px, 8vw, 60px);
font-style: italic;
color: var(--white);
line-height: 1.1;
margin-bottom: 20px;
opacity: 0;
transform: translateY(20px);
}

.footer-names span {
    display: block;
    font-size: 0.45em;
    font-style: normal;
    color: var(--gold);
    letter-spacing: 6px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 8px;
}

.footer-msg {
font-size: 12px;
color: rgba(232,213,163,0.5);
letter-spacing: 2px;
margin-top: 40px;
opacity: 0;
transform: translateY(10px);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 480px) {
.couple-photos::before {
    font-size: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.couple-avatar, .couple-photo {
    width: 110px;
    height: 110px;
}

.countdown-sep {
    display: none;
}
}

/* ─── FLOATING ORNAMENTS (SVG) ─── */
.float-ornament {
position: absolute;
opacity: 0.06;
pointer-events: none;
animation: floatOrnament ease-in-out infinite;
}

@keyframes floatOrnament {
0%, 100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
}

50% {
    transform: translateY(-12px) rotate(var(--rot, 0deg));
}
}

/* Visible on cover */
#cover .float-ornament {
opacity: 0.12;
}

/* Hidden YouTube player */
#youtube-player {
position: fixed;
bottom: -100px;
right: -100px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

/* Color */
.purple {
color: #de03d5;
}

.green {
color: forestgreen;
}

.gold {
color: goldenrod;
}

.font-sn-Kampongsom {
font-family: 'Kh SN Kampongsom Regular', sans-serif;
}

@font-face {
font-family: 'Kh SN Kampongsom Regular';
src: url('./font/Kh-SN-Kampongsom-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}