main { background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20)); } .divLogoPerm { display: flex; justify-content: center; } #logoPermBDE { padding: 1rem; background-color: white; width: 10rem; height: 10rem; border-radius: 20px; opacity: 80%; position: relative; z-index: 1; margin: 0 1rem 3rem 0; align-items: center; } #logoliste { padding: 1rem; background-color: #000000; width: 10rem; height: 10rem; border-radius: 20px; opacity: 90%; position: relative; z-index: 1; margin: 0 0 3rem 1rem; align-items: center; } #logoMetzPloreur { padding: 1rem; background-color: rgba(75,40,108,255); width: 10rem; height: 10rem; border-radius: 20px; opacity: 80%; position: relative; z-index: 1; margin: 6rem 0 0 0; align-items: center; } #secondDiv { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; margin: 3rem 0 3rem 0; } .button-64 { align-items: center; background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); border: 0; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; box-sizing: border-box; color: #FFFFFF; display: flex; font-family: Phantomsans, sans-serif; font-size: 20px; justify-content: center; line-height: 1em; max-width: 100%; min-width: 140px; padding: 3px; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; position: relative; z-index: 2; opacity: 80%; } .button-64:active, .button-64:hover { outline: 0; } .button-64 a { background-color: rgb(5, 6, 45); color: white; padding: 16px 24px; border-radius: 6px; width: 100%; height: 100%; transition: 300ms; } .button-64:hover a { background: none; } @media (min-width: 768px) { .button-64 { font-size: 24px; min-width: 196px; } }