/*------------------- Universal styles ---------------------------*/
body{
    background-color: rgba(219, 105, 80, 1);

}
img{
    max-height: 100%;
    max-width: 100%;
    border-radius: 2px;
}

.hero-container-fire h1{
    text-shadow: 2px 1px 0 rgba(28, 49, 68, .5),
                 1px 2px 0 rgba(28, 49, 68, .5),
                 2px -1px 0 rgba(28, 49, 68, .5),
                 -2px 1px 0 rgba(28, 49, 68, .5),
                 2px -3px 0 rgba(28, 49, 68, .5),
                 -2px 2px 0 rgba(28, 49, 68, .5);



}

.text-and-img-grid h1{
     text-shadow: 3px 5px 0 rgba(28, 49, 68, .3),
                  2px 4px 0 rgba(28, 49, 68, .3);
     color: rgb(255, 240, 128);

}

.text-and-img-grid{
    display: grid;
    display: -ms-grid;
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 15% 18% 18% 18% 18% 18%;
    background-color: rgba(219, 105, 80, .89);
    z-index: 2;
    margin-top: -12em;
    padding: 0 6% 0 6%;
}

.flex-container :nth-child(4) {
  color: rgba(255, 183, 81, 1);
  font-size: 1.9em;
}

#footer-container {
  height: 20vh;
}


/* ------------------------hero------------------------------- */

.hero-container-fire{
    background-image: url('../images/2fire.jpg');
    background-size: cover;
    background-position-y: 30%;
    height: 97vh;
}

.quote{
    float: left;
    margin-top: 12%;
}

/* -----------------------text--------------------------------- */

.text-container-one{
    grid-column: 2 / span 3;
    grid-row: 1;
    padding: 10%;
}

.header-two{
    grid-column: 1/ span 2;
    grid-row: 3;
    margin-top: 0;
    margin-bottom: 15%;
    align-self: start;
}

.text-container-two{

    grid-column: 3/span 2;
    grid-row: 4;
    padding: 10% 3%;

}

.text-container-three{
    grid-column: 1;
    grid-row: 6;
    padding: 10% 0;
}

/* -----------------------images------------------------------- */

.max{
    grid-column:1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

.zhi {
    grid-column: 3/ span 2;
    grid-row: 2 / span 2;
}

.yin {
    grid-column: 1/ span 2;
    grid-row: 4 / span 2;
}

.zhu{
    grid-column: 4;
    grid-row: 5 / span 2;
    margin: 10% 0;
}

@media only screen and (max-width: 414px) and (max-height: 823px), screen and (max-width: 823px) and (max-height: 414px){
  
    .text-and-img-grid {
        grid-template-columns: 100%;
        grid-template-rows: 9% 13% 13% 13% 13% 13% 13% 13%;
        background-color: rgba(219, 105, 80, .89);
        z-index: 2;
        margin-top: -2em;
        padding: 0 6% 0 6%;
    }

/* ------------------------hero------------------------------- */

    .hero-container-fire{
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;

    }

/* -----------------------text--------------------------------- */

    .text-container-one {
        grid-column: 1;
        grid-row: 1;
        padding: 10%;
    }

    .header-two {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0;
        margin-bottom: 15%;
        align-self: start;
    }

    .text-container-two {
        grid-column: 1;
        grid-row: 5;
        padding: 10% 3%;
    }

    .text-container-three {
      grid-column: 1;
      grid-row: 7;
      padding: 10% 0;
    }

/* -----------------------images------------------------------- */

    .max{
        grid-column:1;
        grid-row: 2;
        align-self: center;
        justify-self: end;
    }

    .zhi {
        grid-column: 1;
        grid-row: 4;
    }

    .yin {
        grid-column: 1;
        grid-row: 6;
    }

    .zhu{
        grid-column: 1;
        grid-row: 8;
        margin: 10% 0;
    }

}