* { 
    box-sizing: border-box;
    max-width: 100%;
}
body {
    background: #d4e9f7;
    background: linear-gradient(180deg, #d4e9f7 0%, #ffffff 100%) no-repeat fixed;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    color: #4a5568;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden; /* Prevents side-scrolling on S21+ */
}
header { text-align: center; padding: 20px 10px; }
.logo { max-width: 180px; height: auto; }
nav a { margin: 0 10px; text-decoration: none; color: #74b9ff; font-weight: bold; font-size: 0.9rem; }

.card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 88%; /* Leaves a nice blue gap on the sides */
    max-width: 350px; /* Forces it even narrower for the S21+ */
    text-align: center;
    margin: 15px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow-wrap: break-word; /* Forces the long verse to stay inside */
}

.hashtag { color: #74b9ff; font-weight: bold; margin-bottom: 5px; font-size: 0.8rem; }
.label { letter-spacing: 2px; color: #a4b0be; font-size: 0.7rem; }
.verse { 
    font-family: serif; 
    font-style: italic; 
    font-size: 1rem; 
    line-height: 1.6; 
    color: #2f3542; 
    margin: 15px 0; 
}
.reference { font-weight: bold; font-size: 0.9rem; }
hr { border: 0; border-top: 1px solid #eee; margin: 15px 0; }

.social-links { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.btn { background: #74b9ff; color: white; padding: 10px 12px; border-radius: 5px; text-decoration: none; font-size: 0.75rem; }
footer { text-align: center; padding: 30px; color: #a4b0be; font-size: 0.7rem; }

@media screen and (max-width: 400px) {
    .card { width: 92%; }
    .verse { font-size: 0.95rem; }
}