:root {
    --headingFont: "Great Vibes", serif;
    --bodyFont: "Poppins", serif;

    --powderBlue: #89CFF0;
    --mauvePink: #F4A9A8;
    --lightSageGreen: #e1e5db;
    --mediumSageGreen :#c3ccb6;
    --sageGreen: #A3B18A; 
    --white: #fff;
    --black: #000;
}

/* Globals */

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--bodyFont);
    background-color: var(--lightSageGreen);
    font-size: 1.6rem;
}

@media (min-width: 768px) {
    .container {
        width: min(90%, 48rem);
        margin: 0 auto;
    }
}

.container {
    border: 0.2rem var(--sageGreen); 
    border-style: none solid;
} 

p {line-height: 2; }

a { text-decoration: none; }

button, input, fieldset { border: none; }

h1, h2, h3, h4 {
    font-family: var(--headingFont);
    font-weight: 100;
    line-height: 0.5;
}

h1 {font-size: 4.8rem; }
h2 {font-size: 4rem; }
h3 {font-size: 3.2rem; }
h4 {font-size: 2.8rem; }

img {width: 100%; }

/* Utilities */

.no-margin {margin: 0; }

.no-padding {padding: 0; }

.text-center { text-align: center; }

.bold-text {font-weight: bold; }

.green-text {color: var(--sageGreen); }

.pink-text {color: var(--mauvePink); }

.blue-text {color: var(--powderBlue); }

.line-white {
    border-bottom: 0.2rem solid var(--white);
    margin: 0 3rem;
}

.line-green {
    border-bottom: 0.2rem solid var(--sageGreen);
    margin: 0 3rem;
}

.border_img {
    border: 0.4rem solid var(--white);
    padding: 1rem;
}

.bg-green {
    background-color: var(--sageGreen);
    color: var(--white);
}

.bg-mediumGreen {background-color: var(--mediumSageGreen); }

.bg-lightGreen {background-color: var(--lightSageGreen); }

.btn-green, .btn-lightGreen {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.5rem 2.5rem;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 0.4rem;
    transition: 0.7s;
}

.btn-green {
    background-color: var(--sageGreen);
    color: var(--white);
}

.btn-lightGreen {
    background-color: var(--lightSageGreen);
    color: var(--sageGreen);
}

.btn-green:hover, .btn-lightGreen:hover {
    background-color: var(--white);
    color: var(--black);
}

.btn-pink, .btn-blue {
    text-align: center;
    border-radius: 1rem;
    letter-spacing: 0.2rem;
    padding: 1rem 2rem;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-pink {background-color: var(--mauvePink); }

.btn-blue {background-color: var(--powderBlue); }

.btn-pink:hover, .btn-blue:hover {opacity: 0.8; }

/* Animations */

/* Text appears */
.scroll_animation {
    opacity: 0;
    transform: scale(0.1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll_animation.visible {
    opacity: 1;
    transform: scale(1);
}

/* PopUp Image*/

.popup-img {
    opacity: 0;
    transform: scale(0.7);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.popup-img.visible {
    opacity: 1;
    transform: scale(1.1);
    animation: jelly 0.6s ease;
}

/* Animación tipo gelatina */
@keyframes jelly {
    0% { transform: scale(0.7); }
    30% { transform: scale(1.2); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Header */
.header, .counter{
    position: relative;
    text-align: center;
}

.header__content{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.header__content p{text-transform: uppercase;}

/* Phrase section */
.phrase-section {
    margin-top: -1rem;
    padding: 6rem; 
}

.fa-heart {font-size: 2rem; }

/* Counter section */
.counter__content {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

.counter__content h2 {line-height: 0; }

.countdown {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre los elementos */
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem; /* Tamaño de fuente base */
}

.num {
    font-size: 2.5rem; /* Tamaño más grande para los números */
    font-weight: bold;
}

.label {
    font-size: 1rem; /* Tamaño más pequeño para las etiquetas */
    text-transform: uppercase;
}


/* Place section */
.place {padding: 2rem; }

.place__txt {
    border: 0.3rem var(--sageGreen);
    border-style: none double solid double;
    padding: 3rem 3rem 6rem 3rem;
    margin-top: -1rem;
}

.place p:last-of-type {margin-bottom: 4rem;}

/* Itinerary section */
.itinerary__content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    place-items: center;
    column-gap: 2rem;
    position: relative;
}

.itinerary__content-txt {grid-column: 2 / 3; }

.itinerary__content-line {
    grid-column: 1 / 2;
    position: absolute;
    width: 4px;
    top: 20rem;
    bottom: 20rem;
    text-align: center;
    background-color: var(--white);
    z-index: -1;
}

.itinerary__content-item {
    grid-column: 1 / 2;
    width: 5rem;             
    height: 5rem;             
    background-color: var(--white); 
    border-radius: 50%;       
    display: flex;
    justify-content: center;  
    align-items: center;
    padding: 4rem;
    z-index: 1;
}

.item1 {grid-row: 1 / 2; }

.item2 {grid-row: 2 / 3; }

.item3 {grid-row: 3 / 4; }

.item4 {grid-row: 4 / 5; }

.fa-baby-carriage {
    font-size: 3rem;
    color: var(--mediumSageGreen);
}

/* Attendance section */
.attendance {padding: 2rem; }

.attendance a:nth-last-child(2) {
    margin-bottom: 2rem;
}

/* DressCode section */

.dressCode__content {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    column-gap: 1rem;
    padding: 3rem;
}

.dressCode__content-pink {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.dressCode__content-pink-img {
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    width: auto;             
    height: auto;             
    background-color: var(--white); 
    border-radius: 50%;       
    display: flex;
    justify-content: center;  
    align-items: center;
    padding: 1rem;
}

.dressCode__content-blue {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.dressCode__content-blue-img {
    grid-column: 1 / 2;
    grid-row: 2 / 3;

    width: auto;             
    height: auto;             
    background-color: var(--white); 
    border-radius: 50%;       
    display: flex;
    justify-content: center;  
    align-items: center;
    padding: 1rem;
}

/* Survey section */
.survey {padding: 2rem; }

.survey__content {
    padding: 1rem;
    border: 0.3rem double var(--sageGreen);
}

.survey__girl, .survey__boy {
    display: grid; 
    column-gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.survey__girl {grid-template-columns: 1fr 2fr; }

.survey__boy { grid-template-columns: 2fr 1fr; }

.survey__boy-img {grid-column: 2 / 3; }

.survey__boy-result {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* Survey section - bar */
.bar-container {
    width: 100%;
    height: 20px;
    background-color: var(--white); 
    border-radius: 10px;
    overflow: hidden;
}

.bar {
    height: 100%;
    transition: width 0.5s ease-in-out;
}

.girl-bar {
    background-color: var(--mauvePink);
    width: 50%;
}

.boy-bar {
    background-color: var(--powderBlue);
    width: 50%;
}

/* Message section */
.message {
    position: relative; 
    text-align: center;
}

.message__content {
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
}
/* Coments section */
.comments {
    margin-top: -0.3rem;
    padding: 2rem;
}

.comments__form {padding: 2rem; }

.comments__form legend {
    color: var(--black);
    padding: 1rem;
    margin: 1.5rem 0;
    line-height: 1.5;
}

.comments__form-fields {
    color: var(--black);
    margin-bottom: 1.5rem;
}

.comments__form-fields label {
    margin-bottom: .5rem;
    display: block;
}

.comments__form-fields input, .comments__form-fields textarea {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    padding: 1rem;
}

.comments__form-fields textarea {
    height: 8rem;
    border: none;
}

.comments_Container {margin-top: 2rem; }

.comment {
    color: var(--black);
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}