/*
******
******
Index CSS
******
******
*/
 body {
            margin: 0;
            font-family: "Abril Fatface", serif;
            font-weight: 400;
            font-style: normal;
            overflow: hidden;
            background-color: #8c0c0d;
		/*background:url('https://d14k3pdvyik68f.cloudfront.net/uploads/media/9a5d3fcc18ad3e8860d87a5bc2145222.jpg');
background-size: cover;
    background-repeat: no-repeat;*/
        }

        #greeting {
            position: absolute;
            top: 2%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            text-transform: uppercase;
            color: white;
            font-size: 2vw;
        }

        #greeting .fname {
            font-family: "Corinthia", cursive;
            text-transform: none;
            font-weight: 400;
            font-style: normal;
            font-size: 3vw;
        }

        #greeting p {
            margin: 0px;
        }

        #card-container {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            max-width: 800px;
            aspect-ratio: 3 / 2;
            perspective: 1000px;
            display: none;
        }

        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1.75s;
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            text-align: center;
            color: white;
        }

        .front {
            background: url('https://d14k3pdvyik68f.cloudfront.net/uploads/media/15eee4be69ec28ca765e36b14166279a.jpg') center/cover no-repeat;
        }

        .back {
            background: url('/xmascard.jpg') center/cover no-repeat;
            transform: rotateY(180deg);
        }

        #envelope {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            max-width: 800px;
            aspect-ratio: 3 / 2;
            background: url('https://d14k3pdvyik68f.cloudfront.net/uploads/media/5545ba43f9b855e698ae5e4dbc625172.jpg') center/cover no-repeat;
            /* cursor: pointer;  */
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        #action-buttons {
            position: absolute;
            top: 93%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10; /* Ensure buttons are above snowflakes */
        }

        #action-button {
            padding: 10px 20px;
            font-size: 1rem;
            border: none;
            text-transform: uppercase;
            cursor: pointer;
            border-radius: 5px;
            background-color: #fff;
            color: #6F6F6F;
        }

        #action-button:hover {
            background-color: #6F6F6F;
          color:#fff;
        }

        #reset-button {
            padding: 0px 20px;
            font-size: 1rem;
            border: 2px solid #fff;
            background-color: transparent;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
            display: none;
        }

        #reset-button:hover {
            background-color: transparent;
            color: #6F6F6F;
            border: 2px solid #6F6F6F;
        }

        .snowflake {
            position: absolute;
            background: url('https://d14k3pdvyik68f.cloudfront.net/uploads/media/97763ffc141691b0da3b893d5acb7104.png') center/cover no-repeat;
            animation: fall linear infinite;
            z-index: 1; /* Ensure snowflakes are below buttons */
        }

        @keyframes fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 0.8;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            #greeting {
                font-size: 1.4rem;
                top:16%;
            }

            #greeting .fname {
                font-size: 2.5rem;
                line-height: 0;
            }

            #card-container {
                width: 70%;
            }

            #envelope {
                width: 70%;
            }

            #action-button, #reset-button {
                font-size: 4vw;
            }
        }

        @media (max-width: 480px) {
            #greeting {
                font-size: 5vw;
            }

            #greeting .fname {
                font-size: 7vw;
            }

            #card-container {
                width: 80%;
            }

            #envelope {
                width: 80%;
            }

          /*  #action-button, #reset-button {
                font-size: 5vw;
            }*/
        }