{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Arial, Helvetica, sans-serif;
background:#f5f5f8;
color:#333;

}

.container{

max-width:70%;
margin:50px auto;
padding:30px;

}



.subtitle{

font-size:18px;
margin-bottom:20px;
color:#666;

}

.links{

margin-bottom:40px;

}

.links a{

display:inline-block;

margin-right:15px;

padding:10px 18px;

background:#512889;

color:white;

text-decoration:none;

border-radius:6px;

}

.links a:hover{

background:#6740a3;

}

h2{

margin:35px 0 15px;
color:#512889;

}

details{

background:white;

margin-bottom:10px;

border-radius:8px;

box-shadow:0 2px 8px rgba(0,0,0,.08);

overflow:hidden;

}

summary{

padding:18px;

font-size:18px;

font-weight:bold;

cursor:pointer;

list-style:none;

}

summary::-webkit-details-marker{

display:none;

}

summary i{

color:#512889;

width:30px;

}

details p,
details ul{

padding:0 20px 20px 50px;

line-height:1.7;

}

details[open] summary{

background:#512889;

color:white;

}

details[open] summary i{

color:white;

}
/* Container for the link buttons */
.links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;        /* allows wrapping on smaller screens */
    margin: 20px 0;
}

/* Button styling */
.links a {
    display: flex;
    align-items: center;
    gap: 8px;               /* space between icon and text */
    background-color: #512889;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Icon size */
.links a i {
    font-size: 1.2rem;
}

/* Hover effect */
.links a:hover {
    background-color: grey;
    color: #512889;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .links {
        flex-direction: column;   /* stack vertically */
        align-items: center;
        gap: 15px;
    }

    .links a {
        width: 80%;               /* larger tap targets */
        justify-content: center;  /* center icon + text */
    }
}