/* 1. 2.

4. #formAddBook 5. #outputMyLibrary 6. :hover, :focus, :active /* ---------------------------------------------------------------------- */ /* !!! 1. !!! */ * { box-sizing: border-box; font-family: 'Lucida Console', 'Courier New', monospace; } body { background-color: #cd853f; } /* ---------------------------------------------------------------------- */ /* !!! 2.

!!! */ header { position: fixed; top: 0; width: 100%; height: 8em; margin: auto; background-color: #cd853f; } h1 { text-align: center; } #buttonAddBook { display: block; margin: auto; padding: 0.5em; border: none; border-radius: 0.3em; font-size: 1.2em; background-color: #0080ff; color: white; } /* ---------------------------------------------------------------------- */ /* !!! 3.

!!! */ main { padding-top: 8em; } /* ---------------------------------------------------------------------- */ /* !!! 4. #formAddBook !!! */ #formAddBook { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; overflow: auto; max-width: 60%; text-align: center; margin: auto; padding: 1em; border: 0.1em solid black; background-color: rgb(204, 204, 204); } #buttonCloseForm { float: right; font-weight: bold; } #title, #author, #pages { width: 80%; height: 2em; margin: auto; } #read { height: 1.5em; width: 1.5em; vertical-align: bottom; } #buttonSubmit { height: 2em; padding: 0 2em; border: 0.1em solid gray; border-radius: 0.5em; background-color: #b0e0e6; } /* ---------------------------------------------------------------------- */ /* !!! 5. #outputMyLibrary !!! */ /* classes from javascript */ #outputMyLibrary { display: flex; flex-flow: row wrap; gap: 2em; justify-content: space-evenly; margin-top: 2em; text-align: center; } .divBook { flex: 1 1 auto; border: 0.1em solid black; padding: 1em; background-color: #ffdab9; } .divButtons { display: flex; flex-flow: row wrap; gap: 1em; justify-content: space-evenly; text-align: center; } .buttonToggleRead { border: none; border-radius: 0.5em; display: block; margin: auto 0.5em; padding: 0.5em; background-color: #9acd32; } .buttonRemoveBook { border: none; border-radius: 0.5em; display: block; margin: auto 0.5em; padding: 0.5em; background-color: #ff69b4; } /* ---------------------------------------------------------------------- */ /* !!! 6. :hover, :focus, :active !!! */ #buttonCloseForm:hover, #buttonCloseForm:focus { border: 0.1em solid black; cursor: pointer; } #buttonCloseForm:active { border: 0.2em solid black; cursor: pointer; } #buttonAddBook:hover, .buttonToggleRead:hover, .buttonRemoveBook:hover, #buttonSubmit:hover, #buttonAddBook:focus, .buttonToggleRead:focus, .buttonRemoveBook:focus, #buttonSubmit:focus { border: 0.1em solid black; cursor: pointer; } #buttonAddBook:active, .buttonToggleRead:active, .buttonRemoveBook:active, #buttonSubmit:active { border: 0.1em solid black; color: white; cursor: pointer; }