* {
     margin: 0;
     padding: 0;
}

body {
     background-image: linear-gradient(90deg , rgba(0 , 0 , 0 ,0.4) , rgba(255 , 255 , 255 , 0.9));
}

.container {
     display: grid;
     grid-template-columns: minmax(300px ,1fr);
}

.conten-1 {
     width: 100%;
     min-height: 45vh;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: space-around;
     position: relative;
}

.conten-1 h2 {
     text-shadow: 5px 5px rgba(255 , 255 , 255 , 1);
     color: rgba(0, 0, 0, 0.75);
     font-weight: 100;
     font-family: 'Lobster', 'cursive';
     font-size: 2em;
}


.alert {
     text-align: center;
     position: absolute;
     top: 90px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.5);
     padding-bottom: 3px;
     width: 300px;
     visibility: hidden;
     opacity: 0;
}

.alert.aktif {
     visibility:visible;
     opacity: 1;
}

#book-form {
     display:grid;
     grid-template-columns: repeat(2 ,minmax(300px ,1fr));
     gap: 10px;
     column-gap: 50px;
     flex-direction: column;
     align-items: flex-end;
}

#book-form label {
     font-size: 1.4em;
     font-weight: 500;
}


.field {
     width: 100%;
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}

label {
     font-size: 1.2em;
}

input {
     border: 1px solid black;
     border-radius: 20px;
     padding-left: 10px ;
     font-size: 1em;
     position: relative;
     margin-left: 5px;
     min-width: 300px ;
     min-height: 30px;
}

.content-2 {
     width: 90%;
     padding-top: 20px;
     border-top: 2px solid rgba(0, 0, 0, 0.5);
     margin: 10px auto;
     display: flex;
     justify-content: center;
}

table {
     text-align: center;
     width: 90%;
     font-size: 1.2em;
} 

#book-form .button {
     display: flex;
     justify-content: end;
}

#book-form button {
     font-size: 1em;
     min-height: 30px;
     margin-top: 10px;
     margin-left:10px ;
     min-width: 98px;
     position: relative;
     cursor: pointer;
     border: 1px solid black;
     border-radius: 20px;
     background-color: #fff;
}

#book-form button:hover {
     box-shadow: 0px 0px 2px black;
}

thead td {
     padding: 5px 10px;
     font-weight: 600;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
}    

tbody tr {
     background-color: #fff;
     color: rgba(0, 0, 0, 0.7);
}

tbody tr:nth-child(2n+2) {
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
}


.delete {
     cursor: pointer;
}

.delete:hover {
     color: skyblue;
}