c-pzzo/ChristmasCard

1/* Import Google Font */2@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');3@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');4 5* {6    margin: 0;7    padding: 0;8    box-sizing: border-box;9}10  11body {12    height: 100vh;13    width: 100%;14    display: flex;15    flex-direction: column;16    background: url("assets/bg-christmasRed.jpg") center/cover;17    justify-content: center;18    align-items: center;19    font-family: sans-serif;20}21  22#flip-card {23    background-color: transparent;24    width: 500px;25    height: 400px;26    perspective: 1000px;27    margin: 10%;28}29 30@media (max-width: 600px) {31    #flip-card {32        transform: scale(0.8);33        margin: 5%;34    }35}36 37@media (max-width: 450px) {38    #flip-card {39        transform: scale(0.6);40        margin: 0;41    }42}43  44/* Keep all original styles exactly as they were */45#flip-card-inner {46    position: relative;47    width: 100%;48    height: 100%;49    text-align: center;50    transition: transform 0.6s;51    transform-style: preserve-3d;52    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);53}54  55#flip-card-front,56#flip-card-back {57    position: absolute;58    width: 500px;59    height: 400px;60    -webkit-backface-visibility: hidden;61    backface-visibility: hidden;62}63  64#flip-card-front {65    background-color: #0F5132;66    color: black;67}68  69#flip-card-back {70    color: white;71    transform: rotateY(180deg);72    background-color: #0F5132;73    position: relative;74    justify-content: center;75    align-items: center;76    z-index: 0;77}78  79#letter {80    position: absolute;81    top: 0px;82    width: 500px;83    height: 320px;84    background-color: #AC8B38;85    background-position: center;86    background-repeat: no-repeat;87    border-radius: 10px;88}89  90#envelope {91    position: absolute;92    height: 400px;93    width: 500px;94    top: 0;95    left: 0;96    border-top: 200px solid transparent;97    border-right: 200px solid #146B3A;98    border-left: 200px solid #146B3A;99    border-bottom: 200px solid #008631;100    z-index: 3;101}102  103.lid {104    position: absolute;105    top: 0;106    left: 0;107    height: 100%;108    width: 100%;109    border-right: 200px solid transparent;110    border-bottom: 200px solid transparent;111    border-left: 200px solid transparent;112    transform-origin: top;113}114  115#one {116    border-top: 200px solid #0F5132;117    transform: rotateX(0deg);118    z-index: 3;119}120  121#two {122    border-top: 200px solid white;123    transform: rotateX(90deg);124    z-index: 1;125}126  127#stamp {128    position: absolute;129    top: 10px;130    flex: 0;131}132  133#stamp img {134    float: right;135    width: 25%;136}137  138#Name {139    font-family: 'Great Vibes', serif;140    position: absolute;141    text-align: center;142    top: 50%;143    left: 15%;144    font-weight: 800;145    font-size: 70px;146    background: linear-gradient(to bottom, 147        #ffe57f 0%,148        #feb236 30%,149        #d4af37 40%,150        #ffd700 60%,151        #b8860b 80%,152        #daa520 100%153    );154    -webkit-background-clip: text;155    background-clip: text;156    -webkit-text-fill-color: transparent;157    text-shadow: 158        0px 0px 6px rgba(255, 223, 0, 0.5),159        0px 0px 30px rgba(255, 215, 0, 0.3),160        0px 0px 12px rgba(218, 165, 32, 0.3);161    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));162    animation: shine 8s infinite linear;163}164 165@keyframes shine {166    0% {167        background-position: 0% 50%;168    }169    50% {170        background-position: 100% 50%;171    }172    100% {173        background-position: 0% 50%;174    }175}176  177#companyName {178    position: absolute;179    top: -95%;180    text-align: center;181    color: white;182    font-weight: 800;183    left: 30%;184    right: 30%;185}186  187#message {188    font-family: 'Borel', cursive;189    position: absolute;190    top: 60%;191    left: 50%;192    transform: translate(-50%, -50%);193    width: 70%;194    color: #c6a505;195    font-size: 10px;196    text-transform: uppercase;197    font-weight: 100;198    letter-spacing: 2px;199    text-align: center;200    margin: 0;201}202  203#popUp {204    height: 50px;205    width: 100%;206    position: absolute;207    top: 0px;208    background-color: #555;209    z-index: 1;210    display: none;211}212  213#RSVP {214    text-align: center;215    color: white;216    font-size: 12;217    font-family: sans-serif;218    padding: 15px;219}