.goodcard{
            margin: 500px 200px 100px 200px;
            width: 1000px;
            
        }

        .flip-card{
            border: 2px double rgb(165, 42, 42);
            display: inline-block;
            margin-left: 25px;
            margin-top: 20px;
            max-width: 205px;
            /* height: 290px; */
            perspective:1000px;/* 這就是神奇的3D視角啦！數值範圍:500px~2000px */
            border-radius: 20px;
        }

        .flip-card-inner img{
            width: 200px;
            /* height: 290px; */
            border-radius: 20px;
        }

        .flip-card-inner{
            position: relative;
            width: 200px;
            /* height: 100%; */
            text-align: center;
            transition: transform 0.8s;/*0.8秒是讓動畫更加流暢的最佳轉場時間*/
            transform-style: preserve-3d;/* 保持3D效果的關鍵 */ 
        }

        .flip-card:hover .flip-card-inner{
            transform:rotateY(180deg);
        }

        .flip-card-front, .flip-card-back{
            position: absolute;
            width: 200px;
            /* height: 100%; */
            backface-visibility: hidden;/*此效果為翻轉前&翻轉後，背面那層是隱藏的*/
        }

        /* .flip-card-front{
            background-color: brown;
            color: azure;
        } */

        .flip-card-back{
            position: relative;
            /* background-color: gray;
            color: aquamarine; */
            transform: rotateY(180deg);/*此效果為背面那層必須在翻轉前(:hover前)先做一次翻轉，翻轉後圖面文字才會是正確的面向、方向*/
        }

        .text{
            font-family:monospace;
            text-align: center;
            color:rgb(165, 42, 42,0.8);
            padding:10px;
        }

        h2{
            margin:10px;
        }

        h3{
            margin: 10px;
        }

        .goodbuy{
            border: none;
            color:white;
            background-color:rgb(232, 96, 96,0.6);
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            padding: 6px;
            width: 180px;
            font-family:fantasy;
            border-radius: 1rem 0rem 1rem 0;
        }

        .goodbuy:hover{
            background-color:rgb(230, 151, 61,0.6);
            color:white;
        }