body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f7fa;
color:#333;
margin:0;
}
ul{
list-style-type: none;
    padding-left: 1em; 
}
li{
list-style-type: none;
}
a{
color:#1677ff;
text-decoration:none;
}

.container{
width:1200px;
margin:auto;
}

header{
background:linear-gradient(135deg, #05ddf3 0%, #324abd 100%);
color:#fff;
padding:15px;
}

.logo{
display: block;
font-size:2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
nav a{
color:#fff;
margin-right:15px;
}

.main{
display:flex;
margin-top:20px;
}

.content{
flex:3;
background:#fff;
padding:20px;
}

.sidebar{
flex:1;
margin-left:20px;
background:#fff;
padding:20px;
}

.article-list{
border-bottom:1px solid #eee;
padding:15px 0;
}

.article-list h3{
margin:0;
}

.meta{
color:#999;
font-size:12px;
margin-top:5px;
}

.ad{
background:#fafafa;
border:1px dashed #ddd;
text-align:center;
padding:15px;
margin:20px 0;
}

footer{
background:#222;
color:#aaa;
padding:30px;
text-align:center;
margin-top:40px;
}

/* mobile */

@media(max-width:768px){

.container{
width:100%;
padding:10px;
}

.main{
flex-direction:column;
}

.sidebar{
margin-left:0;
margin-top:20px;
}

}