html{
    background-color:rgb(252, 23, 23);
}
.container{
    display:flex;
}
.column{
    flex-direction: column;
}
#banner{
    background-color:red;
    text-decoration:underline;
    font-family:Lucida;
    padding:30px;
    border:double yellow 10px;
    margin:15px;
    font-size:35px;
}
#main{
    flex:2;
    text-align:center;
}
div img{
    height:180px;
    width:180px;
    margin:10px;
    padding:5px;
}
a{
    text-decoration:none;
    color:yellow;
    text-align:center;
}
nav{
    flex:1;
    background-color:darkred;
    border:solid 1px black;
    font-size:25px;
    border-radius:5px;
}
.center{
    justify-content:center;
    align-items:center;
}
nav a{
    flex:1;
    padding:10px;
}
nav a:hover{
    background-color:yellow;
    color:red;
}
.card{
    margin:20px;
    padding:10px;
    border:1px solid;
    box-shadow:3px 4px black;
    border-radius:10px;
    background-color:lightgoldenrodyellow;
    height:330px;
    width:220px;
}
.card3{
    margin:20px;
    padding:10px;
    border:1px solid;
    box-shadow:3px 4px black;
    border-radius:10px;
    background-color:lightgoldenrodyellow;
    text-align:center;
    height:380px;
    width:270px;
}
.card3 img{
    height:220px;
    text-align:center;
}
.card1{
    margin:20px;
    padding:10px;
    border:1px solid;
    box-shadow:3px 4px black;
    border-radius:10px;
    background-color:lightgoldenrodyellow;
    width:220px;
}
.card1 img{
    height:280px;
    text-align:center;
}
.image img{
    border:dashed lightcoral 5px;
    padding:0px;
}
.history img{
    filter:grayscale(100%);
    transition: filter 1s;
}
.history img:hover{
    filter:grayscale(0%);
}
p{
    font-size:30px;
}
#visual{
    margin:20px;
    padding:10px;
    border:1px solid yellow;
    box-shadow:3px 4px darkblue;
    border-radius:20px;
    background-color:lightcyan;
    width:310px;
}
#visual img{
    height:230px;
    width:280px;
    text-align:center;
}
#map img{
    height:280px;
    width:300px;
    border:solid black 1px;
    padding:0px;
}
#info{
    max-width:800px;
}
#footer{
    color:yellow;
    background-color:darkred;
    border:solid black 1px;
    padding:20px;
}
#heading2{
    color:black;
    background-color:yellow;
    border:solid black 2px;
     padding:5px;
     margin:1px;
}
#side{
    flex-direction:column;
    align-items:left;
    max-width:321px;
    padding:10px;
}
#qing img{
    height:220px;
    width:250px;
}
#shang img{
    height: 400px;
    width:220px;
}
#zhou img{
    height: 300px;
    width:200px;
}
.history img{
    border:solid lightgoldenrodyellow 8px;
    padding:0px;
}
#content img{
    height:380px;
    width:600px;
    padding:20px;
}
#context{
    text-align:center;
    border-radius:25px;
    border:solid rgb(119, 16, 12);
    background-color:rgb(255, 255, 106);
    padding:5px;
    margin:5px;
}
#intro_cult{
    max-width:950px;
    text-align:center;
    font-size:180px;
    padding:10px;
}
.culture img{
    border:solid darkred 7px;
    padding:4px;
    margin:6px;
}
#pic1 img{
    height:180px;
    width:345px;
}
#pic2 img{
    height:230px;
    width:300px;
}
#pic3 img{
    height:300px;
    width:350px;
}
#pic4 img{
    height:165px;
    width:230px;
}
#conclusion{
    border:solid darkgoldenrod 5px;
    padding:2px;
    margin:7px;
    border-radius:10px;
    background-color:lightgoldenrodyellow;
}
#introlands p{
    text-align:center;
    border-radius:15px;
    border:dashed lightslategray 4px;
    background-color:rgb(231, 248, 183);
    padding:10px;
    margin:18px;
    font-size:30px;
    color:darkred;
}
#landscpimg img{
    border:dotted lightskyblue 7px;
    padding:0px;
    margin:20px;
}
#img1 img{
    height:250;
    width:400;
}
#img2 img{
    height:280;
    width:350;
}
#img3 img{
    height:235;
    width:350;
}
#landscp_right{
    text-align:right;
    margin:12px;
}
#lndscp1 img{
    height:250px;
    width:380px;
}
#lndscp2 img{
    height:280px;
    width:380px;
}
.landscapes img{
    border:double lightcyan 15px;
    padding:0px;
    margin:17px;
}
#video{
    height:280px; 
    width:280px; 
    margin:30px;
    align-items:center;
    justify-content:center;
}
#caption p{
    font-size:28px; 
    margin:280px;
    text-align:center;
    border:solid lightgoldenrodyellow 1px;
    border-radius:10px;
    background-color:darkgoldenrod;
    color:lightgoldenrodyellow;
    padding:10px;
    width:680px;
    font-size:30px;
}
.gallery{
    margin:20px;
    padding:10px;
    border:1px solid;
    box-shadow:3px 4px black;
    border-radius:10px;
    background-color:lightgoldenrodyellow;
    height:300px;
    width:280px;
}
.gallery h3{
    text-align:center;
    font-size:23px;
}
.gallery img{
    width:250px;
    padding:0px;
}
.landscapes img{
    filter:sepia(100%);
    transition:filter 2s;
}
.landscapes img:hover{
    filter:sepia(0%);
}
#landscpimg img{
    filter:brightness(20%);
    transition: filter 1s;
}
#landscpimg img:hover{
    filter:brightness(100%);
}