/*prevent unncecessary downloads (faster load time)*/

@media (max-width: 560px) {
    .imagepc,
    .imagesp {
        content-visibility: hidden;
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .imagepc,
    .tiny {
        content-visibility: hidden;
    }
}

@media (min-width: 901px) {
    .imagesp,
    .tiny {
        content-visibility: hidden;
    }
}

/*prevent unncecessary downloads (faster load time)*/


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

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

.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;
}

.imagepc {
    display: none;
}

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

.description {
    margin: auto;
    width: 85%;
    margin-bottom: 30px;
}

.fig {
    padding-bottom: 200px;
}

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

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

.imagesp img {
    width: 85%;
}

.imagesp video {
    width: 85%;
}

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

.para {
    line-height: 2em;
}

/*title colors*/
#booklet {
    color: #ef85a9;
}
#digitalads {
    color: #cd43a3;
}

#comics {
    color: #f09057;
}
#flyer {
    color: #0080b1;
}

#boothdesign {
    color: #009fe8;
}
#videoediting {
    color: #25b6b9;
}

#media {
    color: #4967c7;
}
#mascot {
    color: #00913a;
}

#banner {
    color: #db4f4d;
}

#powerpoint {
    color: #e08048;
}
#video2 {
    color: #8fb04e;
}


/*title colors*/


/* watch video button  */

.seemore:hover {
    cursor: pointer;
}
#videobutton {
    font-style: italic;
    color: #565656;
}


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

.seemore img {
    width: 170px;
}

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


/* watch video button  */



/*view my artworks*/

.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;
}

/*view my artworks*/


@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%;
    }


    .sub {
        font-size: 3.1em;
        line-height: 1.2em;
        margin-bottom: 60px;
    }

    .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;
    }



}