@font-face {
    font-family: 'Luciole Regular';
    src: url('../font/Luciole-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: 'Luciole Regular', Arial, sans-serif;
    margin: 0;
    padding: 0;
    margin-top: 20px;
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    /* margin-top: 10px; */
}

.container {
    max-width: 600px;
    margin: 0 auto;
    /* padding: 20px; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    font-family: 'Luciole Regular', Arial, sans-serif;
}

.container button {
    width: 30%;
    margin: 1%;
}
.container div {
    width: 60%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
.container div button {
    width: 40%;
}

a {
    text-decoration: none;
    font-family: 'Luciole Regular', Arial, sans-serif;
    color: #fff;
}

h1 {
    font-size: 2rem;
    margin-bottom: -15px;
    text-align: center;
    text-transform: uppercase;
    margin-top: -5px;
}

audio {
    margin-bottom: 20px;
    width: 60%;
}

button {
    font-family: 'Luciole Regular', Arial, sans-serif !important;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 1rem;
    /* width: 100%; */
    flex: 1;
    /* width: 150px; */
}
button a {
    font-family: 'Luciole Regular', Arial, sans-serif !important;
}

p a {
    font-family: 'Luciole Regular', Arial, sans-serif !important;
    background-color: #007bff;
    margin-top : 10px;
    margin-bottom : 10px;
    /* padding: 5px; */
}

button:hover {
    background-color: #0062cc;
}

@media screen and (max-width: 480px) {
    /* * {
        margin-top: 1rem;
        margin-bottom: 1rem;
    } */
    h1 {
        font-size: 1.5rem;
    }

    audio {
        width: 90%;
    }

    button {
        /* width: 100%; */
        flex : 1;
        /* width: 120px; */
        font-size: 0.8rem;
        font-family: 'Luciole Regular', Arial, sans-serif !important;
    }
    a {
        font-family: 'Luciole Regular', Arial, sans-serif !important;
    }
    button a {
        font-family: 'Luciole Regular', Arial, sans-serif !important;
    }
}

.fuckoff { 
    font-family: 'Luciole Regular', Arial, sans-serif !important;
}

.separator {
    width: 33%;
    margin-left: 0;
    border: none;
    border-top: 3px solid #000;
  }

.big-separator {
    width: 50%;
    border-top: 4px solid #000;
    margin-left: 0;
}
  

.button-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Luciole Regular', Arial, sans-serif !important;
}
.button-container button {
    margin-bottom: 10px;
    margin-top: -6px;
    /* flex: 1; */
    width: 85%;
    font-family: 'Luciole Regular', Arial, sans-serif !important;
}

#text {
    /* margin-left: 4.3rem; */
    /* margin-right: 2rem; */
    /* background-color: pink; */
    width: 90%;
    display: flex;
    
    flex-wrap: wrap;
    /* padding: 10px;
    padding: 10px; */
    text-align: left !important;
    align-content: flex-start !important;
}

#livres, #web, #article_online {
    /* background-color: yellow; */
    margin-top: 10px;
    margin-bottom: 10px;
}

#livres h3, #web h3, #article_online h3{
    /* background-color: beige; */
    text-align: left;
    /* font-style: italic; */
    text-transform: uppercase;
}

#area-of-things {
    margin : 0;
    padding : 0;
    width : 80%;
    /* align-items : center; */
    justify-content : center;
    margin-left: 18%;
    margin-right: 18%;
    /* display : flex !important; */
    flex-direction : column !important;
    justify-content: space-between !important;
    align-items: center !important;

}

#area-of-things h2 {
    margin-top: 10%;
}

#area-of-things article button {
    width : 80%;
}

/* #livres h4, #web h4, #article_online h4{
    background-color: aqua;
} */
/* #livres button, #web button, #article_online button{
    background-color: aqua;
    
} */

article {
    /* border-color: grey !important; */
    /* background: aqua !important; */
    /* border-radius: 10%; */
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
}
article h4 {
    width: 80%;
}

 /* #play-pause{
    background-color: rgb(109, 109, 109);
} */
/* article button:hover, #next:hover, #previous:hover */
#summary  {
    background-color: rgb(109, 109, 109);
    margin-left: 25%;
    margin-right: 25%
}

#summary:hover {
    background-color:  rgb(74, 74, 74);
}

#right_align {
    float: right !important;
}

#left_align {
    float: left !important;
}

.back-button {
    background-color: rgb(109, 109, 109);
}

.back-button:hover {
    background-color: rgb(74, 74, 74);
}