L'insomnie

.particule { position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }

.particule li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: #00FF00; animation: animate 25s linear infinite; bottom: -150px; }

.particule li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }

.particule li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }

.particule li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }

.particule li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }

.particule li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }

.particule li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }

.particule li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }

.particule li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }

.particule li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }

.particule li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }

100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } @import url("https://fonts.googleapis.com/css?family=Exo:400,700");

• { margin: 0px; padding: 0px; }

body { font-family: "Exo", sans-serif; background: #1D1D1D; }

h1 { text-align: center; color: #fff; font-size: 50px; }

h2 { text-align: center; margin-bottom: 10px; font-size: 36px; line-height: 50px; color: #fff; font-weight: 400; }

h3 { text-align: center; color: #00ff00; font-size: 30px; line-height: 46px; font-weight: 400; }

p { color: #fff; }

a { text-decoration: none; color: #00ff00; }

.text-info, .text-how { margin: 3% auto 3% auto; display: block; width: 100%; height: auto; }

.text-info p, .text-how p { margin: auto 10% auto 10%; text-align: center; }

.nav-button { max-width: 1024px; width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; }

@media screen and (max-width: 767px) { .nav-button { padding-top: 300px; flex-direction: column; } }

.card { width: 100%; max-width: 300px; min-width: 200px; height: 250px; background-color: #292929; margin: 10px; border-radius: 10px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); border: 2px solid rgba(7, 7, 7, 0.12); font-size: 16px; transition: all 0.3s ease; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; transition: all 0.3s ease; }

.icon-in-button { margin: 0 auto; width: 100%; height: 80px; max-width: 80px; background: linear-gradient(90deg, #46b546 0%, #00ff00 40%, rgba(0, 0, 0, 0.28) 60%); border-radius: 100%; display: flex; justify-content: center; align-items: center; color: white; transition: all 0.8s ease; background-position: 0px; background-size: 200px; }

.material-icons.md-36 { font-size: 36px; }

.card .button-title { width: 100%; margin: 0; text-align: center; margin-top: 30px; color: white; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; }

.card .button-text { width: 80%; margin: 0 auto; font-size: 13px; text-align: center; margin-top: 20px; color: white; font-weight: 200; letter-spacing: 2px; opacity: 0; max-height: 0; transition: all 0.3s ease; }

.card:hover .button-text { transition: all 0.3s ease; opacity: 1; max-height: 40px; }

.card:hover .icon-in-button { color: #00ff00; background-position: -120px; transition: all 0.3s ease; }

.discord:hover{ text-decoration: underline; opacity: 1; transition: all 0.3s ease; font-weight: bold; }

.top-text { font-weight: bold }n