/* =======================================================
   ZARA K. REED
   LANGUAGE EDUCATION
   ======================================================= */

*{
box-sizing:border-box;
}

body{

margin:0;
padding:0;

background:#0d0d0d;
color:#e6e6e6;

font-family:Georgia, serif;

line-height:1.8;

}

a{

color:#ffb703;
text-decoration:none;

transition:.25s;

}

a:hover{

color:#ffd166;

}

img{

max-width:100%;
display:block;

}
/* =======================================================
   PAGE CONTAINER
   ======================================================= */

.language-container{

max-width:950px;

margin:60px auto;

padding:0 20px;

}



/* =======================================================
   SECTION CARDS
   ======================================================= */

.language-card{

background:#161a22;

border:1px solid #232936;

border-radius:12px;

padding:28px;

margin-bottom:30px;

transition:.25s;

}

.language-card:hover{

border-color:#ffb703;

transform:translateY(-2px);

}



/* =======================================================
   SECTION TITLES
   ======================================================= */

.section-title{

color:#ffb703;

margin-top:0;

margin-bottom:20px;

font-size:1.4rem;

font-weight:700;

}

/* =======================================================
   PAGE HEADER
   ======================================================= */

.language-header{

max-width:950px;

margin:0 auto 50px;

padding:0 20px 25px;

border-bottom:1px solid #232936;

}

.back-link{

display:inline-block;

margin-bottom:22px;

font-weight:bold;

font-size:.95rem;

}

.language-title{

margin:0;

color:#ffffff;

font-size:2.8rem;

font-weight:700;

line-height:1.2;

}

.language-subtitle{

margin-top:12px;

color:#8892b0;

font-size:1.05rem;

}

.word-type{

display:inline-block;

margin-top:22px;

padding:7px 14px;

background:#ffb703;

color:#111111;

font-weight:bold;

border-radius:999px;

font-size:.9rem;

letter-spacing:.5px;

}

/* =======================================================
   WORD INFORMATION
   ======================================================= */

.word-pronunciation{

font-size:1.4rem;

color:#ffffff;

font-weight:600;

letter-spacing:1px;

margin-bottom:10px;

}

.word-definition{

font-size:1.1rem;

line-height:1.9;

color:#e6e6e6;

}

.word-list{

margin:0;

padding-left:24px;

}

.word-list li{

margin-bottom:12px;

}

.word-tag{

display:inline-block;

padding:6px 12px;

margin:4px;

background:#232936;

border-radius:999px;

color:#ffffff;

font-size:.9rem;

transition:.25s;

}

.word-tag:hover{

background:#ffb703;

color:#111111;

}

/* =======================================================
   BUTTONS
   ======================================================= */

.language-btn{

display:inline-block;

margin-top:12px;

padding:10px 18px;

background:#ffb703;

color:#111111;

font-weight:bold;

border-radius:8px;

transition:.25s;

}

.language-btn:hover{

background:#ffd166;

transform:translateY(-2px);

}



/* =======================================================
   LITERARY EXAMPLE
   ======================================================= */

.literary-example{

background:#11151c;

border-left:4px solid #ffb703;

padding:20px;

border-radius:8px;

margin-top:20px;

font-style:italic;

}

.literary-source{

margin-top:15px;

color:#8892b0;

font-size:.95rem;

font-style:normal;

}



/* =======================================================
   AUDIO PLAYER
   ======================================================= */

.audio-box{

background:#11151c;

border:1px solid #232936;

border-radius:10px;

padding:20px;

margin-bottom:35px;

}

.audio-box audio{

width:100%;

margin-top:15px;

}



/* =======================================================
   FOOTER
   ======================================================= */

.language-footer{

max-width:950px;

margin:60px auto 30px;

padding-top:25px;

border-top:1px solid #232936;

text-align:center;

color:#8892b0;

font-size:.95rem;

}

/* =======================================================
   ALPHABET NAVIGATION
   ======================================================= */

.alphabet-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(55px,1fr));

gap:14px;

margin-top:35px;

margin-bottom:40px;

}

.letter-btn{

display:flex;

justify-content:center;

align-items:center;

height:55px;

background:#161a22;

border:1px solid #232936;

border-radius:10px;

color:#ffffff;

font-size:1.15rem;

font-weight:bold;

transition:.25s;

}

.letter-btn:hover{

background:#ffb703;

color:#111111;

border-color:#ffb703;

transform:translateY(-3px);

}

/* =======================================================
   VOCABULARY ARCHIVE
   ======================================================= */

.language-page{

background:#0d0d0d;

padding:40px 20px;

}

.language-intro{

max-width:750px;

line-height:1.8;

color:#a0aec0;

}

.language-main{

max-width:1000px;

margin:50px auto;

}

.language-card{

background:#161a22;

border:1px solid #232936;

border-radius:12px;

padding:35px;

}

.section-title{

color:#ffb703;

margin-bottom:25px;

}

.section-description{

color:#a0aec0;

margin-bottom:35px;

line-height:1.8;

}