* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border-radius: 4px;
        border: none;
        font-family: "Ubuntu", sans-serif;
        font-weight: 500;
        font-style: normal;
      }
      body {
        height: 100vh;
        background-color: #2a2a2a;
        color: #88c6d2;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 70px;
        justify-content: center;
      }
      .hidden {
        display: none !important;
      }
      h1 {
        text-align: center;
        margin-top: 40px;
      }
      .contents {
        height: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }
      .button {
        border: 1px solid #ffffff;
        height: max-content;
        padding: 20px;
        cursor: pointer;
      }

      /* Form Styling */
      form {
        width: 50%;
        min-width: 235px;
        height: max-content;
        border: 1px solid #ffffff;
        padding: 15px 10px;
        display: flex;
        flex-direction: column;
        max-width: 350px;
      }
      input {
        height: 40px;
        padding: 4px 5px;
        width: 100%;
        margin-bottom: 15px;
      }
      input:focus {
        background-color: #c3c3c3;
      }
      #reset {
        display: inline-block;
      }
      .inputButtons {
        display: flex;
        gap: 5px;
        width: 100%;
        margin-top: 10px;
      }
      .inputButtons input {
        cursor: pointer;
      }
      .inputButtons input:hover {
        background-color: #b1b1b1;
      }
      .goBack {
        display: flex;
        cursor: pointer;
        background-color: #c3c3c3;
        padding: 10px 15px;
        color: #000000;
      }

      /* Card */
      .mainCardContent {
        display: flex;
        width: 100%;
        gap: 10px;
        justify-content: center;
      }
      .card {
        position: relative;
        min-width: 200px;
        width: 35%;
        max-width: 300px;
        min-height: 350px;
        border: 1px solid;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: large;
      }
      .image {
        background-image: url("./book.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 200px;
      }
      .cardBack,
      .cardForward {
        display: flex;
        font-size: 10px;
        align-items: center;
        cursor: pointer;
      }

      .lable{
        color: #88c6d2;
       
      }
      .authorData,.genreData,.titleData{
        font-size: 15px;
        text-wrap: wrap;
        color: #c4c4c4;
        
      }
      .badge{    
        color: #ffffff;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 35px;
    border-radius: 50%;
    width: 35px;
    background-color: #4387897d;
    backdrop-filter: blur(10px);
    border: 1px solid #88c6d2;
      }
      .miscButtons{
        margin-top: 10px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .readButton, .removeButton{
        border: 1px solid;
        width: 45%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
      }
      
      .alreadyRead{
        background-color: rgb(0, 128, 128);
        color: #ffffff;
      }