@font-face {
    font-family: "little-days";
    src: url(../font/Little\ days.ttf);
}

h1, h2 {
    font-family: little-days;
    color: #2a292c;
}
p, q, a{
    color: #2a292c;
}

a{
    text-decoration: none;
}

header {
    min-width: 100%;
    background-color: #b4d489;
    text-align: center;
}
h1 {
    font-size: 5em;
}
h2 {
    font-size: 2em;
    font-weight: 600;
} 

body {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    
}

main::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: url("../images/publicdomainpictures-silver-313347_1280.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0.2;
    z-index: -1;
    filter: blur(5px);
}

main {
    padding: 0% 5%;
}

footer{
    margin-top: 20px;
    padding: 8px 16px;
    display: flex;
    min-width: 98%;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: #b4d489;
    color: #2a292c;
    font-size: medium;
}

.menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.menu-items {
    margin: 25px;
    width: 200px;
    height: 200px;
    padding: 10px 10px;
    border: #2a292c solid 2px;
    border-radius: 64px;
    background-color: #b3d48960;
    
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}

#paragraphe-b612 {
    columns: 2;
    max-width: 50%;
}

.citation-paragraphe {
    max-width: 50%;
}

.contenu-section{
    margin-top: 2vh;
    border: #2a292c solid 2px;
    border-radius: 8px;
    padding: 3%;
}
.contenu-details {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}

.explorer-plus-details {
    text-align: center;
}

.btn {
    
    padding: 8px 16px;
    border: #2a292c inset 2px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    background-color: #eec130;

}

.img-s {
    max-width: 180px;
    max-height: auto;
}
.img-m{
    max-width: 500px;
    max-height: auto;
}

@media screen and (max-width: 830px) {
    .img-s {
    max-width: 100px;
    max-height: auto;
}
.img-m{
    max-width: 280px;
    max-height: auto;
}
.menu-items {
    margin: 10px;
    width: 120px;
    height: 120px;
    padding: 5px;
    
    font-size: smaller;
}
footer, .menu-items, header {
    background-color: #df829882;
}
.citation-paragraphe {
    max-width: 100%;
    text-align: center;
}
}