html { background-color: #272727; background-image: radial-gradient(#353535 1px, transparent 0); background-size: 30px 30px; background-attachment: fixed; /* Keep the background fixed */ font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { width: calc(min(100%, 960px)); margin: 0 auto; } .pfp { width: 200px; height: 200px; display: inline-block; margin-left: calc(min(37.5% - 100px, 45% - 200px)); border-radius: 50%; vertical-align: top; margin-right: calc(50% - (200px + min(37.5% - 100px, 45% - 200px))); margin-top: 25px; border: 3.5px solid #353535; } h1 { display: inline-block; height: 200px; vertical-align: top; margin-top: 25px; line-height: 200px; font-size: 72px; margin-bottom: 0px; } .highlight { background: linear-gradient(135deg, #e8004d, #a101ea); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dont-touch { color: #c4c4c4 } h2 { margin-left: auto; margin-right: auto; max-width: 768px; text-align: center; font-size: 36px; margin-top: 25px; margin-bottom: 25px; } .link { margin-left: auto; margin-right: auto; max-width: 450px; margin-bottom: 30px; } .link a { color: #be00a9; font-size: 34px; margin-top: 0px; margin-bottom: 0px; text-align: left; display: inline-block; transition: 0.5s; text-decoration: none; } .link p { font-size: 24px; color: #c4c4c4; margin-top: 5px; margin-bottom: 5px; transition: 0.5s; } .link:hover p { color: #ffffff; } .link:hover a { color: #e8004d } .line { max-width: 450px; height: 1px; margin-left: auto; margin-right: auto; background-color: rgba(53, 53, 53, 0.8); margin-top: 25px; margin-bottom: 25px; }