.landing{
    display:grid;
    display:-ms-grid;
    display:-moz-grid;
    grid-template-columns: max-content 50%;
    grid-template-rows: auto;
    justify-content:center;
    /* padding:1rem;
    text-align:end; */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(40, 40, 40, 0)), url("../public/t-shirts/luke-chesser-tgrBcf7S_dY-unsplash.jpg");
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height:82vh;
    transition:height 0.5s;
}

.landing > div:first-of-type{
    /* align-self:center; */
    /* border:3px solid black; */
    width:500px;
    /* height:100%; */
}
.landing > div:first-of-type{
    object-fit: contain;
}

.landing > div:last-of-type{
    /* align-self:end; */
    display:grid;
    display:-ms-grid;
    display:-moz-grid;
    grid-template-columns:auto;
    grid-template-rows:max-content max-content max-content;
    align-content: center;
    text-align: left;
    height:80vh;
}
.landing > div:last-of-type h1{
    font-size:3rem;
    font-family: cursive, 'Times New Roman', Times, serif;
    color:white;
    margin-bottom:1rem;
}
.landing > div:last-of-type p{
    font-size:1.4rem;
    color:white;
    margin-bottom:2rem;
}
.responsive{
    display:none;
    margin:3rem 1rem 5rem 1rem;
}
@media (max-width:500px){
    .escape{
        display:none;
    }
}
.responsive p{
    font-size:1.4rem;
    color:black;
    margin-bottom:2rem;
}
.landing > div:last-of-type button, .responsive button{
    padding:1rem 2rem;
    border-radius:5px;
    /* box-shadow:2px 2px 3px rgba(210, 210, 210, 0.9); */
    border:none;
    background-color:white;
    display:inline-block;
    width:max-content;
    font-weight:450;
    color:white;
    background-color:rgb(38, 65, 246);
    /* margin:1rem auto 2rem auto; */
}
.landing > div:last-of-type button:hover, .section button:hover, .responsive button:hover{
    cursor:pointer;
    background-color:rgb(17, 48, 244);
}
@media (max-width:1290px){
    .landing > div:last-of-type h1{
        font-size:2.6rem;
    }
}
@media (max-width:1290px){
    .landing > div:first-of-type{
        width:450px;
    }
    .landing{
        grid-template-columns:max-content 60%;
    }
}
@media (max-width:1200px) and (min-width:1100px){
    .landing{
        grid-template-columns:max-content 55%;
    }
}

@media (max-width:1100px) and (min-width:817px){
    .landing > div:last-of-type{
        position:relative;
        right:5rem;
        top:5rem;
    }
    .landing > div:last-of-type p{
        color:black;
    }
}
@media (max-width:817px){
    .landing > div:last-of-type p, .landing > div:last-of-type button{
        display:none;
    }
    .responsive{
        display:block;
    }
}
@media (max-width:817px){
    .landing{
        display:block;
        position:relative;
    }
    .landing > div:first-of-type{
        width:500px;
        margin:auto;
    }
    .landing > div:last-of-type{
        position:absolute;
        bottom:0rem;
        left:1rem;
    }
}

@media (max-width:500px){
    .landing > div:first-of-type{
        width:100vw;
        height:100%;
    }
    .landing > div:first-of-type img{
        object-fit:cover;
    }
}
section:nth-of-type(2){
    padding:1.5rem;
    margin:auto;
}

.section{
    margin:1rem 0px;
}
.section button{
    color:white;
    background-color:rgb(38, 65, 246);
}

section h2{
    text-align:center;
    font-weight:500;
    margin-bottom:1rem;
    font-size:2.5rem;
}
@media (max-width:768px){
    section h2{
        font-size:2.2rem;
    }
}
@media (max-width:425px){
    section h2{
        font-size:1.9rem;
    }
}
.content-left, .content-right{
    width:1100px;
    display:grid;
    display:-ms-grid;
    display:-moz-grid;
    justify-content: center;
    margin:auto;
    overflow:hidden;
}
.content-left{
    grid-template-columns: auto max-content;
}
.content-right{
    width:1200px;
    grid-template-columns:max-content auto;
}
.content-left > div:first-of-type, .content-right > div:last-of-type{
    align-self:center;
}
.content-left > div:last-of-type{
    width:500px;
}
.content-right > div:first-of-type{
    width:510px;
}
.content-right > div:last-of-type{
    margin-left:3rem;
}
.content-left h2{
    text-align: left;
}
.content-right h2{
    text-align:left;
}
.content-left ol, .content-right ol{
    margin-left:2rem;
}
.content-left ol li, .content-left p, .content-right ol li, .content-right p{
    font-size:1.3rem;
}

@media (max-width:1344px){
    .content-left{
        width:1000px;
    }
    .content-right{
        width:1000px;
    }
}
@media (max-width:1216px){
    .content-left{
        width:900px;
    }
    .content-left > div:last-of-type{
        width:450px;
    }
    .content-right > div:last-of-type{
        margin-left:0rem;
    }
    .content-right > div:first-of-type{
        width:420px;
    }
}
@media (max-width:1144px){
    .content-left{
        width:900px;
        margin:auto;
    }
}
@media (max-width:1023px){
    .content-right{
        grid-template-columns:auto;
        grid-template-rows:auto auto;
        width:auto;
    }
    .content-right > div:last-of-type{
        grid-area:1/1/2/2;
        width:80%;
        justify-self:center;
    }
    .content-right > div:last-of-type div:last-of-type, .content-right > div:last-of-type h2{
        text-align:center;
    }
    .content-right > div:first-of-type{
        grid-area:2/1/3/2;
        justify-self: center;
    }
}
@media (max-width:949px){
    .content-left{
        grid-template-columns:auto;
        grid-template-rows:auto auto;
        margin:2rem 0rem;
        width:auto;
    }
    .content-left > div:first-of-type{
        width:80%;
        justify-self:center;
    }
    .content-left > div:first-of-type h2{
        text-align:center;
    }
    .content-left > div:first-of-type div:last-of-type, .content-left > div:first-of-type h2{
        text-align:center;
    }
    .content-left > div:last-of-type{
        justify-self:center;
    }
}
@media (max-width:550px){
    .content-left > div:first-of-type, .content-right > div:last-of-type{
        width:auto;
        margin:0rem 2rem;
    }
    .content-right >, .content-left{
        width:auto;
    }
}
@media (max-width:425px){
    .content-left, .content-right{
        width:auto;
    }
    .content-right > div:last-of-type{
        margin:0rem 0.5rem;
    }
    .content-left > div:first-of-type{
        margin:0rem 1.5rem;
    }
}
@media (max-width:468px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:400px;
    }
}
@media (max-width:424px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:380px;
    }
}
@media (max-width:390px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:360px;
    }
}
@media (max-width:370px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:340px;
    }
}
@media (max-width:350px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:320px;
    }
}
@media (max-width:330px){
    .content-left > div:last-of-type, .content-right > div:first-of-type{
        width:300px;
    }
}
section p{
    margin-bottom:1rem;
}

section h3{
    font-size:1.5rem;
    font-weight:500;
    margin:1rem 0rem;
}
section ol{
    margin-left:1rem;
    margin-bottom:1rem;
}
section ol li{
    margin-bottom:0.5rem;
}

.introduction{
    max-width:1200px;
    margin:auto;
    /* border:1px solid rgb(210, 210, 210); */
    border-radius:5px;
}
.introduction > a{
    margin-bottom:1rem;
    display:inline-block;
    font-size:1.1rem;
}

.introduction > div:first-of-type > h1{
    color:black;
    font-weight:600;
    font-size:1.7rem;
    margin:1rem auto 1rem 0.5rem;
    /* text-align:center; */
    /* border-bottom:2px solid rgb(245, 142, 8); */
}
.introduction > div:first-of-type{
    border-left:3px solid gold;
}
.introduction p{
    margin-bottom:1rem;
}
.introduction > p:first-of-type{
    font-weight:500;
    font-size:1.4rem;
    margin-bottom:1rem; 
}

.introduction p:nth-of-type(2){
    font-weight:500;
    font-size:1.5rem;
}


/*.introduction > p:last-of-type{
    border-left:2px solid rgb(245, 142, 8);
    padding:1rem 0rem 1rem 0.5rem;
    background-color:white;
}*/

section:not(:first-of-type) button{
    padding:1rem 2rem;
    border-radius:5px;
    box-shadow:2px 2px 3px rgba(210, 210, 210, 0.9);
    border:none;
    /* background-color:white; */
    margin:1rem auto 2rem auto;
}

.pricing > div:last-of-type{
    text-align:center;
}

.contact_us{
    background-color:rgb(0, 102, 255);
    color:white;
}
.what_we_print > h2{
    margin-bottom: 2rem;
}
.what_we_print > div:last-of-type{
    display:grid;
    display:-ms-grid;
    display:-moz-grid;
    grid-template-columns:max-content max-content;
    grid-template-rows: auto;
    justify-content: space-between;
    margin:1.5rem 0rem;
}
.what_we_print > P{
    margin:1rem 0rem 2rem 0rem;
}
.article{
    max-width:1000px;
    margin:4rem auto;
}
@media (max-width:1132px){
    .article{
        max-width:800px;
    }
}
@media (max-width:905px){
    .article{
        width:auto;
        margin:4rem 4rem;
    }
}
@media (max-width:680px){
    .article{
        margin:4rem 2rem;
    }
}
@media (max-width:425px){
    .article{
        margin:4rem 1rem;
    }
}
.article > h2{
    margin-bottom:2rem;
}
.article p, .article li{
    font-size:1.3rem;
}
.article p{
    margin-bottom:2rem;
}
.article h3{
    font-size:2rem;
}
.article ol{
    margin-left:3rem;
}
@media (max-width:425px){
    .article ol{
        margin-left:2rem;
    }
}
.article li{
    margin-bottom:1rem;
}