@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Crete+Round&family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Indie+Flower&family=Neucha&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Paytone+One&family=Roboto+Slab:wght@100..900&display=swap');
html {
    background: rgb(246,255,255);
    background: linear-gradient(180deg, rgba(246,255,255,1) 0%, rgba(230,255,255,1) 70%, rgba(211,250,255,1) 84%, rgba(173,216,230,1) 100%);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    font-family: "Roboto Slab", serif;
}

body {
    text-align: center;
}

.devant{
    position: absolute;
    z-index: 100;
}

.myButton {
    padding: 8px 14px 8px 14px;
    border: 1px solid blue;
    border-radius: 10px;
    background-color: transparent;
    margin-bottom: 10px;
    color: blue;
}

.myButton:hover {
    cursor: pointer;
}

.titre {
    max-width: 50%;
    height: auto;
    margin-top: 50px;
}

.description {
    margin-top: 20px;
    margin-bottom: 50px;
    font-size: 20px;
    color: #0B5791;
}

.boites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 50px;
}

.boite {
    margin: 10px;
    max-width: 30%;
    height: auto;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.boite img {
    max-width: 100%;
    height: auto;
    transition: transform 0.2s ease-out;
}

.boite:hover {
    transform: scale(1.01);
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.2));
}

.boite:hover img {
    transform: scale(1.01);
}


@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: rgba(42, 118, 240, 0);
    background-image: url("bout.png");
    animation: animate 19s linear infinite;
}

.background li img {
    height: 100%;
    opacity: 20%;
}


.background li:nth-child(0) {
    left: 12%;
    width: 42px;
    height: 42px;
    bottom: -42px;
    animation-delay: 1s;
    transform: rotate(15deg);
}
.background li:nth-child(1) {
    left: 82%;
    width: 66px;
    height: 66px;
    bottom: -66px;
    animation-delay: 1s;
    transform: rotate(-32deg);
}
.background li:nth-child(2) {
    left: 34%;
    width: 49px;
    height: 49px;
    bottom: -49px;
    animation-delay: 2s;
    transform: rotate(21deg);
}
.background li:nth-child(3) {
    left: 50%;
    width: 43px;
    height: 43px;
    bottom: -43px;
    animation-delay: 7s;
    transform: rotate(-18deg);
}
.background li:nth-child(4) {
    left: 8%;
    width: 54px;
    height: 54px;
    bottom: -54px;
    animation-delay: 4s;
    transform: rotate(43deg);
}
.background li:nth-child(5) {
    left: 26%;
    width: 60px;
    height: 60px;
    bottom: -60px;
    animation-delay: 8s;
    transform: rotate(-25deg);
}
.background li:nth-child(6) {
    left: 12%;
    width: 82px;
    height: 82px;
    bottom: -82px;
    animation-delay: 12s;
    transform: rotate(32deg);
}
.background li:nth-child(7) {
    left: 72%;
    width: 45px;
    height: 45px;
    bottom: -45px;
    animation-delay: 7s;
    transform: rotate(-12deg);
}
.background li:nth-child(8) {
    left: 43%;
    width: 52px;
    height: 52px;
    bottom: -52px;
    animation-delay: 5s;
    transform: rotate(27deg);
}
.background li:nth-child(9) {
    left: 35%;
    width: 43px;
    height: 43px;
    bottom: -43px;
    animation-delay: 11s;
    transform: rotate(-30deg);
}
.background li:nth-child(10) {
    left: 29%;
    width: 70px;
    height: 70px;
    bottom: -70px;
    animation-delay: 5s;
    transform: rotate(12deg);
}
.background li:nth-child(11) {
    left: 18%;
    width: 65px;
    height: 65px;
    bottom: -65px;
    animation-delay: 2s;
    transform: rotate(47deg);
}
.background li:nth-child(12) {
    left: 53%;
    width: 68px;
    height: 68px;
    bottom: -68px;
    animation-delay: 4s;
    transform: rotate(-10deg);
}
.background li:nth-child(13) {
    left: 77%;
    width: 74px;
    height: 74px;
    bottom: -74px;
    animation-delay: 13s;
    transform: rotate(36deg);
}
.background li:nth-child(14) {
    left: 58%;
    width: 54px;
    height: 54px;
    bottom: -54px;
    animation-delay: 18s;
    transform: rotate(23deg);
}
.background li:nth-child(15) {
    left: 11%;
    width: 91px;
    height: 91px;
    bottom: -91px;
    animation-delay: 66s;
    transform: rotate(-28deg);
}
.background li:nth-child(16) {
    left: 22%;
    width: 79px;
    height: 79px;
    bottom: -79px;
    animation-delay: 37s;
    transform: rotate(15deg);
}
.background li:nth-child(17) {
    left: 83%;
    width: 77px;
    height: 77px;
    bottom: -77px;
    animation-delay: 32s;
    transform: rotate(-35deg);
}
.background li:nth-child(18) {
    left: 28%;
    width: 77px;
    height: 77px;
    bottom: -77px;
    animation-delay: 8s;
    transform: rotate(18deg);
}
.background li:nth-child(19) {
    left: 45%;
    width: 51px;
    height: 51px;
    bottom: -51px;
    animation-delay: 69s;
    transform: rotate(-20deg);
}
.background li:nth-child(20) {
    left: 79%;
    width: 93px;
    height: 93px;
    bottom: -93px;
    animation-delay: 86s;
    transform: rotate(27deg);
}
.background li:nth-child(21) {
    left: 71%;
    width: 42px;
    height: 42px;
    bottom: -42px;
    animation-delay: 56s;
    transform: rotate(35deg);
}
.background li:nth-child(22) {
    left: 65%;
    width: 48px;
    height: 48px;
    bottom: -48px;
    animation-delay: 44s;
    transform: rotate(-40deg);
}
.background li:nth-child(23) {
    left: 33%;
    width: 53px;
    height: 53px;
    bottom: -53px;
    animation-delay: 73s;
    transform: rotate(13deg);
}
.background li:nth-child(24) {
    left: 5%;
    width: 83px;
    height: 83px;
    bottom: -83px;
    animation-delay: 64s;
    transform: rotate(24deg);
}
.background li:nth-child(25) {
    left: 66%;
    width: 67px;
    height: 67px;
    bottom: -67px;
    animation-delay: 32s;
    transform: rotate(-22deg);
}

video {
    width: 80vw;
}


@media (max-width: 640px) {
    .boite {
        max-width: 85%;
    }
    .titre {
        max-width: 100%;
        height: auto;
        margin-top: 50px;
    }
}