@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    color-scheme: dark light;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

input, button, textarea, select {
  font: inherit;
}

:root {
    --primary-color: #6e0d25;
    --light-blue: #c7e1f3;
    --black: #171614;
    --red-strip: #6f1d1b;
    --blue-strip: #143642;
    --green-strip: #333d29;
    --purple-strip: #3d314a;
}

/* ------------------------------------ */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0; /* Garante que o contêiner de partículas esteja atrás dos outros elementos */
}
body {
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    height: 100dvh;
    font-family: 'Montserrat';
}

header, main {
    position: relative;
    z-index: 1; /* Garante que o conteúdo principal esteja à frente do contêiner de partículas */
}


header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

header > a {
    text-decoration: none;
}

header > a > h1 {
    margin-left: 15px;
    font-size: 3rem;
    color: var(--primary-color);
    margin-right: 15px;
}

main {
    margin-left: 15px;
    margin-right: 15px;
    column-gap: 1em;
    display: grid;
    grid-template-columns: 1fr 3fr;
    justify-items: start;
}

/* main > layout (right-side) */

#layout {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(4, 250px);
    grid-template-rows: repeat(3, 290px);
}

.book-placeholder {
    display: grid;
    background-color: #dbd8d8b7;
    border-radius: 10px;
    width: 75%;
    height: 80%;
}

.book {
    position: relative;
    bottom: 3px;

    display: grid;
    grid-template-columns: 1em 1fr;
    grid-template-rows: 25px 4em min-content 1fr;
    
    border-radius: 10px;
    background-color: var(--black);
    box-shadow: 1px 1px 0px #F5F5DC,
                2px 2px 0px #F5F5DC,
                3px 3px 0px #F5F5DC,
                4px 4px 0px #000000,
                5px 5px 0px #000000,
                6px 6px 0px #000000;

    transition: .15s ease-in-out;
    word-wrap: break-word;

    .book-icons {
        visibility: hidden;
    };
}

.book:hover {
    transform: scale(1.03);
    cursor: pointer;
    .book-icons {
        visibility: visible;
    }
    .book-info {
        visibility: visible;
    }
}

.book-side-stripe {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    grid-row: 1 / -1;
    background-color: var(--green-strip);
}

.book-title-bg {
    grid-column: 2 / -1;
    grid-row: 2 / 3;
    background-color: #252322;
}

.book > p {
    max-width: 15ch;
    margin-left: 5px;
    margin-right: 5px;
    grid-column: 2 / -1;
    grid-row: 2 / 3;
    align-self: center;
    color: white;
    text-align: center;
    font-size: 1rem;
}

.book-info {
    margin-top: 10px;
    align-self: start;
    text-align: center;
    grid-row: 3 / -2;
    color: lightgray;

    visibility: hidden;
    transition: .2s ease-in-out;
    font-size: 0.8rem;
}

.book-icons {
    grid-row: 4 / -1;
    align-self: end;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.book-icons > img {
    transition: .2s ease-in-out;
}

.book-icons > img:hover {
    transform: translateY(10%);
}

/* main > left-side */

#left-side {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr min-content;

    width: 100%;
    justify-items: center;
    align-items: end;
    row-gap: 5em;
}

button#new-book {
    border: none;
    border-radius: 15px;
    background-color: var(--primary-color);
    padding: 1em 2em;
    margin-bottom: 2em;
    color: white;
    transition: .1s ease;
}

button#new-book:hover {
    cursor: pointer;
    filter: brightness(70%);
}
    
button#new-book:active {
    transform: scale(0.95);
}

#book-form {
    display: grid;
    row-gap: 1em;
    padding: 2em;
    border-radius: 10px;
    background-color: var(--black);
    color: white;

    /* visibility: hidden; */
    /* opacity: 0; */
}

form > h1 {
    text-align: center;
    max-width: 10ch;
}

.form-row > input,
.form-row > button {
    border-radius: 5px;
}

.form-row > input {
    outline: none;
}

.form-row {
    display: flex;
    flex-direction: column;
}

#submit-book {
    border: none;
    background-color: #588157;
    cursor: pointer;
}

#cancel-book-submit {
    border: none;
    background-color: #bc4b51;
    cursor: pointer;
}

#reading-status {
    display: flex;
    align-items: center;
    justify-content: start;
    column-gap: .5em;
}

#read {
    transform: scale(1.2);
    margin-left: .1em;
}

.form-row#buttons {
    display: flex;
    flex-direction: row;
    margin-top: 1em;
    column-gap: 1em;
}

.form-row > button {
    flex: 1;
    display: flex;
    justify-content: center;
}

.form-row > button:hover {
    opacity: 80%;
}

.form-row > .error-message {
    display: none;
    margin-top: .2em;
    font-size: .8rem;
    color: #bc4b51;
}