html{
    cursor: url(mouse/defult.png)35 35,auto;
    background-image:url(images/image3/background.jpg);
    color: #ffffff;
    background-repeat: no-repeat;
    background-size:100% 100vh;
    background-attachment:fixed;
    scroll-behavior:smooth;
    overflow-y: auto;
}
::-webkit-scrollbar {
    width: 13px;
  }

::-webkit-scrollbar-track {
    background: #f4eee7;
  }

::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    border: 2px solid #ffffff;
}
body{
    animation: fade-in 2s;
}
@keyframes fade-in {
    0% { opacity: 0; }

    100% { opacity: 1; }
}
.container{ /* the overall container of this page */
    display: inline-grid;
    grid-template-columns: 20% 4% 20% 20% 20% 20% 1fr;
    /* positioning the starting position of the content（left to right) */
    grid-template-rows: 40vh 10vw;
    /* positioning the starting position of the content (top to bottom) */
}
#contents-container{
    grid-row: 2;
    grid-column: 2/6;
    align-self: auto;
    /* set the location of contents' container */
}
#contents-container{
    display: inline-grid;
    grid-template-columns: 16% 18% 10% 10% 20% 20% 5% 20% 20% 20% 10% 8% 20% 20% 20% 8% 20% 2% 25%;
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 70%;
    /* set the positions for every image and its description */
}
/* the first image and description as an example */
#fox, #fox1{ 
    width:30vw;
    grid-column: 1/2;
    grid-row: 4;
    /* set the images‘ position in contents-container and make the two images overlap */
}
#text1{
    grid-column: 3/6;
    grid-row: 7;
    /* set the in text positions next to the images in contents-container */
}
p{
    font-family: fantasy;
    display: inline;
    position:relative;
    font-size: 1.7vw;
    line-height:1.8em;
    color: black;
}
p span{
    color: rgb(169, 15, 15);
}

#fox:hover, #rabit:hover, #pig:hover, #goose:hover{
    cursor: url(mouse/select.png)35 35, auto;
    animation: fade-out 0.5s;
}
@keyframes fade-out {
    0% { opacity: 1; }

    100% { opacity: 0; }
}
#fox:active, #rabit:active, #pig:active, #goose:active{
    visibility:hidden;
}

#rabit, #rabit1{
    width:18vw;
    grid-column: 7/9;
    grid-row: 2;
}
#text2{
    grid-column: 9/11;
    grid-row: 7;
}

#pig, #pig1{
    width:30vw;
    grid-column: 12/14;
    grid-row: 2;
}
#text3{
    grid-column: 14/16;
    grid-row: 7;
}

#goose, #goose1{
    width:25vw;
    grid-column: 17/18;
    grid-row: 1;
}
#text4{
    grid-column: 19/21;
    grid-row: 7;
}

#next{
    grid-column: 20;
    grid-row: 9;
    margin-top: 240px;
    margin-right:30px;
    color: gray;
    text-transform: uppercase;
}
#next a{
    text-decoration: none;
    color: gray;
    text-transform: uppercase;
    text-align: right;
    font-size: 5vw;
    transition: color 0.5s;
}
#next a:hover{
    cursor: url(mouse/select.png)35 35, auto;
    color:black;
    transition: color 0.5s;
}
#next a:active{
    cursor: url(mouse/click.png)35 35, auto;
}
#text1-v, #text2-v, #text3-v, #text4-v{
    display: none;
}
#logo{
    position: fixed;
    right:0;
    top:0;
    width:10%;
    transition: width 0.5s;
}
#logo:hover{
    cursor: url(mouse/select.png)35 35, auto;
    width:11%;
    transition: width 0.5s;
}
#logo:active{
    cursor: url(mouse/click.png)35 35, auto;
}
@media (max-width: 1280px) and (orientation:landscape) {
    html{
        background-image:url(images/vertical-Backgound/3-1.png);
        background-size:100% 100%;   
        width: 100%;
        height:100%;
    }
    body{
        width: 100%;
        height:100%;
    }
    p{
        font-size: 2em;
    }
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        /* reset the overall container to default */
    }
    #contents-container{
        grid-template-rows: 0% 12% 28% 6% 10% 20% 6% 10% 15% 4% 6.5% 2% 1%;
        grid-template-columns: 18% auto 15%;
        /* set the positions for every image and its description to fit the screen */
    }
    #text1, #text2, #text3, #text4{
        display: none;
    }
    /* the first image and description as an example */
    #fox, #fox1{
        width:40vw;
        grid-row: 3/4;
        grid-column: 2;
        margin-left: 20%;
        /* set the images‘ position in contents-container and make the two images overlap */
    }
    #text1-v{
        display: inline-grid;
        grid-row: 2;
        grid-column: 2;
        font-size: 1em;
        /* set the in text positions next to the images in contents-container */
    }
    
    #rabit, #rabit1{
        width:30vw;
        grid-row: 5/6;
        grid-column: 2;
        margin-left: 20%;
    }
    #text2-v{
        display: inline-grid;
        grid-row: 4;
        grid-column: 2;
        font-size: 1em;
    }
    #pig, #pig1{
        width:40vw;
        grid-row: 8/9;
        grid-column: 2;
        margin-left: 30%;
    }
    #text3-v{
        display: inline-grid;
        grid-row: 7;
        grid-column: 2;
        font-size: 1em;
    }
    #goose, #goose1{
        width:35vw;
        grid-row:11/12;
        grid-column: 2;
        margin-left: 20%;
    }
    #text4-v{
        display: inline-grid;
        grid-row: 10;
        grid-column: 2;
        font-size: 1em;
    }
    #text1-v p, #text2-v p, #text3-v p, #text4-v p{
        background-color: #ffffff76;
        backdrop-filter: blur(3px);
        padding: 0.5em;
        box-sizing: border-box;
        box-shadow:0 5px 30px 0px #4a4a4ab7;
        border-radius: 50px;
    }
    #next{
        grid-row: 12;
        grid-column: 2;
        margin-left: 90%;
    }
    #next a{
        font-size: 2em;
    }
    #logo{
        position: fixed;
        right:0;
        top:0;
        width:10%;
        transition: width 0.5s;
    }
    #logo:hover{
        width:11%;
        transition: width 0.5s;
    }
}
@media (max-width: 1080px)and (orientation:portrait) {
    html{
        background-image:url(images/vertical-Backgound/3.png);
        background-size:100% 100%;   
        width: 100%;
        height:100%;
    }
    body{
        width: 100%;
        height:100%;
    }
    p{
        font-size: 2em;
    }
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    #contents-container{
        grid-template-rows: 12% 14% 35% 5% 10% 23% 10% 10% 23% 7% 10.5% 2% 1%;
        grid-template-columns: 15% auto 5%;
        /* set the positions for every image and its description to fit the screen*/
    }
    #text1, #text2, #text3, #text4{
        display: none;
    }
    #fox, #fox1{
        width:60vw;
        grid-row: 3/4;
        grid-column: 2;
        margin-left: 6%;
    }
    #text1-v{
        display: inline-grid;
        grid-row: 2;
        grid-column: 2;
        font-size: 1em;
    }
     /* the rests are almost identical as before */
    
    #rabit, #rabit1{
        width:40vw;
        grid-row: 5/6;
        grid-column: 2;
        margin-left: 14%;
    }
    #text2-v{
        display: inline-grid;
        grid-row: 4;
        grid-column: 2;
        font-size: 1.1em;
    }
    #pig, #pig1{
        width:60vw;
        grid-row: 8/9;
        grid-column: 2;
        margin-left: 10%;
    }
    #text3-v{
        display: inline-grid;
        grid-row: 7;
        grid-column: 2;
        font-size: 1.1em;
    }
    #goose, #goose1{
        width:55vw;
        grid-row:11/12;
        grid-column: 2;
        margin-left: 10%;
    }
    #text4-v{
        display: inline-grid;
        grid-row: 10;
        grid-column: 2;
        font-size: 1.1em;
    }
    #next{
        grid-row: 12;
        grid-column: 2;
        margin-left: 70%;
    }
    #next a{
        font-size: 2em;
    }
    #logo{
        position: fixed;
        right:0;
        top:0;
        width:20%;
        transition: width 0.5s;
    }
    #logo:hover{
        width:21%;
        transition: width 0.5s;
    }
}
@media (prefers-reduced-motion: reduce){
    html{
        animation:none;
    }
    #logo, #logo:hover, #fox:hover, #rabit:hover, #pig:hover, #goose:hover{
        transition: none;
    }
  }