{} *{} 
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 /* --- Brand Colours & General Styling --- */ :root { --brand-blue: #373dff; --brand-red-pink: #fc0767; --brand-yellow: #FFC100; --background-color: #f4f7f9; --card-background: #ffffff; --text-color: #333333; --light-text-color: #666666; --border-color: #e0e0e0; --shadow: 0 4px R15px rgba(0, 0, 0, 0.08); } body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; /* Increased top padding from 2rem to 4rem */ padding: 4rem 1rem 2rem 1rem; text-align: center; } /* --- Header & Intro --- */ header { max-width: 800px; margin: 0 auto 3rem auto; } header h1 { font-size: 2.5rem; font-weight: 700; color: var(--brand-blue); margin-bottom: 0.5rem; } header p { font-size: 1.1rem; color: var(--light-text-color); line-height: 1.6; } /* --- Poll Form & Card Layout --- */ .poll-container { max-width: 1200px; margin: 0 auto; } .charity-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; } .charity-input { position: absolute; opacity: 0; width: 0; height: 0; } .charity-card { background-color: var(--card-background); border-radius: 12px; padding: 2rem; text-align: left; border: 2px solid var(--border-color); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; /* Ensures padding is included in height */ } .charity-card-content { flex-grow: 1; /* Makes content fill available space */ } .charity-card:hover { transform: translateY(-5px); border-color: var(--brand-red-pink); } .charity-input:checked + .charity-card { border-color: var(--brand-red-pink); box-shadow: 0 0 15px rgba(252, 7, 103, 0.4); transform: translateY(-5px); } .charity-card .checkmark { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background-color: var(--brand-yellow); color: var(--text-color); font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transform: scale(0); transition: transform 0.2s ease-in-out; } .charity-input:checked + .charity-card .checkmark { transform: scale(1); } .charity-logo { max-height: 50px; margin-bottom: 1.5rem; object-fit: contain; display: block; align-self: flex-start; } .charity-card h2 { margin-top: 0; font-size: 1.5rem; color: var(--brand-blue); } .charity-card p { color: var(--light-text-color); line-height: 1.7; font-size: 0.95rem; } .charity-card a { color: var(--brand-red-pink); text-decoration: none; font-weight: 600; margin-top: 1rem; /* Pushes link to the bottom */ } /* --- Submit Button --- */ .submit-vote-btn { /* Applying the gradient */ background-image: linear-gradient(to right, var(--brand-blue) 0%, var(--brand-red-pink) 100%); color: white; font-size: 1.2rem; font-weight: 600; padding: 1rem 3rem; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--shadow); background-size: 200% auto; } .submit-vote-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* --- Results Section --- */ .results-container { max-width: 800px; margin: 3rem auto; text-align: left; } .progress-bar { background-image: linear-gradient(to right, var(--brand-blue) 0%, var(--brand-red-pink) 100%); height: 100%; width: 0; /* Starts at 0, width set by JS */ border-radius: 20px; transition: width 1s ease-in-out; } /* Other minor styles from previous code */ .result-bar{margin-bottom:1.5rem}.result-info{display:flex;justify-content:space-between;margin-bottom:.5rem;font-weight:600}.progress-bar-bg{background-color:#e0e0e0;border-radius:20px;height:25px;overflow:hidden}footer{margin-top:4rem;color:#999;font-size:.9rem}.hidden{display:none} /* --- Responsive Design --- */ @media (max-width: 992px) { .charity-cards { grid-template-columns: 1fr; } } @media (max-width: 576px) { header h1 { font-size: 2rem; } }