body {
    display : flex;
    justify-content:center;
    background-color: aliceblue;
    font-family: 'Poppins', sans-serif;
}
body div{
    display : flex;
    flex-direction: column;
    justify-content:center;
    max-width: 50vw;
}
body h1{
    font-size: 28px;
}


#count{
        align-self: center;
        color:pink;
        font-size: 50px;
}
#counter{
    border : 5px solid black;
    border-radius: 10%;
    text-align: center;
    min-height: 20vh;
    margin: 15px;
    padding: 5px;
}
#BTNSettings{
    background-color: transparent;
    border : none;
    max-height: 5vh;
    max-width: 5vw;
    align-self: flex-end;
}
#BTNSettings img{
        max-width:100%;
        max-height:100%;
}


.BTNClose{
    display: flex;
}
.BTNClose button{
    align-self: flex-end;
    background-color: transparent;
    border:none;
    max-width: 3.5vw;
    max-height: 3.5vh;
}
.BTNClose button img{
    max-width:100%;
    max-height:100%;
}

button:hover{
    cursor : pointer;
}
button{
    margin : 1%;
}


.popup, table, tr, th {
    border: 1px solid black;
}

.popup table tr:hover{
    border: 8px solid pink;
    cursor: pointer;
}
.popup,table, td {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    position: relative; 
}

table td::after {
    content: ''; 
    position: absolute;
    left: 100%; 
    bottom: 0; 
    width: 5px; 
    height: 2px; 
    background-color: black; 
}



.popup {
    display: flex; /* i really have to get back to this later*/
    position: absolute;
    margin: 30vh auto 0;
    padding: 20px;
    width: 40vw;
    height: fit-content;
    border-radius: 20px;
    border: 3px solid rgba(209, 213, 219, 0.3);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.65);
    transition: all 200ms ease;
}
/* lot of things in this popup css are not relevant at all its just a copy from a past project */