@media screen and (max-width:560px) {
    .imagepc,
    .imagesp {
        display: none;
    }
    .tiny {
        display: block;
        text-align: center;
    }
    .tiny img {
        width: 85%;
        margin-bottom: 30px;
    }
}

@media screen and (min-width:561px) {
    .tiny {
        display: none;
    }
}


/*section introduction */

.introductionpc {
    display: none;
}

.introduction {
    background-image: url(./images/SPworkstitlebackground.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 50px 50px;
}



.worksintro {
    text-align: center;
    line-height: 1.5em;
    font-size: 1.5em;
    padding: 80px 0px 100px 0px;
    font-family: "borax-variable", sans-serif;
    font-variation-settings: "wght" 400;
}



/* works section  */

.imagepc {
    display: none;
}

.works {
    padding-top: 90px;
    margin-bottom: 100px;
}

.description {
    margin: auto;
    width: 85%;
}

.fig {
    padding-bottom: 200px;
}

.fig img {
    border-radius: 10px;
}

.imagesp {
    text-align: center;
    margin-bottom: 30px;
}

.imagesp img {
    width: 85%;
}

.sub {
    font-size: 3em;
    font-weight: bold;
margin-bottom: 30px;
}

.para {
    line-height: 2em;
}


#booklet {
    color: #ef85a9;
}

#comics {
    color: #f09057;
}


.comicspara {
    line-height: 1.5em;
}



.comicspara {
    margin-top: 30px;
}

#flyer {
    color: #0080b1;
}

/*.subtitle {
    font-family: "borax-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 25px;
    color: #f29700;
    text-decoration: underline #ffef57 4px solid;
    text-underline-offset: 7px;
}*/

#boothdesign {
    color: #009fe8;
}

/*.boothdsubesign {
    font-family: "borax-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 25px;
    color: #e74291;
    text-decoration: underline #ffef57 4px solid;
    text-underline-offset: 7px;
}*/

/*.showdate {
    font-size: 12px;
}*/

#videoediting {
    color: #25b6b9;
}


/* seemore button  */

.seemore:hover {
    cursor: pointer;
}

.clear {
    overflow: hidden;
}

.seemore {
    float: right;
    padding: 10px 20px;
    margin-bottom: 100px;
}

.seemore img {
    width: 170px;
}

.seemore:hover {
    transform: scale(1.1);
}


/* seemore button  */



#mascot {
    color: #00913a;
}

#banner {
    color: #db4f4d;
}

#illustrations {
    color: #5878e0;
}

#traditionalarts {
    color: #afad52;
}

.end {
    padding: 0px 50px;
    color: #a58957;
    font-size: 1.2em;
    margin-bottom: 100px;
    text-align: center;
}

.end p {
    line-height: 2em;
}

.end p a {
    font-weight: bold;
    font-size: 1.4em;
    color: #a58957;
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-color: rgb(255, 171, 171);
    text-decoration-thickness: 3px;
}

@media screen and (min-width:900px) {
    .introduction {
        display: none;
    }
    .introductionpc {
        background-image: url(./images/PCworkstitlebackground.jpg);
    }
    .introductionpc {
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        padding: 120px 100px;
        margin: auto;
    }

    .introductionpc .workstitle img {
        width: 25%;
    }
    .explanation {
        display: flex;
        width: 80%;
        margin: auto;
        padding: 50px;
    }
    
    
  
    .sub {
        font-size: 3.1em;
        line-height: 1.2em;
        margin-bottom: 60px;
    }
    .imagepics-eppc img {
        width: 400px;
        border-radius: 10px;
    }
    .end {
        font-size: 1.3em;
    }
    .imagesp {
        display: none;
    }
    .imagepc {
        display: block;
    }
    .fig {
        display: flex;
        margin: 0px 50px 0px;
    }
    .imagepc {
        width: 60%;
        height: 100%;
    }
    .description {
        margin: 0px 0px 0px 30px;
        width: 100%;
    }
}

@media screen and (min-width:1200px) {
    .sub {
        font-size: 4em;
        margin-bottom: 80px;
    }
    .introductionpc {
        padding: 150px 100px 50px;
    }

    .imagepics-eppc img {
        width: 550px;
    }

}