:root{
    --opacity: 0.85;
    --font-color: rgb(71, 71, 71);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: sans-serif;
    transition: 0.15s;
}

body{
    /* background: linear-gradient(125deg, rgb(255, 255, 243), rgb(232, 222, 241), rgb(255, 252, 227)); */
    background-image: url(./image/img.jpg);
    /* background-position: 0% 0%; */
    background-size: cover;
    color: rgba(255, 255, 255, 0.884);

}

.container{
    background: radial-gradient(#0000, #0002 50%, #0005 70%,  #0a0a0a);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter:brightness(100%);

}

table{
    min-width: 55%;
    max-width: 100%;
    margin-top: 30px;
    padding: 10px;
    /* border: 1px rgba(255, 192, 203, 0.603) solid; */
    border-collapse: collapse;
    border: 10px rgba(58, 10, 10, 0.24) solid;
    border-radius: 15px;
    font-size: 1.2rem;
    /* backdrop-filter: blur(1px); */
}

caption{
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.932);
    text-shadow: 1px 1px 5px rgb(12, 12, 11);
    margin: 10px;
    transition: 0.3s;
}

caption:hover{
    text-shadow: 1px 2px 3px rgb(141, 35, 21),
        20rem 0 1px rgba(248, 110, 110, 0.842),
        -20rem 0 1px rgba(248, 193, 110, 0.767)
    ;
    letter-spacing: 0.65rem;
}

td{
    /* border: 1px solid rgba(182, 139, 139, 0.555); */
    min-width: 3rem;
    padding: 5px 5px;
}

thead > tr > td{
    background: rgba(133, 18, 37, var(--opacity));
}


thead > tr > td:hover{
    letter-spacing: 0.5rem;
}

tbody > tr > td:nth-child(1){
    background: rgba(136, 53, 28, 0.096);
    padding: 5px 15px;
}

tbody > tr > td:nth-child(1):hover{
    background: #5c0e0ed3;
}

tbody > tr > td:nth-child(1):hover .time{
    color: #f7f7f7;
}


tbody > tr > td:nth-child(n+2){
    font-size: 0.9rem;
}

tbody > tr:nth-child(2n){
    background: rgba(249, 255, 232, var(--opacity));
    color: var(--font-color);
}

tbody > tr:nth-child(2n+1){
    background: rgba(243, 216, 198, var(--opacity));
    color: var(--font-color);
}

tfoot{
    height: 40px;
}

.time{
    font-size: 0.8rem;
    color: #585858;
}

td:hover{
    background: rgba(88, 24, 34, 0.863);
    color: rgb(255, 255, 255);
}

td span{
    display: block;
    font-size: 0.8rem;
}