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;
}