/* General Styles */

body {
    text-align: center;
 }
.content {
    padding: 20px;
}

h2, h3, h1 {
    text-align: center;
}

.alphabet-tittle-up {
    font-size: 3rem;  
    font-weight: bold;
    text-align: center;
    color: #ff5151;
    text-shadow: 12px 12px 12px #2e0319;
    margin: 2%;
}

.alphabet-tittle-down {
    font-size: 2rem;  
    font-weight: bold;
    text-align: center;
    color: #ff5151;
    margin: 5%;
}

.alphabet {
    color: #ffffff;
}

.alphabet-icon {
    font-size: 5rem;  /* Make Kanji larger */
    font-weight: bold;
    text-align: center;
    color: #2f2f2f;
    text-shadow: 2px 2px #ffffff;
    margin-bottom: -7%;
}


p {
    color: #ffffff;
    line-height: 1.6;
}

/* Card Styles */

.alphabet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.alphabet-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(10px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
    width: 120px;
    text-align: center;
    transition: transform 0.2s ease-in-out;
}


.alphabet-card:hover {
    transform: scale(3.3);
    z-index: 3;
}

.character {
    font-size: 32px;
    font-weight: bold;
    /*color: #fc8585;
    text-shadow: 2px 2px red;*/
    color: #2f2f2f;
    text-shadow: 1px 1px #ffffff;
}

.meaning {
    font-size: 16px;
    color: #ffa6a6;
    margin-top: 5px;
}

.romaji {
    font-size: 14px;
    color: #ffffff;
    margin-top: 3px;
}

/* Button Styles */
.alphabet-buttons {
    margin-top: 20px;
}

.alphabet-btn {
    display: inline-block;
    text-decoration: none;
    background: #ff6b81;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 5px;
    transition: background 0.3s;
}

.alphabet-btn:hover {
    background: #e84118;
}

/* Columns alphabet */

.alphabet-parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
    grid-template-rows: repeat(5, 1fr); /* 5 rows */
    gap: 30px;
}

.alphabet-div1, 
.alphabet-div2, 
.alphabet-div3 {
    margin: 8%;
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
    text-align: justify;
}

/* Responsive layout for screens smaller than 768px (tablets & phones) */
@media (max-width: 768px) {
    .alphabet-parent {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-template-rows: auto;
        gap: 15px;
    }

    .alphabet-div1, 
    .alphabet-div2, 
    .alphabet-div3 {
        grid-column: span 1 / span 1; /* Each div takes 1 column */
        grid-row: auto;
    }
}

/* Responsive layout for screens smaller than 480px (mobile phones) */
@media (max-width: 480px) {
    .alphabet-parent {
        grid-template-columns: 1fr; /* 1 column */
        gap: 10px;
    }

    .alphabet-div1, 
    .alphabet-div2, 
    .alphabet-div3 {
        grid-column: span 1 / span 1; /* Full width */
        text-align: center; /* Center content */
    }
}