body{
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F911%2F022916120344%2F160229120344-3.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654865531&t=9b6a0e20f5c0e165db453c000b173f5a);
        width: 100%;
        height: 100%;
        position: relative;
        background-position: center top;
        background-size: cover;
        cursor: url("Handwriting.cur"),auto;
}
::selection{
    color: skyblue;
}
main{
    border-top-style: none;
    padding:5% auto;
    margin: 5% 6%;
}
ul {
    position: relative;
    display: flex;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: -1px;
    padding: 5px;
}
#yulan{
    margin: auto;
}
#par{
    text-align: center;
    width: 100%;
}
#te{
    font-style:normal;
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(147, 170, 44, 0.5);
}
li{
    list-style: none;
    display: inline;
    flex: 1;   
}
li:hover{
    animation: bu 0.4s forwards linear;
    animation-delay: 100ms;
}
@keyframes bu{
    0%{ flex:1;}
    75%{ flex:1.6;}
    100%{ flex:1.9;}
}
a{
    text-decoration: none;
}
#box{
        position: relative;
        left: auto;
        right:auto;
        width: auto;
        height: auto;
        text-align: center;
        margin: 20px 10%;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        overflow: hidden;
        padding: 5%;
        box-sizing: border-box;

}
#box:hover{
    animation: back 3s ease-in-out forwards;

}
#box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
  z-index: -3;
    margin: -30px;
  background-position: center top;
  background-size: cover;
    background-attachment: fixed; 
}
@keyframes back{
    0% {background-color: rgba(81, 99, 110, 0.137);}
    100%{background-color: rgba(201, 219, 231, 0.342);}
}
#P{
    width: auto;
    height: auto;
    font-weight: bolder;
    font-size: xx-large;
    padding: 30px auto;
    font-family: 'Rebel Scene_Demo','JetBrains Mono','A023-Sounso UndividedadA023-Sounso Undividedad','Times New Roman',Arial;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url(../font/JetBrainsMono-Regular-2.ttf);
}
input{   
      font-size: 300%;
        opacity: 0;   
      overflow: hidden;   
      position: absolute;
    
}
p:hover{
    color: khaki;
    background-color: rgba(129, 137, 155, 0.342);
    border-radius: 10px;
}

#cube{
    position: relative;
    margin: 20px auto;    
    padding: 100px;  
    border: 20px;
    border-color: rgba(62, 82, 72, 0.199);
    border-style:groove;
    width: 250px;
    height: 250px;
    text-align: center;
    resize: both;
    overflow: auto;
}
#cubicblock{
    position: absolute;
    background-color: rgba(52, 65, 66, 0.3);
    width:50px;
    height: 50px;
    left: auto;
    top: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 3px black; 
    animation: ball 5s ease-in-out infinite;
}
@keyframes ball{
    0% {left:20%;top:20%}
    25% {left:80%;top:20%}
    50% {left:80%;top:80%}
    75% {left:20%;top:80%}
    100% {left:20%;top:20%}
}
button:hover{
    color: rgba(224, 213, 59, 0.247);
}
button{
    background-color: rgba(110, 152, 206, 0.25);
    align-content: center;
    width: 100%;
    height: 50px;
    border-style: none;
    border-radius: 10px;
}