body {
    margin: 0;
    font-size: 20px;
}

* {
    box-sizing: border-box;
}

.container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: white;
    color: black;
    font-family: arial, sans-serif;
    overflow: hidden;
}

.content {
    position: relative;
    width: 600px;
    max-width: 100%;
    margin: 20px;
    background: white;
    padding: 60px 40px;
    text-align: center;
    box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}
.content p {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    letter-spacing: 0.1rem;
    color: #595959;
}
.content p:last-child {
    margin-bottom: 0;
}
.content button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.5rem 1rem;
    border: 3px solid #595959;
    background: transparent;
    font-size: 1rem;
    color: #595959;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

.particle {
    position: absolute;
    display: block;
    pointer-events: none;
}
.particle:nth-child(1) {
    top: 45.7420924574%;
    left: 15.6555772994%;
    font-size: 22px;
    filter: blur(0.02px);
    animation: 31s floatReverse infinite;
}
.particle:nth-child(2) {
    top: 76.8856447689%;
    left: 72.4070450098%;
    font-size: 22px;
    filter: blur(0.04px);
    animation: 24s floatReverse2 infinite;
}
.particle:nth-child(3) {
    top: 37.6357056695%;
    left: 70.9426627794%;
    font-size: 29px;
    filter: blur(0.06px);
    animation: 21s floatReverse2 infinite;
}
.particle:nth-child(4) {
    top: 14.742014742%;
    left: 54.2406311637%;
    font-size: 14px;
    filter: blur(0.08px);
    animation: 33s float infinite;
}
.particle:nth-child(5) {
    top: 28.0193236715%;
    left: 71.9844357977%;
    font-size: 28px;
    filter: blur(0.1px);
    animation: 37s floatReverse2 infinite;
}
.particle:nth-child(6) {
    top: 81.7518248175%;
    left: 68.4931506849%;
    font-size: 22px;
    filter: blur(0.12px);
    animation: 40s floatReverse infinite;
}
.particle:nth-child(7) {
    top: 50.2463054187%;
    left: 37.5494071146%;
    font-size: 12px;
    filter: blur(0.14px);
    animation: 23s float2 infinite;
}
.particle:nth-child(8) {
    top: 13.7931034483%;
    left: 38.5375494071%;
    font-size: 12px;
    filter: blur(0.16px);
    animation: 24s float2 infinite;
}
.particle:nth-child(9) {
    top: 62.0689655172%;
    left: 58.3003952569%;
    font-size: 12px;
    filter: blur(0.18px);
    animation: 21s floatReverse infinite;
}
.particle:nth-child(10) {
    top: 15.6097560976%;
    left: 11.7647058824%;
    font-size: 20px;
    filter: blur(0.2px);
    animation: 29s floatReverse infinite;
}
.particle:nth-child(11) {
    top: 84.6248462485%;
    left: 43.4353405726%;
    font-size: 13px;
    filter: blur(0.22px);
    animation: 24s floatReverse2 infinite;
}
.particle:nth-child(12) {
    top: 83.0280830281%;
    left: 61.8253189401%;
    font-size: 19px;
    filter: blur(0.24px);
    animation: 32s float2 infinite;
}
.particle:nth-child(13) {
    top: 51.3939393939%;
    left: 59.512195122%;
    font-size: 25px;
    filter: blur(0.26px);
    animation: 25s float2 infinite;
}
.particle:nth-child(14) {
    top: 65.8595641646%;
    left: 52.6315789474%;
    font-size: 26px;
    filter: blur(0.28px);
    animation: 24s floatReverse2 infinite;
}
.particle:nth-child(15) {
    top: 93.4809348093%;
    left: 44.4225074038%;
    font-size: 13px;
    filter: blur(0.3px);
    animation: 22s floatReverse infinite;
}
.particle:nth-child(16) {
    top: 29.1616038882%;
    left: 82.1114369501%;
    font-size: 23px;
    filter: blur(0.32px);
    animation: 35s float2 infinite;
}
.particle:nth-child(17) {
    top: 12.7139364303%;
    left: 56.974459725%;
    font-size: 18px;
    filter: blur(0.34px);
    animation: 35s float2 infinite;
}
.particle:nth-child(18) {
    top: 44.2804428044%;
    left: 42.4481737414%;
    font-size: 13px;
    filter: blur(0.36px);
    animation: 23s floatReverse2 infinite;
}
.particle:nth-child(19) {
    top: 31.9612590799%;
    left: 39.9610136452%;
    font-size: 26px;
    filter: blur(0.38px);
    animation: 24s floatReverse infinite;
}
.particle:nth-child(20) {
    top: 34.398034398%;
    left: 48.3234714004%;
    font-size: 14px;
    filter: blur(0.4px);
    animation: 22s float infinite;
}
.particle:nth-child(21) {
    top: 43.530834341%;
    left: 72.0545277507%;
    font-size: 27px;
    filter: blur(0.42px);
    animation: 26s floatReverse2 infinite;
}
.particle:nth-child(22) {
    top: 15.421686747%;
    left: 18.4466019417%;
    font-size: 30px;
    filter: blur(0.44px);
    animation: 30s float infinite;
}
.particle:nth-child(23) {
    top: 35.2078239609%;
    left: 12.7701375246%;
    font-size: 18px;
    filter: blur(0.46px);
    animation: 29s floatReverse infinite;
}
.particle:nth-child(24) {
    top: 32.077764277%;
    left: 68.4261974585%;
    font-size: 23px;
    filter: blur(0.48px);
    animation: 33s float2 infinite;
}
.particle:nth-child(25) {
    top: 39.661426844%;
    left: 94.4498539435%;
    font-size: 27px;
    filter: blur(0.5px);
    animation: 36s floatReverse2 infinite;
}
.particle:nth-child(26) {
    top: 71.7575757576%;
    left: 70.243902439%;
    font-size: 25px;
    filter: blur(0.52px);
    animation: 21s float infinite;
}
.particle:nth-child(27) {
    top: 96.1963190184%;
    left: 20.6896551724%;
    font-size: 15px;
    filter: blur(0.54px);
    animation: 37s floatReverse2 infinite;
}
.particle:nth-child(28) {
    top: 19.656019656%;
    left: 76.9230769231%;
    font-size: 14px;
    filter: blur(0.56px);
    animation: 37s float infinite;
}
.particle:nth-child(29) {
    top: 78.6240786241%;
    left: 72.9783037475%;
    font-size: 14px;
    filter: blur(0.58px);
    animation: 23s float2 infinite;
}
.particle:nth-child(30) {
    top: 0.9661835749%;
    left: 38.9105058366%;
    font-size: 28px;
    filter: blur(0.6px);
    animation: 40s float2 infinite;
}
.particle:nth-child(31) {
    top: 15.6670746634%;
    left: 9.8328416912%;
    font-size: 17px;
    filter: blur(0.62px);
    animation: 25s floatReverse infinite;
}
.particle:nth-child(32) {
    top: 97.5609756098%;
    left: 63.7254901961%;
    font-size: 20px;
    filter: blur(0.64px);
    animation: 38s floatReverse infinite;
}
.particle:nth-child(33) {
    top: 67.3170731707%;
    left: 31.3725490196%;
    font-size: 20px;
    filter: blur(0.66px);
    animation: 23s floatReverse infinite;
}
.particle:nth-child(34) {
    top: 79.802955665%;
    left: 46.442687747%;
    font-size: 12px;
    filter: blur(0.68px);
    animation: 32s float2 infinite;
}
.particle:nth-child(35) {
    top: 92.2330097087%;
    left: 78.125%;
    font-size: 24px;
    filter: blur(0.7px);
    animation: 30s float2 infinite;
}
.particle:nth-child(36) {
    top: 75.8620689655%;
    left: 75.0988142292%;
    font-size: 12px;
    filter: blur(0.72px);
    animation: 29s float infinite;
}
.particle:nth-child(37) {
    top: 49.0797546012%;
    left: 73.8916256158%;
    font-size: 15px;
    filter: blur(0.74px);
    animation: 25s floatReverse2 infinite;
}
.particle:nth-child(38) {
    top: 12.6829268293%;
    left: 66.6666666667%;
    font-size: 20px;
    filter: blur(0.76px);
    animation: 21s floatReverse2 infinite;
}
.particle:nth-child(39) {
    top: 84.6248462485%;
    left: 67.1273445212%;
    font-size: 13px;
    filter: blur(0.78px);
    animation: 29s float infinite;
}
.particle:nth-child(40) {
    top: 39.9512789281%;
    left: 7.8354554358%;
    font-size: 21px;
    filter: blur(0.8px);
    animation: 34s float2 infinite;
}
.particle:nth-child(41) {
    top: 9.828009828%;
    left: 40.4339250493%;
    font-size: 14px;
    filter: blur(0.82px);
    animation: 33s float infinite;
}
.particle:nth-child(42) {
    top: 82.2521419829%;
    left: 27.5319567355%;
    font-size: 17px;
    filter: blur(0.84px);
    animation: 23s floatReverse infinite;
}
.particle:nth-child(43) {
    top: 57.0725707257%;
    left: 85.8835143139%;
    font-size: 13px;
    filter: blur(0.86px);
    animation: 39s float2 infinite;
}
.particle:nth-child(44) {
    top: 76.9420468557%;
    left: 44.5103857567%;
    font-size: 11px;
    filter: blur(0.88px);
    animation: 22s floatReverse2 infinite;
}
.particle:nth-child(45) {
    top: 88.7816646562%;
    left: 54.4217687075%;
    font-size: 29px;
    filter: blur(0.9px);
    animation: 38s floatReverse infinite;
}
.particle:nth-child(46) {
    top: 48.0392156863%;
    left: 60.0393700787%;
    font-size: 16px;
    filter: blur(0.92px);
    animation: 22s float infinite;
}
.particle:nth-child(47) {
    top: 55.6776556777%;
    left: 17.66437684%;
    font-size: 19px;
    filter: blur(0.94px);
    animation: 35s floatReverse2 infinite;
}
.particle:nth-child(48) {
    top: 44.6601941748%;
    left: 76.171875%;
    font-size: 24px;
    filter: blur(0.96px);
    animation: 22s floatReverse infinite;
}
.particle:nth-child(49) {
    top: 52.427184466%;
    left: 25.390625%;
    font-size: 24px;
    filter: blur(0.98px);
    animation: 38s float infinite;
}
.particle:nth-child(50) {
    top: 77.8325123153%;
    left: 74.1106719368%;
    font-size: 12px;
    filter: blur(1px);
    animation: 24s float infinite;
}
.particle:nth-child(51) {
    top: 80.6888068881%;
    left: 74.0375123396%;
    font-size: 13px;
    filter: blur(1.02px);
    animation: 22s floatReverse2 infinite;
}
.particle:nth-child(52) {
    top: 41.5961305925%;
    left: 28.2375851996%;
    font-size: 27px;
    filter: blur(1.04px);
    animation: 31s float2 infinite;
}
.particle:nth-child(53) {
    top: 54.1062801932%;
    left: 0.9727626459%;
    font-size: 28px;
    filter: blur(1.06px);
    animation: 28s float infinite;
}
.particle:nth-child(54) {
    top: 31.2195121951%;
    left: 41.1764705882%;
    font-size: 20px;
    filter: blur(1.08px);
    animation: 31s floatReverse2 infinite;
}
.particle:nth-child(55) {
    top: 15.6479217604%;
    left: 25.5402750491%;
    font-size: 18px;
    filter: blur(1.1px);
    animation: 37s float infinite;
}
.particle:nth-child(56) {
    top: 42.2604422604%;
    left: 58.1854043393%;
    font-size: 14px;
    filter: blur(1.12px);
    animation: 38s float2 infinite;
}
.particle:nth-child(57) {
    top: 41.3793103448%;
    left: 90.9090909091%;
    font-size: 12px;
    filter: blur(1.14px);
    animation: 34s floatReverse2 infinite;
}
.particle:nth-child(58) {
    top: 0.9673518742%;
    left: 79.8442064265%;
    font-size: 27px;
    filter: blur(1.16px);
    animation: 34s float infinite;
}
.particle:nth-child(59) {
    top: 45.9096459096%;
    left: 79.4896957802%;
    font-size: 19px;
    filter: blur(1.18px);
    animation: 29s floatReverse2 infinite;
}
.particle:nth-child(60) {
    top: 35.7056694813%;
    left: 20.4081632653%;
    font-size: 29px;
    filter: blur(1.2px);
    animation: 33s floatReverse2 infinite;
}
.particle:nth-child(61) {
    top: 6.8209500609%;
    left: 79.333986288%;
    font-size: 21px;
    filter: blur(1.22px);
    animation: 36s floatReverse2 infinite;
}
.particle:nth-child(62) {
    top: 44.6601941748%;
    left: 87.890625%;
    font-size: 24px;
    filter: blur(1.24px);
    animation: 32s float infinite;
}
.particle:nth-child(63) {
    top: 64.656212304%;
    left: 32.0699708455%;
    font-size: 29px;
    filter: blur(1.26px);
    animation: 22s float infinite;
}
.particle:nth-child(64) {
    top: 10.7711138311%;
    left: 97.3451327434%;
    font-size: 17px;
    filter: blur(1.28px);
    animation: 27s floatReverse infinite;
}
.particle:nth-child(65) {
    top: 40.146878825%;
    left: 87.5122910521%;
    font-size: 17px;
    filter: blur(1.3px);
    animation: 34s float infinite;
}
.particle:nth-child(66) {
    top: 71.0462287105%;
    left: 41.095890411%;
    font-size: 22px;
    filter: blur(1.32px);
    animation: 26s float infinite;
}
.particle:nth-child(67) {
    top: 94.6341463415%;
    left: 30.3921568627%;
    font-size: 20px;
    filter: blur(1.34px);
    animation: 27s float infinite;
}
.particle:nth-child(68) {
    top: 45.6865127582%;
    left: 72.3362658847%;
    font-size: 23px;
    filter: blur(1.36px);
    animation: 30s floatReverse2 infinite;
}
.particle:nth-child(69) {
    top: 76.5644171779%;
    left: 65.0246305419%;
    font-size: 15px;
    filter: blur(1.38px);
    animation: 35s floatReverse infinite;
}
.particle:nth-child(70) {
    top: 78.0722891566%;
    left: 9.7087378641%;
    font-size: 30px;
    filter: blur(1.4px);
    animation: 40s float2 infinite;
}
.particle:nth-child(71) {
    top: 80.6804374241%;
    left: 68.4261974585%;
    font-size: 23px;
    filter: blur(1.42px);
    animation: 38s float2 infinite;
}
.particle:nth-child(72) {
    top: 46.1349693252%;
    left: 16.7487684729%;
    font-size: 15px;
    filter: blur(1.44px);
    animation: 38s floatReverse2 infinite;
}
.particle:nth-child(73) {
    top: 54.9019607843%;
    left: 7.874015748%;
    font-size: 16px;
    filter: blur(1.46px);
    animation: 39s floatReverse2 infinite;
}
.particle:nth-child(74) {
    top: 7.7108433735%;
    left: 49.5145631068%;
    font-size: 30px;
    filter: blur(1.48px);
    animation: 32s float2 infinite;
}
.particle:nth-child(75) {
    top: 82.9268292683%;
    left: 81.3725490196%;
    font-size: 20px;
    filter: blur(1.5px);
    animation: 29s float infinite;
}
.particle:nth-child(76) {
    top: 77.4818401937%;
    left: 42.8849902534%;
    font-size: 26px;
    filter: blur(1.52px);
    animation: 26s floatReverse infinite;
}
.particle:nth-child(77) {
    top: 51.5815085158%;
    left: 69.4716242661%;
    font-size: 22px;
    filter: blur(1.54px);
    animation: 32s floatReverse2 infinite;
}
.particle:nth-child(78) {
    top: 27.4846625767%;
    left: 39.4088669951%;
    font-size: 15px;
    filter: blur(1.56px);
    animation: 22s float2 infinite;
}
.particle:nth-child(79) {
    top: 87.0415647922%;
    left: 56.974459725%;
    font-size: 18px;
    filter: blur(1.58px);
    animation: 27s float2 infinite;
}
.particle:nth-child(80) {
    top: 50.2463054187%;
    left: 75.0988142292%;
    font-size: 12px;
    filter: blur(1.6px);
    animation: 31s float infinite;
}

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(180px);
    }
}
@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-180px);
    }
}
@keyframes float2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(28px);
    }
}
@keyframes floatReverse2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-28px);
    }
}