@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body
{
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    font-family: Roboto, sans-serif;
    background: linear-gradient(225deg, #c0a54d, #422782);
    background-size: 1000% 1000%;
    animation: gradientMove 20s ease-in-out infinite;
}

.wrapper
{
    opacity: 0;
    animation: fadeIn 1s forwards ease-in;
    animation-delay: 0.1s;
}

header
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 2rem 0;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    min-width: 100vw;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

ul
{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 350px) {
    ul {
        gap: 2.5rem; 
    }
}

li a
{
    color: white;
    text-decoration: none;
}

li a:hover
{
    color: rgba(213, 84, 157, 0.8);
    text-decoration: underline;
}

.profile-info
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    margin-bottom: 15px;
}

#avatar
{
    height: 12.5rem;
    width: 12.5rem;
    border-radius: 50%;
    border: 3px solid rgb(255, 255, 255, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: 0.3s;
}

#avatar:hover {
    height: 14rem;
    width: 14rem;
    border-color: rgb(0, 0, 0, 0.5);
}

#username
{
    font-size: 2rem;
    font-weight: bold;
    color: white; 
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

header h1 
{
    color: rgb(255, 255, 255);
    font-size: clamp(2em, 6vw, 5em);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0.5rem 0;
}

header p 
{
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: clamp(1em, 2vw, 1.2em);
    margin: 0.5rem 0;
}

.link-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

a
{
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 5rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#github:hover {
    background: rgba(133, 39, 136, 0.6); 
}
#youtube:hover{
    background: rgba(129, 5, 5, 0.6);
}
#telegram:hover { background: rgba(58, 118, 145, .6);
}
#spotistats:hover{
    background: rgba(2, 124, 18, 0.6)
}

footer
{
    text-align: center;
    font-size: 0.9em;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0, 0.5);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
    padding: 1.5rem 0;
    position: fixed; bottom: 0; width: 100%;
    z-index: 100;
}

#page-about .about-content
{
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto;  
    justify-content: center;
    border: #000000 5px solid;
    border-radius: 1rem;
    padding: 1rem;
    background-color: rgb(0, 0, 0, 0.5);
}

#page-about .about-content > *:nth-child(1)
{
    flex: 1 1 70%;
}

#page-about .about-content > *:nth-child(2)
{
    flex: 0 1 30%;
    display: flex;
    justify-content: center;
    align-content: center;
    border: #000000 solid 5px;
    border-radius: 1rem;
}

@media (max-width: 600px) {
    #page-about .about-content {
        flex-direction: column;
    }
    #page-about .about-image {
        flex: none;
        display: flex;
        justify-content: center;
    }
    #page-about .about-image img {
        max-width: 100%;
    }
}

#page-about .about-text p
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: white;
    text-align: center;
    margin-block: 1rem;
}

#page-about .about-text
{
    margin: 1rem;
}

#page-about .about-content img
{
    width: 20rem;
    height: auto;
    border-radius: 10px;
}

@keyframes gradientMove {
    0% {background-position: 0 100%}
    50% {background-position: 100% 0%}
    100% {background-position: 0 100%}
}

@keyframes fadeIn 
{
to 
{
    opacity: 1;
}
}