*,
html,
body {
    padding: 0;
    margin: 0;
}

* {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

html {
    --font-size-normal: 100%;
    --font-size-heading: 2rem;
    --font-size-title: 5rem;

    --color-normal: rgb(243, 243, 243);
    --color-highlight: #ffff3f;

    --time-fast: 0.125s;
    --time-normal: 0.25s;

    font-size: var(--font-size-normal);

    font-family: monospace;
    font-size: var(--font-size-normal);

    color: var(--color-normal);
}

@media (max-width: 500px) {
    html {
        --font-size-title: 4rem;
    }
}

body {
    background-color: rgb(21, 21, 21);
    padding: 1rem 3rem;
}

div {
    width: fit-content;
}

p,
a,
h1,
h2 {
    width: fit-content;
}

h1 {
    font-size: var(--font-size-title);
}

h2 {
    font-size: var(--font-size-heading);
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.align-hcenter {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.highlight {
    color: var(--color-highlight);
}

.bold {
    font-weight: bold;
}

#hello {
    margin-bottom: 1rem;
}

#helloName h1 {
    position: relative;
    transition: transform var(--time-normal), text-shadow var(--time-normal);
}

#helloName h1:nth-child(1) {
    --color: var(--color-highlight);
    /* Arbitrary size of space, don't question it */
    margin-right: calc(1ch * 0.8);
}

#helloName h1:nth-child(2) {
    --color: var(--color-normal);
}

#helloName h1:hover {
    text-shadow: 0 0 5rem var(--color);
}

@media (max-width: 650px) {
    #helloName h1:nth-child(1) {
        margin-right: 0;
    }
    #helloName h1 {
        display: block;
        text-align: center;
    }
}

#profileImage {
    width: 15rem;
    height: 15rem;
}

#profileImage img,
#profileImage a {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#profileImage a {
    transition: transform var(--time-normal), box-shadow var(--time-normal);
}

#profileImage:hover a,
#profileImage a:focus {
    transform: scale(1.05);
    box-shadow: 0 0 2rem 0rem rgba(255, 255, 255, 0.75);
    outline: none;
}

#contact ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#contact a {
    text-decoration: none;
}

#contact li:nth-child(1) {
    --image: url("../res/social/email.svg");
}

#contact li:nth-child(2) {
    --image: url("../res/social/github.svg");
}

#contact li:nth-child(3) {
    --image: url("../res/social/linkedin.svg");
}

#contact li {
    margin: 1rem;
    list-style: none;
}

#contact li div {
    position: relative;
    background-image: var(--image);
    background-size: 5rem;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2rem;
}

#contact li div,
#contact li div::before,
#contact li div::after {
    border-radius: 2rem;
}

#contact li div::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        15deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.075)
    );
    z-index: -2;
    content: "";
}

#contact li div::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        15deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.2)
    );
    content: "";
    z-index: -1;
    opacity: 0;
    transition: opacity var(--time-fast);
}

#contact h2,
#contact p {
    margin-left: auto;
    margin-right: auto;
}

#contact li,
#contact li a {
    transition: color var(--time-fast);
}

#contact li:hover,
#contact li a:focus {
    color: var(--color-highlight);
    outline: none;
}

#contact li a:hover div::after,
#contact li a:focus div::after {
    opacity: 1;
}