html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Space Grotesk', sans-serif;
}

.section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 1024px) {
    .poster-wrapper img {
        max-width: 50%;
        height: auto;
        margin-top: -90px;
        margin-left: 300px;
      }
}



#home {
    background-color: #A37D4F;
    min-height: 80vh;

}

@media screen and (min-width: 1024px) {
    #home {
        min-width: 70vh;
    }
}


#about {
    background-color: #344270;
    min-height: 80vh;

}

#comics {
    background-color: #D1E7FF;
    min-height: 63vh;
}

#merch {
    background-color: #F2E8D7;
}

.poster-btn {
    position: absolute;
    display: block;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.about-btn {
    top: 49%;
    left: 18%;
    width: 25%;
    height: 10%;
}

@media screen and (min-width: 1024px) {
    .about-btn {
       width: 12%;
       height: 17%;
       left: 33%;
       top: 68%;
    }
}

.comics-btn {
    top: 49%;
    left: 47%;
    width: 33%;
    height: 10%;
}

@media screen and (min-width: 1024px) {
    .comics-btn {
       width: 17%;
       height: 17%;
       top: 68%;
       left: 48%;
    }
}

.merch-btn {
    top: 20%;
    left: 15%;
    width: 18%;
    height: 8%;
}

@media screen and (min-width: 1024px) {
    .merch-btn {

       width: 7%;
       top: 13%;
       left: 32.5%;
    }
}

.logo {
    position: absolute;
    top: 6%;
    left: 0.5%;
    width: 21%;
}

@media screen and (min-width: 1024px) {
    .logo {
       top: 0%;
    }
}



#LDabout {
    padding-top: -60px;
}




.comics-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.blurb1, .blurb2, .blurb3 {
    position: absolute;
    font-size: .7rem;
}


@media screen and (min-width: 1024px) {
    .blurb1, .blurb2, .blurb3 {
       font-size: 2.0rem;
       background-color: transparent;
    }
}

.blurb1{
    max-width: 130px;
    left: 66%;
    top: 65%;
    padding: .5rem;
}

@media screen and (min-width: 1024px){
    .blurb1{
        max-width: none;
        width: 500px;
        left: 55%;
        top: 76%;
    }
}

.blurb2 {
    max-width: 180px;
    left: 22%;
    top: 11%;
    padding: .5rem;
}

@media screen and (min-width: 1024px){
    .blurb2{
        max-width: none;
        width: 500px;
      left: 28%;
      top: 15%;
    }
}
.blurb3 {
    max-width: 180px;
    left: 50%;
    top: 40%;
    padding: .5rem;
}
@media screen and (min-width: 1024px){
    .blurb3{
        max-width: none;
        width: 500px;
        top: 42%;
        left: 53%;
    
      
    }
}










.merch-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1024px){
    #merch{
       min-height: 150vh; 
    }

    .merch-wrapper {
        width: 100%;
        min-height: 100vh; /* gives your container breathing room */
      }
}

#merchimage {
    margin-top: -60%;
}

.merch2 {
    display: none !important;
}
@media screen and (min-width: 1024px) {
.merch2 {
    display: block !important;
    position: absolute;
    width: 100%;
    top: -30%;
}}





.tshirt{
    position: absolute;
    max-width: 130px;
    font-size: 1.3rem;
    left: 5%;
    top: 50%;
    color: #A37D4F;
}

@media screen and (min-width: 1024px){
    .tshirt{
      top: 20%;
      left: 25%;
      font-size: 1.5rem;
    }
}




.print{
    position: absolute;
    max-width: 130px;
    font-size: 1.3rem;
    left: 5%;
    top: -40%;
    color: #344270;
}

@media screen and (min-width: 1024px){
    .print{
      left: 75%;
      font-size: 1.5rem;
      top: 20% !important;
    }
}






@media screen and (min-width: 1024px){
    #merchimage{
       display: none;
    }
}

.tshirtimg {
    display: none !important;
}

@media screen and (min-width: 1024px){
    .tshirtimg{
       display: block !important;
       position: absolute;
       width: 850px !important;; 
       top: -50%;
       left: -13%;
    }
}

.poster {
    display: none !important;
}

@media screen and (min-width: 1024px){
    .poster{
        display: block !important;
        position: absolute;
        width: 400px !important;; 
        top:32%;
        left: 63%;
        
    }
}