add_book.css

.add{
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    bottom: 3%;
    right: 30%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 191px;
    height: 64px;
    font-size: inherit;
    font-family: inherit;

}

.add:hover{
    transform: scale(1.1);
    transition: 0.2s linear;
}

.cancel{
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    bottom: 3%;
    left: 30%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 191px;
    height: 64px;
    font-size: inherit;
    font-family: inherit;
}

.cancel:hover{
    transform: scale(1.1);
    transition: 0.2s linear;
}

.book, .author, .year{
    position: absolute;
    text-align: center;
    left: calc(50% - 150px);
    width: 300px;
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    border: none;
}

.book{
    top: calc(40% - 80px);
}

.author{
    top: 40%;
}

.year{
    top: calc(40% + 80px);
}

.frame{
    position: absolute;
    background-color: var(--color-gainsboro);
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    color: var(--color-black);
    font-size: var(--font-size-13xl);
    font-family: var(--font-jost);
}



.logo_group{
    cursor: pointer;
    position: absolute;
    left: 2%;
    top: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    font-size: 45px;
}

#logo{
    font-size: calc(45px * 0.7);
}

.logo_group:hover{
    transform: scale(1.1);
    transition: 0.2s linear;
}