html {
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;
    color: var(--text);
    background-color: white;
    width: 100%;
}

a {
    color: var(--text);
}


/* Styles for the hero image display */

.hero-container {
    width: 100%;
    height: 100vh;
    position: relative;
    text-shadow: 0px 0px 15px #000;
    /* TODO: set min height to work and change the image to contain */
}

.hero-gradient{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-image: linear-gradient(to right,rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}

.hero-image {
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-container h1 {
    position: absolute;
    z-index: 2;
    bottom:40%;
    left:15%;
    color: white;
    font-size: 3rem;
    
}

.hero-container p {
    position: absolute;
    max-width: 50%;
    /* overflow: wrap; */
    z-index: 2;
    top:55%;
    left:15%;
    font-size: 1.5rem;
    color: rgb(228, 228, 228);
}

/* End hero content */


/* Begin main content */

main {
    max-width: 100vw;    
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 5vh;
    margin: 5vh 0;
}


.decorative-text {
    font-size: 2rem;
}

.brick-container {
    width:100vw;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.brick-container > * {
    max-height: 100vh;
}

/* .brick-container:nth-child(odd) {
    flex-direction: row-reverse;
} */

.brick, .brick-light{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vh 0;
}

.brick {
    background-color: var(--dark_primary);
    flex-grow: 5;
    color: white;
    width: 25%;
    max-width:100%;
    min-width: 15rem;
}

.brick p {
    text-indent: 5px;
    padding: 0 20px;
    max-height: 100%;
    overflow-y: auto;
}

.brick-light {
    /* background-color: var(--accent); */
    /* flex-shrink:0; */
    max-width:100vw;
    /* background-color: var(--primary); */
    flex-grow: 1;
    background-image: linear-gradient(to right,var(--dark_primary), var(--primary));

    overflow:hidden;
}

.brick-picture {
    width: 100%;
    height: 100%;
}

.brick-picture > img {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

main ul {
    padding: 0px;
}


h2 {
    text-align: center;
    font-size: 2rem;
}

/* End main content  */