body {
margin: 0;
font-family: 'Playfair Display', serif;
background: #f8f6f2;
color: #3e3e3e;
text-align: center;
}

/* NAV */
nav a {
margin: 0 10px;
text-decoration: none;
color: #3e3e3e;
font-size: 14px;
}

/* HERO */
.hero {
padding: 40px 20px;
position: relative;
}

.hero-img {
width: 260px;
filter: grayscale(100%);
}

/* BLOMMIG RAM */
.floral-frame {
border: 2px solid #ddd;
margin: 20px;
padding: 20px;
background-image: url('https://www.transparenttextures.com/patterns/paper.png');
}

/* TEXT */
h1 {
font-family: 'Great Vibes', cursive;
font-size: 56px;
}

.subtitle {
font-size: 18px;
}

/* BUTTON */
.btn {
border: 1px solid #3e3e3e;
padding: 10px 25px;
display: inline-block;
margin-top: 20px;
text-decoration: none;
color: #3e3e3e;
}

/* CARDS */
.details {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}

.card {
background: white;
padding: 20px;
border: 1px solid #ddd;
width: 220px;
}

/* MAP */
.map iframe {
width: 90%;
height: 300px;
border: 0;
}

/* OSA */
.osa form {
display: flex;
flex-direction: column;
align-items: center;
}

.osa input, .osa select, .osa textarea {
margin: 10px;
padding: 10px;
width: 250px;
}

button {
padding: 10px 20px;
border: none;
background: #3e3e3e;
color: white;
}

/* MOBILE */
@media (max-width: 600px) {
h1 {
font-size: 40px;
}

.hero-img {
width: 200px;
}
}