body{

    margin:0;
    font-family: Georgia, "Times New Roman", serif;
    background:#f7f7f5;
    background-image:url("website_background.png");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-repeat:no-repeat;

}

.navbar{

    display:flex;
    justify-content:center;
    gap:40px;
    padding:20px;
    font-family: "Avenir Next", Avenir, sans-serif;
}

.navbar a{

    text-decoration:none;
    color:#222;
    font-weight: 500;

}

.hero{

    
    max-width:900px;
    margin:0 auto;
    text-align:center;
    padding:100px 20px;

}

.about{

    max-width:900px;
    margin:0 auto;
    padding:0 20px;

}

.hero h1{

    font-size:48px;

    margin-bottom:10px;

}

.hero h2{

    color:gray;

    margin-bottom:30px;

}

.hero p{

    max-width:650px;
    margin:auto;
    line-height:1.6;

}

.buttons{
    margin-top:40px;
}

.button{

    display:inline-block;

    margin:10px;

    padding:15px 30px;

    background:black;

    color:white;

    text-decoration:none;

    border-radius:8px;

}

.project{

    width:80%;
    max-width: 900px;
    margin:60px auto;

}

.projects{

    max-width:900px;
    margin:60px auto;
    padding:0 20px;

}

.project-card{

    background:white;

    padding:30px;

    border-radius: 10px;

    box-shadow:0px 4px 10px rgba(0,0,0,0.1)

}

.article-list{

    max-width:900px;
    margin:40px auto;

}

.article-card{

    display:flex;

    gap:30px;

    align-items:center;

    padding:25px;

    border:1px solid #ddd;

    border-radius:12px;

    margin-bottom:30px;

    transition: 0.2s;
}

.article-image{

    width:220px;

    height:150px;

    object-fit:cover;
    object-position: 50% 20%;

    border-radius:10px;

}

.article-info{

    flex:1;

}

.article-info h2{

    margin-top:0;

    margin-bottom:15px;

}

.article-info a{

    text-decoration:none;

    color:black;

}

.article-info a:hover{

    color:#0077cc;

}

.article-date{

    color:gray;

    font-size:0.9rem;

}

.article-link {

    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

}

.article-link:hover .article-card {

    transform: translateY(-3px);

    box-shadow: 0px 8px 20px rgba(0,0,0,0.12);

}

.article-content {

    max-width: 760px;
    margin: 20px auto 60px auto;
    padding: 0 20px;
    line-height: 1.8;
    font-size: 1.08rem;

}

.article-content p {
    margin-bottom: 1.5em;
}

.article-header{

    max-width:800px;

    margin:80px auto 40px auto;

    text-align:center;

}

.article-category{

    color:#666;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:0.9rem;

}

.article-header h1{

    font-size:3rem;

    margin:10px 0;

}



.article-meta{

    color:gray;

}

.hero-image{

    max-width:900px;

    margin:0 auto 60px auto;

}

.hero-image img{

    width:100%;

    border-radius:15px;

    display:block;

}

.simulation-section{

    max-width:1000px;
    width:100%;
    margin:60px auto 30px auto;

}

.simulation-frame{

    width:100%;

    height:700px;

    border:none;

    display:block;

}

.article-video {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
}

.article-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.article-video figcaption {
    margin-top: 10px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.equation {
    margin: 0.7rem 0.3rem;
    text-align: center;
    font-size: 1rem;
    overflow-x: auto;
}

footer {
    text-align: center;
    padding: 40px 20px 30px;
    color: #777;
    font-size: 0.85rem;
}