/*CODE COMPLETED*/

/*Responsive CSS*/
@media (max-width: 550px) {

    /*Home*/
    .homebuttons a {
        width: clamp(150px, 90vw, 1000px);
    }

    .links {
        height: 88px;
        background-color: rgba(0, 0, 0, 0.15);
        border-top: solid 1px rgba(255, 255, 255, 0.05);
    }

    .links a {
        width: 140px;
        height: 68px;
        opacity: 1;
    }

    .links i {
        font-size: 28px;
    }

    .text-label {
        display: block;
        margin-left: 10px;
    }

    .footer {
        background-color: rgba(0, 0, 0, 0.15);
        border-top: solid 1px rgba(255, 255, 255, 0.05);
    }

    /*About*/
    .aboutAnimationLayer {
        height: clamp(87%, 158% - 75vw, 88%);
    }

    .aboutopened {
        width: 100%;
    }

    .aboutopened p {
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.6;
    }

    /*My Art*/
    .myartMask {
        padding: 30px 20px;
    }

    .galleryItem {
        justify-self: center;
        max-width: 100%;
    }

    .myartImgLayoutPopup {
        width: 100%;
        max-width: 1000px;
        background: rgb(184, 209, 255, 0.05);
        border-left: 2px solid rgba(184, 209, 255, 0);
        border-right: 2px solid rgba(184, 209, 255, 0);
    }

    #artPopupImg {
        max-height: 50%;
    }

    #artPopupInfo {
        bottom: 10%;
    }

    /*Character Design*/
    .characterdesignTH h1 {
        font-size: 30px;
        margin-left: 10px;
    }

    .characterLayout {
        padding: 0 80px 0 80px;
        gap: 40px
    }

    .characterLayoutPopup {
        padding: 0 12px 0 12px;
    }

    .charDesc {
        padding: 0 22px 0 22px;
    }

    /*Comic Series*/
    .comicseriesTH h1 {
        font-size: 30px;
    }
}

@media (max-width: 820px) {
    .links {
        justify-content: flex-start;
    }
}