#p5bg-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
body{
    background: url('../blurry-gradient-bg.png');
    background-size: cover;
    background-attachment: fixed;   
    background-position: center;
    background-repeat: no-repeat;
}
main{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    box-sizing: border-box;
    text-align: center;
}
.card{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    width: min(90vw, 900px);
    flex-wrap: wrap;
    opacity: 0;
    animation: rise-up 1s ease forwards;
    box-sizing: border-box;
    animation-delay: calc(sibling-index() * 100ms)
}
@keyframes rise-up{
    from{opacity: 0; transform: translateY(10px);}
    to{opacity: 1; transform: translateY(0);}
}
.profile img{
    width: min(200px, 30vw);
    height: min(200px, 30vw);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 20px var(--accent-color), 0 0 40px var(--accent-color);
}
.profile .text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.profile h1{
    font-size: min(4rem, 10vw);
    color: var(--text-color);
    text-shadow: 0 0 10px var(--accent-color);
}
.social-btns{
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.social-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border: 4px solid var(--accent-color);
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}
.social-btn svg{
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text-color);
}
.social-btn.twitch{
    border-color: #9146FF;
    box-shadow: 0 0 10px #9046ff, 0 0 10px #9046ff inset;
}
.social-btn.youtube{
    border-color: #c80909;
    box-shadow: 0 0 10px #c80909, 0 0 10px #c80909 inset;
}
.social-btn.github{
    border-color: #0969DA;
    box-shadow: 0 0 10px #0969DA, 0 0 10px #0969DA inset;
}
.social-btn.discord{
    border-color: #7289DA;
    box-shadow: 0 0 10px #7289DA, 0 0 10px #7289DA inset;
}
.social-btn:hover{
    transform: translateY(-3px);
}
.social-btn.twitch:hover{
    background-color: #9146FF;
}
.social-btn.youtube:hover{
    background-color: #c80909;
}
.social-btn.github:hover{
    background-color: #0969DA;
}
.social-btn.discord:hover{
    background-color: #7289DA;
}
.social-btn:active{
    transform: translateY(0);
}
.flex-column{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.flex-container{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.skill{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    user-select: none;
    transition: all 0.3s ease;
}
.skill.beginner{
    border-color: #18e887;
    box-shadow: 0 0 10px #18e887, 0 0 10px #18e887 inset;
    background-color: #18e88780;
}
.skill.intermediate{
    border-color: #e8b718;
    box-shadow: 0 0 10px #e8b718, 0 0 10px #e8b718 inset;
    background-color: #e8b71880;
}
.skill.advanced{
    border-color: #e81818;
    box-shadow: 0 0 10px #e81818, 0 0 10px #e81818 inset;
    background-color: #e8181880;
}
.skill.expert{
    border-color: #724fe4;
    box-shadow: 0 0 10px #724fe4, 0 0 10px #724fe4 inset;
    background-color: #724fe480;
}
.skill:hover{
    scale: 1.05;
}