/* import font dari goole */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

img {display: block;}

/* Beberapa variabel yang akan saya gunakan nanti */
:root {
    /* font variabel */
    --MONTSERRATFONT: 'Hind', sans-serif;
    --HINDFONT: 'Montserrat', sans-serif;

    /* color variabel */
    --COLOR1: #B40D1A;
    --COLOR2: #C7141A;
    --COLOR3: #F2ECE9;
    --COLOR4: #FFFFFF;
}

body {
    width: 100%;
    background-color: var(--COLOR3);
}

/* CSS BAGIAN JUDUL */
/* header container*/
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: min(1.1rem, 4vw);
}
/* judul container */
.judul-container {
    width: min(95%, 800px);
    padding: 1.5rem 0 0 2.5rem;
    /* border: 1px solid black; */
}
/* bagian judul */
.judul-container h1 {
    font-family: var(--HINDFONT);
    font-size: clamp(1.8rem, 2.4vw, 4rem);
}
/* bagian tanggal yang ada di bawah judul */
#tanggal {
    display: block;
    width: min(95%, 800px);
    padding-left: 2.5rem;
    font-family: var(--HINDFONT);
    font-size: clamp(.8rem, 1.2vh, 1.6rem)
}
/* gambar utama yang ada di dalam header */
#main-img {
    width: 100%;
    margin-bottom: 1.5rem;
    height: min(400px, 65vh);
    object-fit: cover;
    object-position: bottom center;
}

/* CSS BAGIAN MAIN */
main {
    width: min(80%, 750px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    
}

.pembukaan {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.pembukaan p {
    font-family: var(--MONTSERRATFONT);
    font-size: clamp(1rem, 1.4vw, 3rem);
    text-align: justify;
}

.all-img-content {
    width: 100%;
}

.content-utama {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#pembukaan-content p {
    font-family: var(--MONTSERRATFONT);
    font-size: clamp(1rem, 1.4vw, 3rem);
    text-align: justify;
}

 /* CSS bagian daftar tradisi*/
.content p{
    font-family: var(--MONTSERRATFONT);
    font-size: clamp(1rem, 1.4vw, 3rem);
    text-align: justify;
    margin-top: .4rem;
}

h3 {
    font-family: var(--HINDFONT);
    font-size: clamp(1.4rem, 1.8vw, 3.6rem);
    color: var(--COLOR2);
    margin-bottom: .4rem;
}

#penutupan-content{
    display: grid;
    gap: 1rem;
    font-family: var(--MONTSERRATFONT);
    font-size: clamp(1rem, 1.4vw, 3rem);
    text-align: justify;
}

footer {
    background-color: var(--COLOR2);
    text-align: center;
    width: 100%;
}
footer span{
    font-family: var(--MONTSERRATFONT);
    font-size: clamp(1rem, 1.4vw, 3rem);
    display: block;
    color: var(--COLOR4);
    padding: .5rem 0;
}