td{
    border:solid white 2px;
    border-radius: 5px;
    height: 80px;
    width:80px;
    word-wrap: break-word;
    vertical-align: text-middle;
    text-overflow:ellipsis;
}
.title{
    width:150px;
}
td a{
    color:black;
    text-decoration: none;
}
td a:hover{
    color:red;
}
.delButton{
    height: 80px;
    width:80px;
    background-color: red;
    border:transparent;
}
.delButton > a{
    color:white;
    font-size: XXX-large;
    padding:17px 34px;
}
.content > a{
    border: 1px solid;
    padding: 3px 20px;
    background-color: darkgray;
    color:white;
}
.delButton > a:hover{
    color:white;
}
tr{
    display:flex;
    justify-content: space-evenly;
    width:100%;
    height:90px;
}
table{
    background-color: aqua;
    width:90%;
    border-radius: 15px;
}
thead td{
    color:white;
    background-color: darkblue;
    border-radius: 10px;
}
.inputForm div{
    margin:20px 0px;
}
.loginForm{
    display:flex;
    flex-direction: column;
}
.loginForm div{
    margin:10px;
}
.itemBox{
    border:1px solid;
    width:200px;
    height:100px;
}
.itemDisplay{
    display:flex;
    flex-wrap:wrap;
}
.modal {
    position: fixed;
    inset: 0;
    background: rgba(254,
            126,
            126,
            0.7);
    display: none;
    align-items: center;
    justify-content: center;
}
.content {
    position: relative;
    background: white;
    padding: 1em 2em;
    border-radius: 4px;
}
.modal:target {
    display: flex;
}
.req {
    color:red;
    vertical-align: super;
    font-size: small;
}