* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; background-image: url('../img/background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50%; } body #a { text-decoration: none; color: rgb(100, 100, 100); font-family: Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; bottom: 0; right: 0; z-index: 5; cursor: default; margin: 0; padding: 0; } main { position: absolute; z-index: 3; width: 100vw; height: 100vh; display: flex; flex-direction: column; opacity: 0; filter: blur(10px); transition: opacity 2s ease-in-out, filter 2s ease-in-out; } header { width: 100%; min-height: 35%; padding-top: 10%; padding-bottom: 10%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } header img { width: 125px; border: 2px solid white; border-radius: 50%; } header h2 { background-color: rgb(30, 30, 30); border: 1px solid white; border-radius: 30px; padding: 5px; padding-right: 10px; padding-left: 10px; color: white; font-size: 1.25rem; font-family: 'Times New Roman', Times, serif; } .links-container { width: 100%; min-height: 65%; display: flex; flex-direction: column; align-items: center; } .links-container a { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.7); width: 90%; margin-top: 20px; padding: 5px; border-radius: 30px; text-decoration: none; color: black; font-size: 1.15rem; font-family: Verdana, Geneva, Tahoma, sans-serif; } .links-container a img { width: 50px; margin-left: 20px; } .links-container a p { margin-left: 10%; } #vanta { position: absolute; z-index: 2; width: 100vw; height: 100vh; } @media screen and (width > 425px) { .links-container a { width: 60%; } }