*{
    margin:0;
    padding: 0;
}
table{
    border: 2px solid rgb(200 200 200);
    font-size: 0.8rem;
    border-collapse: collapse;
    background-color: white;
}
td,th{
    border: 2px solid rgb(200 200 200);
    padding: 10px 20px;
}
td {
  text-align: center;
}
caption{
    padding:2rem;
    font-size:2rem;
}
.library-wrapper{
    display:flex;
    flex-direction:column;
   gap:8rem;
   
    justify-content:start;
    align-items:center;
    height:100vh;
}
.library-content{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
button{
    background-color: lightblue;
    border-radius:8rem;
    width:8rem;
}
button:hover{
    background-color: black;
    color:white;
    border-radius:8rem;
    width:8rem;
}
.library-title{
    font-size:5rem;
}
body{
    display:flex;
    justify-content: center;
    align-items: center;
}
input{
    border-radius: 5rem;
    padding-left:0.35rem;
}
form{
    display:flex;
    flex-direction:column;
    gap:2rem;
}
dialog{
    border-radius: 5rem;
    position: relative;
  
}
.class{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:2rem;
}
.close{
position: fixed;
top:10px;
right:60px;
height:1.2rem;
width:1.2rem;
border-radius:50%;
background-color: red;
}
.close:hover{
position: fixed;
top:10px;
right:60px;
height:1.2rem;
width:1.2rem;
border-radius:50%;
background-color: red;
}
body{
    background-color: lightgrey;
}
.delete{
    width:auto;
    padding:0.5rem;
}
.delete:hover{
    width:auto;
    
}