/*CODE COMPLETED*/

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

    /*Menu*/
    .hamburger {
        display: block;
    }

    .navbar {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(20, 20, 20, 0.95);
        overflow: hidden;
        transform: translateZ(0);
        gap: 20px;
        opacity: 0;
        transition: 0.5s ease-out;
        z-index: 20;
    }

    #check:checked~.navbar {
        border-radius: 0 0 20px 20px;
        border-bottom: solid 2px rgba(255, 255, 255, 0.15);
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.25);
        height: 250px;
        opacity: 1;
    }

    .nav-item a {
        font-size: 30px;
        background: rgba(255, 255, 255, 0);
        border: 1px transparent;
        box-shadow: none;
        opacity: 0;
    }

    .nav-item a:hover,
    .nav-item a:focus-visible {
        transform: scale(1.1);
        color: #FFF4DB;
        box-shadow: none;
        border: 1px transparent;
        border-radius: 5px;
        transition: 0.25s
    }

    #check:checked~.navbar .nav-item a {
        opacity: 1;
    }

    /*About*/
    .aboutopened {
        width: 100%;
    }

    .aboutopened p {
        width: 90%;
        max-width: 350px;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.6;
    }

    /*Links*/
    .popup a {
        width: 110px;
        height: 110px;
        gap: 0;
    }

    .popup a i {
        font-size: 40px;
    }

    .popup a .text-label {
        margin-top: 14px;
        font-size: 14px;
    }

    /*Contact*/
    .contactBorder {
        width: 101%;
        border-radius: 0;
    }

    .contactBtn2 {
        font-size: 18px;
    }

    .timezone {
        padding-top: 8px;
    }

    /*My Art*/
    .myartMask {
        top: 80px;
    }

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

    /*Commission Art*/
    .commissionartTH h1 {
        font-size: 30px;
    }

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

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

    .characterButton {
        width: 90%;
        min-width: 200px;
        max-width: 400px;
        min-height: 300px;
        max-height: 800px;
        margin-bottom: 20px;
    }

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

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

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

    .comicseriesTab {
        position: fixed;
        width: 220px;
    }

    .comicseriesLayoutPopup {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        border-left: none;
        border-right: none;
    }

    .comicseriesPopupObject1 {
        display: none;
    }

    .comicseriesPopupObject2 {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 0 10px 5px 10px;
    }

    .comicseriesPreviewTitle {
        font-size: 36px;
        padding: 15px 0 15px 0;
        text-align: center;
    }

    .comicseriesPreview {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 80px;
        padding-right: 8px;
        gap: 40px;

        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 10%,
                rgba(0, 0, 0, 1) 90%,
                rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 10%,
                rgba(0, 0, 0, 1) 90%,
                rgba(0, 0, 0, 0) 100%);
    }

    .comicseriesPreviewImg {
        width: 100%;
    }

    .comicseriesLinks a {
        padding: 10px;
    }

    /*For Mobile Responsive*/
    .readonLinks2 {
        display: block;
        color: rgba(255, 255, 255, 0.5);
        width: 100%;
        font-size: 22px;
        margin: 0;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    }

    .comicseriesLinksPopup2.webtoon {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .comicseriesLinksPopup2.webtoon a {
        display: inline-flex;
        gap: 6px;
        color: white;
        text-decoration: none;
        font-size: 24px;
        padding: 20px 80px 20px 80px;
        background: rgba(167, 255, 153, 0.05);
        border: 1px solid rgb(158, 255, 143, 0.05);
        border-radius: 5px;
        box-shadow:
            0 2px 8px rgba(158, 255, 143, 0.15),
            0 -2px 8px rgba(255, 255, 255, 0.15);
        transition: 0.75s;
    }

    .comicseriesLinksPopup2.webtoon i {
        font-size: 26px;
    }

    .comicseriesLinksPopup2.webtoon a:hover {
        color: rgb(203, 255, 199);
        background: rgba(167, 255, 153, 0.25);
        border: 1px solid rgb(158, 255, 143, 0.25);
        box-shadow:
            0 0 20px rgb(167, 255, 153);
        transform: scale(1.05);
        transition: 0.25s;
    }

    #closeComicSeriesTabPopup {
        top: 14px;
    }
}

@media (max-width: 1366px) {
    .comicseriesLayoutPopup {
        max-width: 1000px;
    }
}