/* CSS Resets */

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

img {
    display: block;
    width: 100%;
}


body {    
    color: white;
    background-color: rgb(14, 14, 14);
    height: 100dvh;
}

.body-wrapper-1 {
    height: 100%;        
    background-image: url(/img/gypsophila-gray-background-with-copy-space-center.jpg);    
    background-size:contain;    
    /* padding: 3vh 5vh; */
    padding: 3% 5%;
    margin: auto;
    /* aspect-ratio: .71 / 1;     */
    width: 100%;
    max-width: 70vh;    
}

.body-wrapper-2 {        
    height: 100%;         
    background-size: cover;    
    background-repeat: no-repeat;
    border: .6vh solid #d7ab58;
    border-radius: 20px;        
    margin: auto;   
    overflow: hidden;    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    text-align: center;
    box-shadow: 0px 0px 10em 3vh #ffffff;
}


header {
    height: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}

main {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
}

footer {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    align-self: end;
    margin-bottom: 1vh;
    font-size: 2vh;    
}

.hero {    
    text-align: center;
    height: 100%;    
    display: grid;    
    width: 100%;    
}

.hero_img {    
    /* height: inherit; */
    height: 100%;
    grid-area: 1 / 1;         
    /* width: 60vh; */
}

.hero_title {
    grid-area: 1 / 1;    
    /* font-size: 5vh;   */
    /* font-size: 2.5em;     */
    font-size: clamp(1em, 5vh, 5em);    
    font-family: 'Cookie'; 
    /* text-shadow: 2px 3px 20px #f7f7f7; */
    text-align: center;    
    align-self: start;
    margin-top: 2em;
    color: #d7ab58;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #000, 1px 1px 0 #000;
}

.hero_cta {
    color: white;      
    background-color: #d7ab58;
    grid-area: 1 / 1;    
    width: 20vh;
    height: 5vh;
    font-size: 3vh;
    font-family: "Cookie";
    cursor: pointer;
    border-radius: 3vh;
    border-color: #d7ab58;    
    align-self: start;
    justify-self: center;
    margin-top: 8em;    
    box-shadow: 0px 0px 10vh 3vh #fff;
}

.hero_cta:hover {
    background-color: #f8b538;
}

.wedding-details {
    font-size: 5vh;
    font-family: "Cookie";
}

a.domain {
    color: white;
    text-decoration: none;
}

a.domain:hover {
    color: #1a6fe3; 
    text-decoration: underline;    
}

.rsvp-form.modal {
    display: none;
}

.rsvp-form {
    background-color: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

.rsvp-form h2 {
    text-align: center;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-group textarea {
    resize: none;
    height: 80px;
}

.form-group .radio-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.form-group .radio-group label {
    font-weight: normal;
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #ff6f61;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #e65b50;
}