body{
    text-align: center;  
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;
}

p{
    margin-top: 300px;
    font-size: 35px;
    font-family: "Space Grotesk", sans-serif;

}

.note{
    font-size: 18px;
    text-align: center;
    margin: 30px auto; 
    color: grey;
    max-width: 50%;
    
}

a{
    text-decoration: none;
    font-size: 35px;
    font-family: "Bitcount Single", system-ui;
    padding: 10px;
    cursor: crosshair; 
}


.waiting{
    display: inline-block;
    font-family: "Bitcount Single", system-ui;
    transition: color 5s ease;
    
}
.waiting:hover{
    color: white;
}

.opened{
    display: inline-block;
    font-family: "Bitcount Single", system-ui;
    transition:cubic-bezier(0.165, 0.84, 0.44, 1);
}
.opened:hover{ 
    transform: rotateX(50deg) scale(3);
}

.year{
    display: inline-block;
    font-family: "Bitcount Single", system-ui;
    transition: transform 10s ;
    
}
.year:hover{
    transform: rotate(720deg) scale(10);
    background-color: black;
    color: aliceblue;
    
}

.xiaoren{
    display: inline-block;
    font-family: "Bitcount Single", system-ui;
    animation: shake 0.1s infinite; 
}
@keyframes shake {
    0%   { transform: translateX(0px) translateY(-10px); }
    25%  { transform: translateX(-15px) translateY(0px); }
    50%  { transform: translateX(5px) translateY(10px); }
    75%  { transform: translateX(-5px) translateY(0px); }
    100% { transform: translateX(10px) translateY(0px); }
}

.Hit{
    font-family: "Bitcount Single", system-ui;
    animation: flash 0.2s infinite ; 

}
@keyframes flash {
    0% { color: red ;}
    50% { color: white;}
}


div{
    display: inline-block;
    border: 5px solid black;
    padding:10px;
    font-family: "Bitcount Single", system-ui;
    margin-top: 200px;

}
video{
    max-width: 200px;
    display: block;
    margin: 10px auto;  
}