/* General style across entire page */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: url('assets/pexels-luis-gomes-166706-546819.jpg');
    background-color: #232a49;
    background-repeat: no-repeat;
    background-size: cover;
}

.construction_element {
    background-color: rgb(214, 214, 162);
    min-height: 20px;
    margin: 20px 4px 40px;
    text-align: center;
    padding: 20px;
}

.hidden {
    display: none;
}

#flex_container {
    display: flex;
    flex-direction: column;
}

/* applies to all flex items inside the container, header, blocks & dividers */
#flex_container div {
    /* width: 100%; */
    flex: auto;
    padding: 30px;
    border: 4px solid rgb(0, 0, 0);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
}

/* The top block welcoming to the page */
#body_header_block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(231, 227, 233, 0.9);
    height: 400px;
    margin: 1% 4%;
    background: url('assets/block_background_0_header.png');
    background-size: cover;
    border-radius: 15px;
}

#body_header_block h1 {
    margin: 0px;
    font-size: clamp(24px, 4vw + 48px, 120px);
    text-shadow: rgba(0, 0, 0, 0.2) 6px 6px;
    text-align: left;
    /* make the first name/surname wrap around */
    /* text-wrap: pretty; */
    /* width: 200px; */
    /* position:absolute; */
    /* add background behind text */
    background-color: white;
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.75);
    display:inline;
    padding: 5px 10px;
    border-radius: 25px;
}

#body_header_block h2 {
    margin: 0px;
    font-size: clamp(16px, 2vw + 24px, 55px);
    text-shadow: rgba(0, 0, 0, 0.2) 6px 6px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.995);
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.55);
    display:inline;
    padding: 5px 10px;
    border-radius: 5px;
}

/* applies to block */
.content_block {
    margin: 2.5% 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 500px;
    /* Fallback if block background image can't load */
    background: url('./assets/default_content_placeholder_background.webp') no-repeat center;
    background-size: cover;
    border-radius: 15px;
}

/* There are style similarities between h1/p  and content block/header block variations - could combine these styles?*/
/* Content block title/header text */
.content_block h1 {
    margin: 0px; /* Remove default h1 margin */
    font-size: clamp(24px, 4vw + 36px, 90px);
    text-align: left;
    word-wrap: normal;
    /* add background behind text */
    background-color: rgba(255, 255, 255, 0.90);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.75);
}

/* Content block descriptive text  */
.content_block p {
    margin: 0px;
    font-size: clamp(16px, 2vw + 24px, 60px);
    text-align: right;
    word-wrap: normal;
    align-self: flex-end;
    /* add background behind text */
    background-color: rgba(255, 255, 255, 0.85);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.55);
}

/* Dividers removed presently - remove this CSS if not reintroduced*/
.content_divider {
    height: 20px;
    visibility: hidden;
}


/* Mobile display changes*/
@media (max-width: 768px) {
    body {
        /* background-repeat:repeat-y; */
        background-size: 150vh;
        background-position:top;
    }
    .content_block {
      background-size: cover;
      background-position-x: 43%;
      /* background-size: 400%; */
      /* background-position: center; */
    }