/* ==========================================================
   WWII.STORE
   Main Stylesheet
========================================================== */

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

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#f5f5f2;

    color:#333;

    line-height:1.6;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

}

.container{

    width:95%;

    max-width:1400px;

    margin:auto;

}

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

header{

    background:#2b2b2b;

    color:#fff;

    border-bottom:4px solid #6b7b3b;

}

.top-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-size:34px;

    font-weight:bold;

    letter-spacing:1px;

}

.logo span{

    color:#b89b5e;

}

.user-links a{

    margin-left:18px;

    font-weight:bold;

}

.user-links a:hover{

    color:#b89b5e;

}

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

nav{

    background:#404040;

}

nav ul{

    list-style:none;

    display:flex;

}

nav li{

    padding:16px 22px;

}

nav li:hover{

    background:#6b7b3b;

    cursor:pointer;

}

/* ===========================
HERO
=========================== */

.hero{

    background:white;

    padding:60px 30px;

    margin-top:25px;

    border-radius:8px;

    text-align:center;

}

.hero h1{

    font-size:42px;

    margin-bottom:20px;

}

.hero p{

    font-size:18px;

    margin-bottom:30px;

    color:#666;

}

.search-box{

    display:flex;

    justify-content:center;

}

.search-box input{

    width:600px;

    max-width:80%;

    padding:16px;

    font-size:18px;

    border:2px solid #ccc;

    border-radius:6px 0 0 6px;

}

.search-box button{

    padding:16px 28px;

    border:none;

    background:#6b7b3b;

    color:white;

    font-size:18px;

    cursor:pointer;

    border-radius:0 6px 6px 0;

}

.search-box button:hover{

    background:#596630;

}

/* ===========================
PLACEHOLDER SECTION
=========================== */

.section{

    background:white;

    margin-top:30px;

    border-radius:8px;

    padding:30px;

}

.section h2{

    margin-bottom:20px;

}

.placeholder{

    height:180px;

    border:2px dashed #ccc;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

}

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

footer{

    background:#2b2b2b;

    color:white;

    margin-top:50px;

    padding:30px;

    text-align:center;

}