html{
    font-size: 20px;
}

/*display: inline-block; elements show in a same line，wont change the line if not asked*/

*{
    margin: 0;
    color: rgb(31, 53, 53);
}  
/* clear the gap between sections and the background for all */



header{
    background-color: rgba(239, 216, 85, 0.953);
    color: rgb(31, 53, 53);
    text-align: center;
    padding: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-shadow: 5px 3px 3px 3px lightgray;
}

.dropdown button, 
.dropdown a {
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(233, 233, 216);
    border-radius: 5px;
    cursor:pointer;
    size: 1.2rem;
}

.dropdown button{
    border:none;
    background-color: rgba(196, 182, 104, 0.953); 
}

.dropdown a{
    transition: background-color 0.3s;  /* GPT: polish the response visually */
    display: inline-block;
} 

.dropdown .content_nav{
    background-color: rgb(170, 164, 164);
    box-shadow: 2px 2px 5px rgb(159, 154, 154); 
    display: none;
    position:absolute;
    
    left:50%;
    transform: translate(-50%,0);
    z-index: 1; /* GPT: set a higher z-index value，let it over/above other contents */
    padding: 10px 10px;
}
.dropdown:hover .content_nav{
    display: block;
} 

.dropdown a:hover{
    background-color: rgb(219, 219, 219);
    color: rgb(152, 140, 140);
}
a:active{
    color:rgb(169, 225, 169);
    /* font-size: 1.1em; */
}
a:visited{
    color: rgb(59, 56, 56);
}

.dropdown{
    display:inline-block;
}

h1::first-letter{
    font-size: 2em;
    font-style: italic;
}

::selection{
    color: rgb(141, 181, 72);
}

body{
    background-image: url(../image/city.png);   
    /* GPT: go back to the root folder, use ".." */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}


.container{
    position: relative;
    background-color: rgb(240, 239, 211);
    border-radius: 0.5rem;
    border:3px dashed rgb(135, 151, 151);
    height: 70vh;
    width: auto;

    display: flex;
    flex-direction: column;

    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.container #water_flow{
    display: inline;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
}

.container #horse{
    display: inline;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
}

.container p{
    color: rgb(100, 107, 114);
    font-family: monospace,Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1em;
}

.container p:hover{
    color:rgb(61, 62, 64);
}


.theme{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-top: 10px;
    text-align: center;
    background-color: rgba(166, 156, 142, 0.3);
}



.part3{
    /* overflow: auto; */
    background-color: rgb(213, 213, 193);
    border:2px solid lightgray;
}


.part3,
.part{
    width: 100%;
    margin-bottom: rem;
    text-align: center;
    padding: 1rem;
    border-radius: 10px;
}
.part{
    background-color: beige;
    border-radius: 10px;
    text-align: center;
    box-shadow: 3px 3px 5px  rgb(178, 177, 177);
}

#like_aside li::marker{
    content:"❤️";
}
#like_aside{
    align-items: center;
    padding: 1rem;
}
#music::after{
    content: "🎵";
}
#tea::after{
    content:"🍵🧋"
}
#cute::after{
    content: "🐕‍🦺🐈";
}


.part1{
    max-width: 100%;
    height: auto; /*2adjusts*/
    background-color: beige;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 3px 3px 5px  rgb(178, 177, 177);
}

#together {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 将内容均匀分布在容器内 */
    max-width: 100%;
    height: auto; /*2adjusts*/
    background-color: rgb(181, 181, 176);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    box-shadow: 3px 3px 5px  rgb(121, 120, 120);
}



@media (min-width:768px){
    .part3, .part{
        width: 30%;
    }
}


.part2{
    background-color: aliceblue;
    padding:1rem;
    border-radius: 3px;
    font-size: 1rem;
    position: relative;
    font-family: monospace,Arial, Helvetica, sans-serif;
    border-style: dashed;
    border-color: darkslategray;

    /*to make items center*/
    align-items: center;
    display: flex;
    flex-direction: column;
}

.content_part2 {
    margin-right: 20px; 
    text-align: center;
}



#water_flow{
    float: left;
    width: 100px;
    /* border: 2px dotted black; */
}




button, .buttons{
    display: inline-block;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    background-color: rgb(185, 185, 186);
    margin: 20px;
}

img, video{
    max-width:100%;
    height: auto;
}


/* GRID */
.grid-container {
    display: grid;
    gap: 20px;
    text-align: center;
    grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 1.4fr 1.8fr; /*hang*/
    grid-template-columns: 1fr 1fr; 
    background-color: rgb(245, 240, 198);
    align-content: center;
}


.grid-item{
    border: 2px solid rgb(165, 165, 140);
    border-radius: 5px;
    padding: 30px 10px;
}

#item1 {
    grid-row: 1; 
    grid-column: 1/3; 

}
  
#gallery-grid{
    grid-row: 2;
    grid-column: 1/3;
    border: none;
}

#subt{
    grid-row: 3;
    grid-column: 1/3;
    background-color: rgba(221, 218, 201, 0.8);
}
#item2 {
    grid-row: 4/6; 
    grid-column: 1; 
    background-color: aliceblue;
    overflow: auto;
}
#item2 p{
    font-size: smaller;
}

.colunm{
    display: grid;
}
#horse-in-grid{
    width: 50px;
    float: bottom;
}
  
#item3 {
    grid-row: 4;
    grid-column: 2/3; 
    background-color: aliceblue;
}
#item3 img, #item6 video, #Kong{
    width: 80%;
    height: auto;
}

#item6{
    grid-row: 5;
    grid-column: 2/3;
    background-color: aliceblue;
}
#item3 #left{
    text-align: left;
    margin-top: 10px;
}

#item7{
    grid-row: 6;
    grid-column: 1/3;
}
#item7 img{
    width: 49%;
    height: auto;
}

#item5{
    grid-row: 7;
    grid-column: 1/3;
}
#item5 h4{
    padding-bottom: 20px;
}
#item5 iframe{
    width: 100%;
    height: 80%;
}



.image-gallery {
    display: grid;
    gap: 10px;
    align-items: center;
    justify-content: center;
    grid-template-rows: auto; /* 为了适应内容高度 */
    grid-template-columns: repeat(4, 1fr); 
  }
  
  .image-gallery .image {
    width: 100%;
    height: 100%; /* 使框的高度自适应内容 */
    overflow: hidden;
    border: 3px solid lightgray;
    border-radius: 5px;
  }
  
  .image-gallery .image img {
    width: 100%; /* 图片宽度填满框 */
    height: 100%; /* 图片高度填满框 */
    object-fit: cover; /* 保持宽高比填满框 */
    object-position: center; /* 图片居中 */
    transition: transform 0.5s ease; /* 平滑的变换效果 */
  }
  
  .image-gallery .image img:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
}
  
  

#custom_table{
    border-radius: 5px;
    background-color: rgb(255, 237, 215);
    text-align: center;
    border-style: dashed;
    border-color: darkolivegreen;
}

label{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    /* label is inline-block */
    margin-top: 10px;
    font-weight: bold;
}

input{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#border_need_contact{
    background-color: #f5f5f5;
    padding: 10vh 20vh;
    border: 3px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    height: auto;
    overflow: auto;

}

#special1{
    text-shadow: 3px 3px 5px rgb(171, 171, 168);
}

#special2{
    text-shadow: -1px 0 rgb(173, 173, 173), 0 1px rgb(140, 140, 140),
    1px 0 rgb(140, 140, 140), 0 -1px rgb(140, 140, 140);
}


.aside_up{
    border-radius: 5px;
    border-color: dimgray;
    background-color: rgb(198, 199, 185);
    float: right;
    position: fixed; /* set its position */
    bottom: 0; /* most bottom */
    right: 5px; /* most right side of the screen */
}

aside a{
    padding: 10px;
    color: darkslategrey;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


footer{
    background-color: rgba(165, 155, 100, 0.953); 
    color: rgb(31, 53, 53);
    text-align: center;
    color:aliceblue;
    text-decoration: none;
    padding: 10px;
    display: block;
}

@media screen and (max-width: 600px){
    aside, section, article{
        width: 100%;
    }
}

/* nav {
    background-color: rgba(196, 182, 104, 0.953); 
    text-align: center;
    padding: 1rem; /*the distance between border and things inside
    border-radius: 5px;
}

nav a {
    color: rgb(121, 121, 121); 
    text-decoration: none; /* from chatGPT: move the link's underline 

    border-style:solid;
    border-radius: 0.5rem; /*round the border*/
    /* margin:0 auto;  
    margin: 5px;   /*outside
    background-color: aliceblue;
    padding: 0.25rem;    /*inside

    display: inline-block;
} */


/* .homepage_photo{
    max-width:100%;
    height: auto; /*adjust the height
    margin: 0 auto;
    box-shadow: 0 4px 8px 0;
    /* box-shadow: [->] [|] [blur radius] [diffuse radius] [color]; 

*/


 /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
    /* gpt:to make the grip adaptive to respond */
    
/* #overit{
    
    background-color: rgb(240, 239, 211);
    color: rgb(100, 107, 114);
    font-family: monospace,Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    text-align: center;
    border-radius: 0.5rem; /*round the border
    padding-top: 25vh;
    padding-bottom: 25vh;
} */

/* @font-face {
    src: url(file/);
    font-family:define_name;
    /* you can use it by calling name next */


/* About the Rem on the slides 2.4 rem being equal to 24 px. Rem is calculate based on what the root html was set to using css. For this picture in someone set the html to 10 px. which means 1.4 rem  = 14 px, 2.4 rem = 24 px.

html {
    font-size: 10px;
}

this would set 1 rem = 10 px 

body{
    background-color: rgb(197, 220, 220);
}

h1{
    font-size: 4rem;
    text-shadow: 3px 3px 5px pink, -3px -3px 3px lightgreen;
    /* <!-- how much to blur it:5 --> */
    /* zuoxia:+
    youshang: - 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}