/* Grundläggande reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Bakgrund och generell styling */
body {
    font-family: Arial, sans-serif;
    background-color: #FEFDF2; /* Bakgrundsfärg */
    color: #4A4F57; /* Textfärg */
    padding: 20px;
}

h1 {
    color: #5C1224; /* Mörk röd färg för rubriker */
    text-align: center;
    margin-bottom: 20px;
}

form {
    background-color: #FFFFFF; /* Vit bakgrund för formuläret */
    border: 2px solid #97B79B; /* Grönaktig färg för ram */
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Liten skugga för djup */
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #4A6C7C; /* Blågrå färg */
}

input[type="number"], input[type="date"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #C58C44; /* Orangeaktig färg för inmatningsfält */
    border-radius: 4px;
    background-color: #FEFDF2; /* Ljus bakgrund för inmatningsfält */
    font-size: 1rem;
    color: #4A4F57; /* Textfärg */
}

button {
    width: 100%;
    padding: 12px;
    background-color: #4A6C7C; /* Blågrå färg för knappar */
    color: #FEFDF2; /* Ljus textfärg */
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #5C1224; /* Mörk röd färg vid hover */
}

h2 {
    color: #C58C44; /* Orangeaktig färg för underrubriker */
    margin-bottom: 10px;
}

p {
    margin-bottom: 10px;
    text-align: center;
}

/* Resultatsida styling */
.result-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #FFFFFF;
    border: 2px solid #97B79B;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.result-container p {
    font-size: 1.2rem;
    color: #4A4F57;
}
/* Hero-sektion med uttonande bild */
.hero {
    position: relative;
    height: 50vh; /* Justerbar beroende på hur stor du vill att hero-sektionen ska vara */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1)); /* Tonar ut i underkant */
    z-index: 1;
}

/* Rektangulär, transparent div med oskärpa */
.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    padding: 20px;
}

.heart {
    width: 80%; /* Justerbar bredd för div-en */
    max-width: 600px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.3); /* Halvtransparent bakgrund */
    backdrop-filter: blur(10px); /* Oskärpa-effekt */
    border-radius: 10px; /* Runda hörn för ett mjukt utseende */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Lätt skugga för djup */
    text-align: center;
    color: #4A4F57; /* Textfärg */
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Responsivitet */
@media (max-width: 768px) {
    .heart {
        padding: 20px;
        font-size: 1rem;
    }
}