body{
    display: flex;
}

article{
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: auto;
}


table{
    margin: auto;
    width: 100%;
}

.first{
    background-color: #4CAF50;
}

table,td,tr{
    border: 1px solid gray;
    border-collapse: collapse;
}

.buttons{
    background: none;
    border: none;
    color: rgb(10, 47, 255);
}

#buttonsCenter{
    text-align: center;
}


button, input[type="submit"] {
    cursor: crosshair;
    transition: 0.2s ease;
}

button:hover, input[type="submit"]:hover {
    cursor: crosshair;
    transform: scale(1.05);
}


/* CSS para el div de eliminar libros  */

.deleteDiv{
    border: 1px solid black;
    background-color: white;
    transform: translate(-50%, 100vh);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 20%;
    height: 20vh;
    border-radius: 0 0 10px 10px white;
    border-radius: 10px;
    transition: 1s ease;
}

#deleteTrue{
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    height: 60px;
    width: 100px;
    margin: auto;


}

#dontDelete{
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    height: 60px;
    width: 100px;
    margin: auto;

}

.buttonssDiv{
    display: flex;
    width: 70%;
    margin: auto;
}

.deleteBook{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.deleteBook div {
    display: flex;
}

/* CSS para el div de editar libros  */


.editDiv{
    border: 1px solid black;
    background-color: white;
    transform: translate(-200vw, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 88%;
    height: 90vh;
    margin: auto;
    border-radius: 0 0 10px 10px white;
    border-radius: 10px;
    transition: 1s ease;
}

.editBook{
    padding: 20px;
    display: flex;
    flex-direction: column;
    font-size: x-large;
}

.editBook *{
    margin-bottom: 35px;
}

.editBook h1{
    margin: auto;
}

.editBook hr {
    border: 1px solid #4CAF50;
    width: 70%;
    margin: auto;
}

#editForm{
    display: flex;
    flex-direction: column;
}

#editForm input{
    height: 30px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: large;
    padding: 15px;
}

#editForm select{
    height: 50px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: large;
    padding: 15px;
}


#editForm div{
    display: flex;
    width: 20%;
    margin: auto;
}

#editForm div input[type="submit"], #returnButtonFromEdit {
    margin: auto;
}

#editForm .submitButton{
    background-color: #4CAF50;
    color: white;
    border: none;
    width: 120px;
    text-align: center;
    height: 60px;
}


#returnButtonFromEdit{
    background-color: gray;
    border-radius: 5px;
    color: white;
    border: none;
    font-size: large;
    height: 60px;
    width: 120px;

}

/* CSS para el div de añadir libros  */

.Add{
    background-color: #4CAF50;
    border: none;
    border-radius: 7px;
    width: 150px;
    height: 60px;
    margin-bottom: 30px;
    color: white;
    cursor: crosshair;
}

.defaultDiv{
    border: 1px solid black;
    background-color: white;
    transform: translate(100vw, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 88%;
    height: 90vh;
    margin: auto;
    border-radius: 0 0 10px 10px white;
    border-radius: 10px;
    transition: 1s ease;
}



.addBook{
    padding: 20px;
    display: flex;
    flex-direction: column;
    font-size: x-large;
}

.addBook *{
    margin-bottom: 45px;
}

.addBook h1{
    margin: auto;
}

.addBook hr {
    border: 1px solid #4CAF50;
    width: 70%;
    margin: auto;
}

#addForm{
    display: flex;
    flex-direction: column;
}

#addForm input{
    height: 30px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: large;
    padding: 15px;
}

#addForm select{
    height: 50px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: large;
    padding: 15px;
}


#addForm div{
    display: flex;
    width: 20%;
    margin: auto;
}

#addForm div input[type="submit"], #returnButton {
    margin: auto;
}

#addForm .addButtonSubmit{
    background-color: #4CAF50;
    color: white;
    border: none;
    width: 120px;
    text-align: center;
    height: 60px;
}


#returnButton{
    background-color: gray;
    border-radius: 5px;
    color: white;
    border: none;
    font-size: large;
    height: 60px;
    width: 120px;

}