/* RESET */

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

body{

font-family:Arial, Helvetica, sans-serif;
line-height:1.6;
background:#f5f5f5;
color:#333;

}

/* CONTAINER */

.container{

max-width:1100px;
margin:auto;
padding:20px;

}

/* HEADER */

header{

background:#111;
color:white;

}

header .container{

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

}

/* LOGO */

.logo{

font-size:24px;
font-weight:bold;

}

.logo a{

color:white;
text-decoration:none;

}

/* begin new logo style */
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
}

.logo img{
height:60px;
}

nav a{
margin-left:20px;
text-decoration:none;
font-weight:bold;
}
/* end   new logo style */

/* NAV MENU */

nav ul{

list-style:none;
display:flex;
gap:20px;

}

nav a{

color:white;
text-decoration:none;
font-size:16px;

}

nav a:hover{

color:#4da3ff;

}

/* HAMBURGER */

.menu-toggle{

display:none;
font-size:26px;
cursor:pointer;

}

/* ARTICLE LIST */

article{

background:white;
padding:20px;
margin-bottom:20px;
border-radius:6px;

}

article h2{

margin-bottom:10px;

}

article a{

text-decoration:none;
color:#111;

}

article a:hover{

color:#2a7fff;

}

/* ARTICLE PAGE */

.article-header{

margin-bottom:20px;

}

.article-meta{

font-size:14px;
color:#777;

}

.article-cover img{

border-radius:6px;
margin:20px 0;

}

.article-content p{

margin-bottom:15px;

}

/* TAGS */

.article-tags{

margin-top:20px;

}

.article-tags a{

display:inline-block;
background:#eee;
padding:5px 10px;
margin:5px;
border-radius:4px;
font-size:14px;
text-decoration:none;
color:#333;

}

.article-tags a:hover{

background:#2a7fff;
color:white;

}

/* GALLERY */

.article-gallery img{

border-radius:6px;

}

/* BREADCRUMB */

.breadcrumb{

font-size:14px;
margin-bottom:15px;
color:#666;

}

.breadcrumb a{

text-decoration:none;
color:#2a7fff;

}

/* FOOTER */

footer{

background:#111;
color:white;
text-align:center;
padding:30px 20px;
margin-top:40px;

}

/* MOBILE */

@media (max-width:768px){

nav ul{

display:none;
flex-direction:column;
background:#111;
position:absolute;
top:60px;
left:0;
width:100%;

}

nav ul.active{

display:flex;

}

.menu-toggle{

display:block;

}

header .container{

flex-wrap:wrap;

}

}