/* Body - style, flex container (column) */
body {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 1. Header section */

    /* Header section - style, flex container (column), set min height, center content vertically */
    .header {
        background-color: teal;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        min-height: 400px;
        justify-content: center;
    }

    /* Hero main text - style */
    .hero-main {
        font-weight: 900;
        font-size: 48px;
        color: white;
        line-height: 1;
    }

    /* Hero secondary text - style */
    .hero-secondary {
        font-size: 18px;
        color:white;
    }

    /* a element - remove underline */
    a {
        text-decoration: none;
        color: white;
    }

    /* Lists - remove bullet points and built-in margin/padding */
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Header row - flex container (row), push apart, center vertically, padding, push to top of screen */
    .header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin-bottom: auto;
    }

    /* Links - flex container (row), gap between links, center vertically */
    .links {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 16px;
    }

    /* Image in header-row - size */
    .header-row img {
        height: 40px;
    }

    /* Header block - flex container (row), padding, center horizontally, wrap content */
    .header-block {
        display: flex;
        padding: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Image in header-block - size, center vertically */
    .header-block img {
        height: 100%;
        width: 400px;
        overflow: hidden;
        object-fit: cover;
        align-self: center;
    }

    /* Hero block - flex container (column), style */
    .hero-block {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 20px;
        gap: 20px;
        justify-content: flex-start;
        width: 400px;
    }

    /* Button - style */
    button {
        border: none;
        border-radius: 8px;
        background: #eee;
        padding: 8px;
        width: 120px;
        font-weight: bold;
        font-size: 14px;
    }

/* 2. Random information */

    /* Random section - flex container (column), padding, min height, center content vertically */
    .random {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
        background-color: hsl(147 35% 94%);
        min-height: 400px;
        justify-content: center;
    }

    /* Random title - style */
    .random-title {
        font-weight: 900;
        font-size: 24px;
        line-height: 1;
        margin-bottom: 20px;
        text-align: center;
    }

    /* Subtext - style */
    .subtext {
        font-size: 18px;
    }

    /* Services block - flex container (row), center horizontally and vertically, wrap content */
    .services-block {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* Each service - flex container (column), wrap content, center horizontally and vertically, margins, center text, size */
    .getaway,
    .resident,
    .nook-stop,
    .travel {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 20px;
        text-align: center;
        width: 220px;
    }

    /* Images in services block - size */
    .services-block img {
        height: 100px;
        width: auto;
        margin-bottom: 10px;
    }

/* 3. Quote */

    /* Quote section - flex container (column), padding, gap, center content horizontally and vertically, min height */
    .quote {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
        gap: 20px;
        background-color: #f8eebc;
        justify-content: center;
        align-items: center;
        min-height: 200px;
    }

    /* Quote text - style, flex container (row), align to left and bottom, width and max width */
    .quote-text {
        font-style: italic;
        font-size: 24px;
        text-align: start;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex: auto;
        width: 50%;
        max-width: 500px;
    }

    /* Quote source - style, flex container (row), align to right and top, width and max width */
    .quote-source {
        font-size: 18px;
        font-weight: bold;
        text-align: end;
        display: flex;
        flex: auto;
        justify-content: flex-end;
        align-items: flex-start;
        width: 50%;
        max-width: 500px;
    }

/* 4. Sign up */

    /* Sign up section - flex container (column), center content horizontally and vertically, min height */
    .sign-up {
        display: flex;
        flex-direction: column;
        background-color: hsl(147 35% 94%);
        justify-content: center;
        align-items: center;
        min-height: 300px;
    }

    /* Sign up box section - flex container (row), padding, gap, margin, width, center horizontally and vertically, rounded corners */
    .sign-up-box {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 40px;
        gap: 10px;
        margin: 20px;
        width: 50%;
        background-color: white;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    /* Call block - flex container (column), style */
    .call {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        width: 450px;
    }

    /* Call title and subtext - styles */
    .call-title {
        font-weight: bold;
        font-size: 18px;
    }
    .call-subtext {
        font-size: 16px;
    }

    /* Button can have same style as the one in the Header section */

/* 5. Footer */

    /* Footer section - style, flex container (row), center horizontally and vertically, push to bottom of screen */
    .footer {
        background: teal;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: auto;
    }

/* Construction page */

    /* Construction section - flex container, fill empty space, center content horizontally and vertically */
    .construction {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        background-color: #f8eebc;
        justify-content: center;
        align-items: center;
    }

    /* Image on page - size */
    .construction img {
        height: 200px;
        width: auto;
        margin: 20px;
    }

    /* Construction message block - flex container (column), padding, gap, margin, size, style */
    .construction-message {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 20px;
        gap: 20px;
        margin: 20px;
        justify-content: center;
        max-width: 500px;
        min-width: 200px;
        font-size: 18px;
        background-color: white;
        border-radius: 10px;
    }

    /* Options block - flex container (column), align content to the left, gap, size */
    .options {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 10px;
        width: 100%;
        max-width: 600px;
    }

    /* bold text - change colour */
    b {
        color: rgb(0, 183, 255);
    }

    /* Buttons - style (a bit different to index.html page) */
    .options button {
        width: 200px;
        text-align: center;
        border: none;
        border-radius: 8px;
        background: #eee;
        padding: 8px;
        font-weight: bold;
        font-size: 14px;
    }