.container {
    width: 90%; /* ！！！！！!!!!!!!!!!!!!*/
    max-width: 900px;
    margin: 0 auto;/*居中 设置居中必须要先设置max-width*/
    
    
    /*text-align: center;*/
}
.container-flex
{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
   

}

/*@media (max-width: 675px) {
    .container-flex
    {
        flex-direction: column;

    }
    header
    {
        text-align: center;
    }
    
*/
@media (min-width: 675px) 
{
    .container-flex
    {
        flex-direction: row;
    }


    main {

        width: 75%;
    }
    
    .sidebar {
        width: 25%; 
    }


}
header {
    text-align: center;
    background-color: #ffebebf3;
    padding: 2rem 0;
}
img {
    display: block;
    width: 100%;
}
body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0; 
    font-size: 1.125rem;
    font-weight: 300;
 
}

h1,h2,h3 {
    font-family: Lora, 'serif';
    /*font-size: px;*/
    font-weight: 400;
    color: #5a1d41;

}
h1{
   
    
    margin: 0;
    font-size: 2rem;
   
}

a 
{
    color: rgb(204, 90, 90);
    font-weight: 400;
}

a :hover, 
a :focus 
{
    color: rgb(94, 89, 89);
}

/* nav title*/
.subtitle
{
    /*font-weight: 700;*/
    color: rgb(199, 141, 103);
    font-size: 1rem;
    margin: 0;
}
.article-title {
    
    font-size: 1.5rem;

}
.article-readmore,
.article-info
{
    font-size: .875rem;
}

.article-info
{
    margin: 2em 0;
}

.article-readmore {
    color:  rgb(204, 90, 90);
    font-weight: 700;
}

.article-readmore:hover,
.article-readmore:focus
{
    color: rgb(167, 0, 0);
}


/*main {

    width: 75%;
}

aside {
    width: 20%;

}
*/

   
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content:space-between;

    /*font-style: bold;*/
    /*border-bottom: 4px solid #ecdeec;*/

    

}
@media (max-width: 675px) {/*展现以下样式的最大宽度为675px,大于这个宽度后，样式会自动变回默认的样式（之前定义的样式）*/
    nav ul
    {
        flex-direction: column;

    }
    nav li{
        margin-top: .5em;
        margin-bottom: .5em;
        padding-right: 12%;
    }
    /*.gyw {
        display: flex;
        flex-direction: column;
    }
    */
    .sidebar{
        order: 1;
    }
    main {
        order: 2;
    }
    
}

nav li {
    /*margin-right: 8%;
    padding-right: 8%;*/
    /*margin-top: 3%;*/
    margin-left: 2em;

    
  
   
}
nav a {
    text-decoration: none;
    color: #707070;
    font-weight: 700;
    /*font-size: 2rem;*/
    padding: .01rem 0;
   

}
nav a:hover,
nav a:focus{
    color: rgb(199, 141, 103);
}

.current-page
{
    border-bottom: 2px solid #707070;
}

.current-page:hover {

    color: #707070;
}

/* article */

.article-featured 
{
    border-bottom: 1pt #707070 solid;
    padding-bottom: 2em;
    margin-bottom: 2em;

}
.recent
{
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;

}

.article-recent-main
{
    order:2;

}
.article-recent-secondary
{
    order:1;
}

@media(min-width:300px){/*展示下面这些样式的最小宽度为700px，比700px小了就会变回默认值*/

    .article-recent-main{
        margin-top: -2.5em;

    }
    .article-info{
        text-align: right;
    }

}
.sidebar
{
    padding-left: 10%;
  
   
}

/*

.card
{

border-style: solid;
border-color: rgb(243, 243, 243);
border-width: 0.2em;


}

*/
.widget-body,
.card
{
    border-bottom: 1pt #d3d2d2 solid;
    padding-bottom: 2em;
    margin-bottom: 2em;
    
}

.video
{
    width: 675px;
    height: 300px;
}