@import url(reset.css);
@import url(global_components.css);

html {
    scroll-behavior: smooth;
}

* {
    text-decoration: none;
    box-sizing: border-box;
}

body {
    font-family: "Belanosima", sans-serif;
    background-color: #f8f4ea;
}

.section {
    min-height: calc(100vh - 75px);
    margin: 0 8vw 9vw 8vw;
}

#header-catalogue {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 4rem;
    font-weight: 400;
    color: #3D2D00;
    margin-top: 6vh;
    margin-bottom: 256px;
}

.box-title {
    font-size: 1.25rem;
    font-weight: 400;
    /* margin-bottom: 150px; */
    margin-bottom: 7rem;
    text-align: center;
    text-transform: uppercase;
    color: #000;
}

#meta {
    font-size: 1.5rem;
    font-weight: 400;
}

.decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.decorations img {
    position: absolute;
}

.deco-fourchette {
    top: 29.5%;
    right: 9.5%;
    width: 3%;
    transform: scaleX(-1);
    animation: flotter 3s ease-in-out infinite alternate;
}

@keyframes flotter {
    0% {
        transform: scaleX(-1) translateY(0) rotate(-10deg);
    }

    100% {
        transform: scaleX(-1) translateY(-12px) rotate(10deg);
    }
}

.deco-ligne-gauche {
    top: 30%;
    right: 0%;
    width: 10%;
    transform: scaleX(-1);
}

#grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    width: fit-content;
    margin: 56px auto 0 auto;
    border-top: 3px solid #000;
    border-left: 3px solid #000;
}

.box-ile,
.box-fee,
.box-dragon,
.box-jungle,
.box-meteorites {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 400px; */
    max-height: 500px;
    padding: 36px 70px;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;

    position: relative;
    overflow: hidden;
}

.box-ile {
    background-color: #6872FF;
}

.box-fee {
    background-color: #FFD04D;
}

.box-dragon {
    background-color: #A5DB76;
}

.box-jungle {
    background-color: #FF8411;
}

.box-meteorites {
    background-color: #74B5FF;
}


.box-img {
    display: flex;
    width: auto;
    max-width: 100%;
    height: 196px;
    object-fit: contain;
    margin-top: 20px;
    z-index: 1;
}

#img-bg-ile,
#img-bg-fee,
#img-bg-dragon,
#img-bg-jungle,
#img-bg-meteorite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#perroquet1 {
    position: absolute;
    top: 15%;
    left: 0%;
}

#gouvernail {
    position: absolute;
    top: 31%;
    left: 24%;
}

#argent {
    position: absolute;
    top: 13%;
    right: 5%;
}

#eppe {
    position: absolute;
    bottom: 20%;
    right: 0%;
}

#baguette {
    position: absolute;
    top: 17%;
    left: 0%;
}

#fleur1 {
    position: absolute;
    bottom: 3%;
    left: 3%;
}

#fee {
    position: absolute;
    top: 22%;
    right: 3%;
}

#feu {
    position: absolute;
    top: 11%;
    left: 0%;
}

#dragon {
    position: absolute;
    top: 30%;
    left: 6%;
}

#oeuf {
    position: absolute;
    top: 55%;
    right: 0%;
}

#perroquet2 {
    position: absolute;
    top: 41%;
    left: 10%;
}

#liane1 {
    position: absolute;
    width: 101%;
    top: 1%;
    left: 0%;
}

#liane2 {
    position: absolute;
    width: 101%;
    top: 0%;
    left: 0%;
}

#fleur2 {
    position: absolute;
    top: 45%;
    right: 0%;
}

#planet1 {
    position: absolute;
    top: 38%;
    left: 0%;
}

#fusee {
    position: absolute;
    top: 23%;
    left: 23%;
}

#etoile {
    position: absolute;
    bottom: 1%;
    left: 9%;
}

#planet2 {
    position: absolute;
    top: 48%;
    right: 0%;
}