/*------------------------------------------------------------
# RESET STYLES
-------------------------------------------------------------*/
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/*------------------------------------------------------------
# CSS VARIABLES
-------------------------------------------------------------*/
:root {
    --font-primary : "Roboto", sans-serif;
    --font-secondary : "Montserrat", sans-serif;

    --fs : clamp(0.8em, 1em, 1.2em);

    --border : 1px solid #000;

    --padding-10 : 10px;

    --gap-10 : 10px;

    --cursor-pointer : pointer;

    --transform : scale(1.5);
}
/*------------------------------------------------------------
# General
-------------------------------------------------------------*/
html, body {
    position: relative;
    background-color: rgb(208, 218, 223);
    font-family: var(--font-secondary);
}
/*------------------------------------------------------------
# Header
-------------------------------------------------------------*/
header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    padding: var(--padding-10);
}
#entete {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.2);  
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);   
}
#title1 {
    padding-left: 25px;
}
#menu {
     padding: 20px;
     margin-left: 10px;
}
#menu a {
    font-size: 1.2em;
    text-decoration: none;
    color: #000;
}
#menu:hover {
    background-color: rgb(208, 218, 223);
    border-radius: 10px;
}
header h2 {
    font-size: 1.1em;
    font-weight: normal;
    padding: var(--padding-10);
    margin-right: 100px;
}
/*------------------------------------------------------------
# Main
-------------------------------------------------------------*/
main {
    margin: 50px auto;
    width: 900px;
    background-color: #fff;
    border-radius: 10px;
}
main h2 {
    text-align: center;
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: normal;
    padding: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
/*------------------------------------------------------------
# Main section Book Info 
-------------------------------------------------------------*/
main #title {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-10);
    margin: 50px 0px 50px 50px;
}
#title input {
    padding: var(--padding-10);
    font-size: var(--fs);
    width: 40%;
    border: var(--border);
    border-radius: 5px;
}
#title label {
    font-size: 1.1em;
}
main #author {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-10);
    margin: 50px 0px 50px 50px;
}
#author input {
    padding: var(--padding-10);
    font-size: var(--fs);
    width: 40%;
    border:  var(--border);
    border-radius: 5px;
}
#author label {
    font-size: 1.1em;
}
main #editor {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-10);
    margin: 50px 0px 50px 50px;
}
#editor input {
    padding: var(--padding-10);
    font-size: var(--fs);
    width: 40%;
    border: var(--border);
    border-radius: 5px;
}
#editor label {
    font-size: 1.1em;
}
main #edition {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-10);
    margin: 50px 0px 0px 50px;
}
#edition input {
    padding: var(--padding-10);
    font-size: var(--fs);
    width: 40%;
    border: var(--border);
    border-radius: 5px;
}
#edition label {
    font-size: 1.1em;
}
main h3 {
    font-size: 1.2em;
    margin-left: 50px;
    font-weight: normal;
}
/*------------------------------------------------------------
# Main section CoverType
-------------------------------------------------------------*/
main #CoverType {
    margin-top: 50px;
}
main #Cover {
    display: flex;
    justify-content: flex-start;
    gap: 310px;
    align-items: flex-end;
    margin: 25px 0 0 60px;
}
#Cover input {
    transform: var(--transform);
    margin-right: 15px;
    cursor: var(--cursor-pointer);
}
#Cover label {
    font-size: var(--fs);
}
/*------------------------------------------------------------
# Main section Categorie
-------------------------------------------------------------*/
main #Categorie {
    margin-top: 50px;
}
#inner_categorie_div {
    display: flex;
    gap: 200px;
    margin-left: 50px;
}
#inner_categorie_div input {
    transform: var(--transform);
    margin: 15px;
    cursor: var(--cursor-pointer);
}
#inner_categorie_div label {
    font-size: var(--fs);
}
/*------------------------------------------------------------
# Main section Available
-------------------------------------------------------------*/
main #Available {
    margin-top: 50px;
}
main #Disponible {
    display: flex;
    justify-content: flex-start;
    gap: 310px;
    align-items: flex-end;
    margin: 25px 0 0 60px;
}
#Disponible input {
    transform: var(--transform);
    margin-right: 15px;
    cursor: var(--cursor-pointer);
}
#Disponible label {
    font-size: var(--fs);
}
/*------------------------------------------------------------
# Main section Unity_Price
-------------------------------------------------------------*/
#Unity_Price h3 {
    margin-top: 50px;
}
#Unity_Price input {
    padding: var(--padding-10);
    font-size: var(--fs);
    width: 40%;
    border: var(--border);
    border-radius: 5px;
    margin-left: 50px;
}
/*------------------------------------------------------------
# Main Buttons
-------------------------------------------------------------*/
#buttons {
    margin-top: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
#save {
    padding: 15px;
    font-size: var(--fs);
    border: var(--border);
    border-radius: 10px;
    margin: 50px 0 50px 350px;
    cursor: var(--cursor-pointer); 
}
#submit {
    padding: 15px;
    margin: 50px 10px 50px 0px;
    font-size: var(--fs);
    color: #fff;
    background-color: green;
    border: var(--border);
    border-radius: 10px;
    cursor: var(--cursor-pointer);
}
::placeholder {
    color : rgba(0, 0, 0, 0.8)
}
/*------------------------------------------------------------
# Footer
-------------------------------------------------------------*/
footer p {
    text-align: center;
    font-size: var(--fs);
    padding: var(--padding-10);
}
/*------------------------------------------------------------
# MEDIA QUERIES
-------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    main {
        width: 100%;
        margin: 20px;
    }
    #title input,
    #author input,
    #editor input,
    #edition input,
    #Unity_Price input {
        width: 80%;
    }
    #menu {
        padding: var(--padding-10);
        margin-left: 0;
    }
    #menu a {
        font-size: var(--fs);
    }
    header h2 {
        margin-right: 0;
    }
    #buttons {
        text-align: center;
    }
    #save,
    #submit {
        margin: 20px auto;
    }
}
@media screen and (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }
    main {
        width: 100%;
        margin: 10px;
    }
    #title input,
    #author input,
    #editor input,
    #edition input,
    #Unity_Price input {
        width: 80%;
    }
    main #Cover {
        gap : 50px;
    }
    main #Disponible {
        gap : 50px;
    }

    #inner_categorie_div {
        gap : 50px;
    }
    #menu {
        padding: 5px;
        margin-left: 0;
    }
    #menu a {
        font-size: 0.9em;
    }
    header h2 {
        margin-right: 0;
    }
    #buttons {
        text-align: center;
    }
    #save,
    #submit {
        margin: 10px auto;
    }
}