* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

.titleCode {
    display: flex;
    flex-direction: row;
    background-image: linear-gradient(to right, red, yellow);
    align-items: center;
}

.listcode {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}

    .listcode .list-content {
        width: 100%;
        position: relative;
        margin: 5px 5px;
    }

        .listcode .list-content .list-box1 label {
            font-size: 10px;
            color: blue;
        }

        .listcode .list-content .list-box1 img.list-imgbook {
            max-width: 200px;
            min-width: 60px;
        }

        .listcode .list-content .list-box1 img.list-play {
            width: 15px;
            position: absolute;
            top: 2%;
            right: 1%;
            cursor: pointer;
            opacity: .3;
        }

            .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .listcode .list-content .list-box2 {
            position: relative;
            max-width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 10px;
                color: #0094ff;
            }

            .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .listcode .list-content .list-box2 .list-dollar img {
                    width: 14px;
                }

            .listcode .list-content .list-box2 .list-price {
                font-size: 13px;
                color: red;
            }

        .listcode .list-content .addtocard {
            text-align: right;
            font-size: 10px;
            margin: 5px;
        }

            .listcode .list-content .addtocard a {
                padding: 2px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-style: italic;
                border-radius: 2px;
            }

                .listcode .list-content .addtocard a:hover {
                    color: yellow;
                }
.open-gif {
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 1;
}

    .open-gif .gif-main {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 60%;
    }

        .open-gif .gif-main .gif-close{
            position:absolute;
            top: 10px;
            right: 20%;
            background:blue;
            padding: 10px;
            color:white;
            cursor:pointer;
        }
            .open-gif .gif-main .gif-close:hover{
                color:red;
            }
            .open-gif .gif-main .p-gif-title {
                background: #0094ff;
                color: wheat;
                padding: 10px;
            }
        .open-gif .gif-main .gif-content{
            margin:auto;
            overflow:hidden;
        }
        .open-gif .gif-main .gif-content #gif-open {
            width: 100%;
            height: auto;
        }