/* Importing fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400');

/* Base Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    overflow: hidden;
    background-color: #FFEFEF; /* Soft pink background to evoke love and warmth */
}

.container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #4B1D1D; /* Dark reddish-brown for text to contrast softly against background */
    padding: 20px;
}

header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    margin-top: 30px;
    color: #C70039; /* Deep red color for the main heading */
}

main {
    margin-top: 40px;
}

.timer h2 {
    font-size: 1.2em; /* Made smaller */
    margin-bottom: 10px;
    color: #4B1D1D;
}

.count-container {
    display: inline-flex;
    align-items: baseline;
}

#days {
    font-size: 8em; /* Largest text on the page */
    font-weight: bold;
    margin: 0;
    color: #900C3F; /* Rich maroon color for the number */
}

.label {
    font-size: 1.5em; /* Ensuring 'Days' is smaller but on the same line */
    margin-left: 10px;
    color: #4B1D1D;
}

.subtext {
    font-size: 1.2em;
    margin-top: 10px;
    color: #4B1D1D;
}

.quote {
    font-style: italic;
    font-size: 1.5em;
    margin-top: 50px;
    padding: 0 20px;
    color: #4B1D1D;
}

.footer {
    margin-top: 50px;
}

/* Background Heart Image */
.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxwYXR0ZXJuIGlkPSJoZWFydHNQYXR0%0D%0AZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHBhdHRlcm5Vbml0%0D%0Acz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8cGF0aCBkPSJNMjUgMTUgTDMwIDEwIEE1%0D%0AIDUgMCAwIDEgNDAgMTAgQTUgNSAwIDAgMSA1MCAyMCBRNTAgMzAgMjUgNDUgUTAgMzAg%0D%0A MCAyMCBBNSA1IDAgMCAxIDEwIDEwIEE1IDUgMCAwIDEgMjAgMTAgWiIgZmlsbD0iI0ZG%0D%0AQzBDQiIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAw%0D%0AJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2hlYXJ0c1BhdHRlcm4pIi8+Cjwvc3Zn%0D%0APg==');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 1;
}

/* Responsive Design */

@media screen and (max-width: 768px) {
    header h1 {
        font-size: 2em;
    }
    #days {
        font-size: 5em;
    }
    .label {
        font-size: 1.2em;
    }
    .quote {
        font-size: 1.2em;
    }
}