:root {
    /*define colors here*/
    --bg-color: #1a1a1a;
    --text-color-primary: #ffffff;
    --text-color-secondary: #e0e0e0;
    --text-color-tertiary: #afafaf;
    --text-color-hover: #8d8d8d;
    /*--text-color-active: rgb(98, 202, 206);*/
}

body {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--text-color-primary);
    background: var(--bg-color);
}

h1  {
    color: var(--text-color-primary);
}
h2  {
    color: var(--text-color-secondary);
}
p   {
    color: var(--text-color-tertiary);
}
ul  {
    color: var(--text-color-tertiary);
    display: inline-block;
    text-align: left;
}
ul li   {
    list-style-position: inside;
}
a   {
    color: var(--text-color-secondary);
    position: relative;
    text-decoration: none;
}


a::after    {
    content: ' ';
    position: absolute;
    left: 0;
    top: 1.2em;
    width: 100%;
    height: 2px;
    background-color: var(--text-color-hover);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.2s;
    transform-origin: right;
}

a:hover::after  {
    transform-origin: left;
    transform: scaleX(1);
}
.link-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

img{
    padding-top: 20px;
    width: 15%;
    height: 20%;
}
#profile {
    border-radius: 50%;
}