/* ==== RESET ==== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==== BODY ==== */

body{
    background:#fffde7;
    color:#212121;
    line-height:1.6;
    font-family:Garamond, serif;
}

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

.main-header{
    background:yellow;
    padding:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:2px solid #d6c800;
}

/* ==== LOGO ==== */

.logo{
    font-family:Helvetica, sans-serif;
    font-size:2rem;
}

/* ==== MENU ==== */

.menu{
    list-style:none;
    display:flex;
    gap:40px;
    margin:0;
}

.menu a{
    text-decoration:none;
    color:#212121;
    font-family:"Fira Code", monospace;
    font-weight:bold;
}

.menu a:hover{
    text-decoration:underline;
}

/* ==== SEARCH BAR ==== */

.search-bar{
    display:flex;
    gap:10px;
}

.search-bar input{
    padding:8px;
    border:1px solid #999;
    width:200px;
}

.search-bar button{
    padding:8px 12px;
    border:none;
    background:#212121;
    color:white;
    cursor:pointer;
}

.search-bar button:hover{
    background:black;
}

/* ==== MAIN ==== */

main{
    padding:30px 20px;
}

/* ==== ARTICLES ==== */

article{
    background:#fff9c4;
    padding:20px;
    margin-bottom:25px;
    border:1px solid #ddd;
}

article h2,
article h3,
article h4{
    font-family:Helvetica, sans-serif;
    margin-bottom:10px;
}

article p{
    margin-bottom:15px;
}

article img{
    width:100%;
    height:auto;
    margin-bottom:15px;
}

/* ==== ASIDE ==== */

aside{
    background:#fff9c4;
    padding:20px;
    border:1px solid #ddd;
}

aside h2,
aside h3,
aside h4{
    font-family:Helvetica, sans-serif;
    margin-bottom:15px;
}

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

footer{
    background:yellow;
    padding:30px 20px;
    border-top:2px solid #d6c800;
}

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

.footer-container{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

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

.footer-column{
    width:30%;
}

.footer-column h4{
    font-family:Helvetica, sans-serif;
    margin-bottom:10px;
}

.footer-column ul{
    list-style:none;
}

.footer-column li{
    margin-bottom:8px;
}

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

.footer-column a{
    text-decoration:none;
    color:#212121;
    font-family:"Fira Code", monospace;
}

.footer-column a:hover{
    text-decoration:underline;
}

/* ==== FORMULAIRE ==== */

.footer-subscribe{
    margin-top:15px;
    display:flex;
    gap:10px;
}

.footer-subscribe input{
    padding:8px;
    border:1px solid #999;
}

.footer-subscribe button{
    padding:8px 12px;
    border:none;
    background:#212121;
    color:white;
    cursor:pointer;
}

.footer-subscribe button:hover{
    background:black;
}

/* ==== COPYRIGHT ==== */

.footer-bottom{
    margin-top:20px;
    padding-top:10px;
    border-top:1px solid #999;
    text-align:center;
    font-size:14px;
}