body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#140024;
color:white;
line-height:1.6;
}

/* header */

header{
background:linear-gradient(90deg,#6b00ff,#9c4dff);
text-align:center;
padding:25px;
}

.tagline{
margin-top:5px;
}

/* navigation */

nav{
position:sticky;
top:0;
background:#200040;
z-index:1000;
}

nav ul{
list-style:none;
display:flex;
justify-content:center;
margin:0;
padding:10px;
}

nav li{
margin:0 15px;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
padding:8px 12px;
border-radius:4px;
}

/* rollover styling */

nav a:hover,
nav a:focus{
background:#9c4dff;
}

/* main layout */

main{
padding:20px;
max-width:1000px;
margin:auto;
}

/* section layout */

.characters{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-bottom:30px;
}

/* card style */

.card{
background:#1f0038;
padding:15px;
border-radius:8px;
border:1px solid #6b00ff;
flex:1;
min-width:250px;
text-align:center;
}

.card img{
width:100%;
max-width:300px;
display:block;
margin:auto;
border-radius:5px;
}

/* footer */

footer{
text-align:center;
padding:20px;
background:#200040;
margin-top:40px;
}

footer a{
color:#caa3ff;
}

/* About page layout */

.intro-flex{
display:flex;
align-items:flex-start;
gap:2rem;
margin-bottom:2rem;
}

.intro-flex article{
flex:2;
}

.intro-flex .side-img{
flex:1;
max-width:300px;
width:100%;
height:auto;
border-radius:5px;
border:2px solid #ccc;
}

.responsive-img{
max-width:400px;
width:100%;
height:auto;
border:2px solid #ccc;
border-radius:5px;
display:block;
margin:1rem auto;
}

/* single mobile media query */

@media (max-width:768px){

nav ul{
flex-direction:column;
align-items:center;
}

.characters{
flex-direction:column;
}

.card img{
width:100%;
}

.intro-flex{
flex-direction:column;
align-items:center;
}

.intro-flex .side-img{
max-width:90%;
}

main{
padding:1rem;
}

/* 10-Year Vision Section */
.vision-text {
    padding: 20px;
    margin: 20px 0;
    background-color: #f9f9f9; /* subtle background for readability */
    border-radius: 10px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

.vision-text p {
    margin-bottom: 15px;
}

.responsive-img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 8px;
}