body{

background:#161616;
color:white;

font-family:Georgia, serif;

text-align:center;

padding:40px;

}

.backBar{

    position:fixed;

    top:20px;

    left:20px;

    padding:10px 18px;

    background:#111;

    border:1px solid #444;

    border-radius:20px;

    z-index:9999;

}


.backBar a{

    color:white;

    text-decoration:none;

}



#loginBox,
#userBox{

    position:fixed;

    top:20px;

    right:20px;

    width:220px;

    background:#222;

    padding:10px;

    border-radius:10px;

    border:1px solid #555;

    z-index:9999;

}


#loginBox input{

width:120px;

margin:3px;

padding:5px;

background:#111;

color:white;

border:1px solid #555;

}


#loginBox button,
#userBox button{

background:#b787ff;

color:white;

border:none;

padding:5px 10px;

border-radius:6px;

cursor:pointer;

}


#userBox span{

margin-right:10px;

color:#b787ff;

font-weight:bold;

}



#addButtonContainer{
    width:100%;
    display:flex;
    justify-content:center;
    margin:20px 0;
}


#addButton{
    padding:10px 25px;
    cursor:pointer;
}

#addButton{
    background:#b787ff;
    color:white;
    border:none;
    border-radius:8px;
}


.card{
    position:relative;
}


.deleteButton{

    position:absolute;

    top:5px;

    right:8px;

    font-size:20px;

    color:#888;

    cursor:pointer;

    z-index:10;

}


.deleteButton:hover{

    color:#ff5555;

}



.deleteButton:hover{

    color:#ff6b6b;

}

button{

background:#b787ff;

border:none;

padding:12px 20px;

border-radius:8px;

cursor:pointer;

margin-bottom:30px;

}


.board{

display:flex;

justify-content:center;

gap:20px;

}


.column{

background:#222;

border:1px solid #555;

border-radius:15px;

width:250px;

min-height:400px;

padding:20px;

}


.column h2{

color:#b787ff;

}


.card{

background:#333;

padding:15px;

margin:15px 0;

border-radius:10px;

cursor:grab;

}


.card h3{

margin-top:0;

}


.card small{

color:#aaa;

}