@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap'); :root { font-family: "Inter", sans-serif; background-color: black; color: white; width: 69%; margin: auto; } .header-container { display: flex; align-items: center; justify-content: center; } .profile-pic { float: left; margin-right: 10px; width: 50px; height: 50px; border-radius: 50%; } h1, h2, p { font-family: "Inter", sans-serif; text-align: center; } p { font-size: 1.2em; } a { color: #ff44bb; text-decoration: none; text-shadow: 0 0 5px; } * { /* unfucks some stuff */ box-sizing: border-box; } .contacts { display: flex; flex-wrap: wrap; justify-content: center; width: 580px; margin: auto; padding: 10px; } .contact { width: 170px; margin: 5px; padding: 15px; background-color: #232629; border-radius: 10px; text-align: center; opacity: .9; position: relative; transition: opacity .25s; } /* some hacky shit to make
s clickable. basically just makes an in a
take up the full div */ .contact a { z-index: 10; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; position: absolute; } div.contact:hover { opacity: 1; } @media screen and (max-width:900px) { .contacts { width: 580px; } :root { width: 90%; } } @media screen and (max-width:700px) { .contacts { width: 380px; } } @media screen and (max-width:450px) { :root { width: 100%; } } @media screen and (max-width:390px) { .contacts { width: 200px; } }