:root {
            --primary-color: #6c5ce7; /* A vibrant, modern purple */
            --secondary-color: #0984e3; /* A bright blue */
            --accent-color: #ffeaa7; /* A soft yellow for contrast */
            --text-color-dark: #2d3436;
            --text-color-light: #fdfdfd;
            --bg-light: #fdfdfd;
            --bg-dark: #f0f2f5;
            --shadow-light: rgba(0, 0, 0, 0.08);
            --shadow-medium: rgba(0, 0, 0, 0.15);
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-color-dark);
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .header {
            background-color: var(--primary-color);
            background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: var(--text-color-light);
            padding: 3rem 0;
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 20px var(--shadow-medium);
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            animation: moveGradient 15s infinite alternate;
        }

        @keyframes moveGradient {
            0% { transform: translate(0, 0); }
            100% { transform: translate(25%, 25%); }
        }

        .header h1 {
            margin: 0;
            font-size: 3.2rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 2px 2px 4px var(--shadow-medium);
            position: relative;
            z-index: 1;
        }

        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-top: 0.8rem;
            position: relative;
            z-index: 1;
        }

        .container {
            width: 80%;
            max-width: 1200px;
            margin: 0.5rem auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
            gap: 2.5rem;
            justify-content: center;
        }

        .flashcard-wrapper {
            perspective: 1000px;
            height: 380px;
			width: 240px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease-in-out;
        }

        .flashcard-wrapper:hover {
            transform: translateY(-10px);
        }

        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            border-radius: 15px;
            box-shadow: 0 10px 30px var(--shadow-light);
        }

        .flashcard.flipped {
            transform: rotateY(180deg);
        }

        .flashcard-front, .flashcard-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            box-sizing: border-box;
            background-color: var(--bg-light);
            color: var(--text-color-dark);
            box-shadow: 0 5px 15px var(--shadow-light);
        }

        .flashcard-front {
            background-color: var(--bg-light);
            color: var(--primary-color);
            border: 5px solid var(--primary-color);
            overflow: hidden; /* To keep image inside */
        }

        .flashcard-front img {
            max-width: 90%; /* Adjust image size */
            max-height: 70%; /* Adjust image size */
            object-fit: contain; /* Ensure image fits without cropping */
            margin-bottom: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .flashcard-front .card-title {
            font-size: 1.8rem; /* Slightly smaller to accommodate image */
            font-weight: 700;
            margin-top: 0.5rem;
            color: var(--primary-color);
        }

        .flashcard-front::before {
            content: 'Click to Reveal!';
            position: absolute;
            bottom: 15px;
            font-size: 0.9rem;
            color: rgba(0,0,0,0.4);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }

        .flashcard-back {
            background-color: white;
            color: white;
            transform: rotateY(180deg);
            font-size: 1.1rem;
            line-height: 1.8;
            border: 10px solid var(--secondary-color);
        }

        .flashcard-back strong {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            display: block;
            color: white);
        }

        .footer {
            width: 100%;
            text-align: center;
            padding: 1.5rem 0;
            background-color: var(--text-color-dark);
            color: var(--bg-light);
            margin-top: auto;
            font-size: 0.9rem;
            box-shadow: 0 -4px 15px var(--shadow-light);
        }
/* Left vertical banner */
    .left-banner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100%;
      background-color: orange;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-rl; /* vertical text orientation */
      text-orientation: mixed;
      font-size: 20px;
    }
    /* Right vertical banner */
    .right-banner {
      position: fixed;
      top: 0;
      right: 0;
      width: 100px;
      height: 100%;
      background-color: orange;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 20px;
    }
    /* Main content with margin to avoid overlap */
    .content {
      margin-left: 100px; /* same as left-banner width */
      margin-right: 100px; /* same as right-banner width */
      padding: 20px;
    }
	
	.beautiful-button {
    background-color: #3498db; /* Blue background */
    color: white;              /* White text */
    padding: 12px 24px;        /* Padding */
    border: none;              /* Remove default border */
    border-radius: 8px;        /* Rounded corners */
    font-size: 18px;           /* Larger text */
    font-weight: bold;         /* Bold text */
    cursor: pointer;           /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  }
  .beautiful-button:hover {
    background-color: #2978b5; /* Darker blue on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Larger shadow on hover */
  }
  .beautiful-button:active {
    background-color: #1f5c88; /* Even darker blue on click */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Smaller shadow on click */
  }