@font-face 
{
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('woff2');
    src: url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('woff2');
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('woff2');
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('woff2');
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('woff2');
}

@font-face 
{
    font-family: 'Flame';
    src: url('../fonts/octopus_game/Octopus\ Game.otf') format('woff2');
}

*
{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins';
}

body::-webkit-scrollbar
{background: #222; width: 4px;}
body::-webkit-scrollbar-thumb
{background: #aaa; width: 4px;}

section.profile-page
{
   width: 100%;
   min-height: 100vh;
   padding: 1rem;
   z-index: 1;
   background: url('../img/wallpaper.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.content
{
   margin: 4.4rem auto auto 10%;
   width: 80%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.content .profile-picture
{
   position: relative;
   width: 135px;
   height: 135px;
   overflow: hidden;
   padding: 1rem;
   margin-bottom: .8rem;
}

@keyframes rotate-left 
{
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-360deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-right 
{
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.profile-picture .c-ot,
.profile-picture .c-in,
.profile-picture .face
{
   position: absolute;
   user-select: none;
   pointer-events: none;
}

.profile-picture .c-ot
{
   inset: 2% auto auto 2%;
   width: 96%;
   opacity: .5;
   animation: 30s rotate-left linear infinite;
}

.profile-picture .c-in
{
   inset: 6.5% auto auto 7%;
   width: 86%;
   opacity: .5;
   animation: 30s rotate-right linear infinite;
}

.profile-picture .face
{
   width: 70%;
   inset: 15% auto auto 15%;
   border-radius: 200px;
}

.text
{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   color: #ccc;
   margin-bottom: 1.75rem;
}

.text h1 
{
   font-family: 'Flame';
   font-weight: 100;
   font-size: 1.25rem;
}

.text p {font-size: .85rem;}

.social-list
{
   display: flex;
   flex-direction: row;
   gap: 1rem;
   margin-bottom: 2rem;
}

.social-list a
{
   width: 2.25rem;
   height: 2.25rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   border: .5px solid #cccccc75;
   color: #cccccc75;
   transition: .3s all ease-in-out;
}

.social-list a:hover
{
   border: .5px solid #ddd;
   color: #ddd;
}

.link-list
{
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

.link-list .social-item
{
   width: 50%;
   height: 3rem;
   padding: .5rem 1rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   backdrop-filter: blur(10px);
   border-radius: 10px;
   box-shadow: #cccccc33 0px 1px 3px 0px, #cccccc33 0px 0px 0px 1px;
}

.link-list .social-item:nth-child(1) {background: linear-gradient( 15deg, #1fdf6556,#1fdf6538, #ffffff10 50%);}
.link-list .social-item:nth-child(2) {background: linear-gradient( 15deg, #5865F256,#5865F238, #ffffff10 50%);}
.link-list .social-item:nth-child(3) {background: linear-gradient( 15deg, #FF36BB56,#FF36BB38, #ffffff10 50%);}

.social-item img
{width: 1.65rem;}

.social-item span
{
   color: #aaa;
   font-size: .9rem;
   font-weight: 100;
   min-width: 10rem;
}

@media(max-width: 1200px)
{.content {margin: 4.5rem auto auto 0; width: 100%;}}

@media(max-width: 800px)
{
   .link-list .social-item
   {width: 75%; height: 3.5rem;}

   .social-item img
   {width: 1.5rem;}

   .link-list .social-item span
   {font-size: .8rem;}
}

@media(max-width: 800px)
{
   .link-list .social-item span
   {font-size: .75rem; min-width: 8rem;}

   .social-item img
   {width: 1.4rem;}
}