* {
    margin: 0;
    padding: 0;
    font-family: 'Varela Round', sans-serif;
    user-select: none;
 }
 #preloader
 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #050505;
    width: 100vw;
    height: 105vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    user-select: none;
    pointer-events: none;
    transition: 1.3s;
    overflow: hidden;
 }
 #preloader img
 {
    width: 220px;
    box-shadow: 0 0 100px 50px #151515,0 0 150px 50px #151515;
    border-radius: 70px;
    overflow: hidden;
    animation: preloader_anim 1.8s ease-in-out infinite;
    transition: 1.3s;
 }
 @keyframes preloader_anim
 {
    0%
    {
       width: 220px;
    }
    50%
    {
       width: 320px;
       border-radius: 85px;
    }
 }
 body {
    /*background: linear-gradient(to right top,#7b00ff2a,#e63b3e40),url(img/space.jpg);*/
    background: url(img/bg-wallpaper.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
 }
 
 .bg {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
 }
 .main
 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
 }
 .profile-border {
    width: 550px;
    height: 750px;
    border-radius: 30px;
    position: relative;
    background: linear-gradient(to bottom, #7b00ff7a, #e63b3e7a);
    /*background: linear-gradient(to right top,#7b00ff2a,#e63b3e40);*/
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px black;
    backdrop-filter: blur(5px);
    transition: all .4s;
    overflow: hidden;
 }
 .profile-card {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px -20px black;
    border-radius: 25px;
    overflow: hidden;
 }
 
 .profile-nav {
    border-radius: 25px 25px 0 0;
    position: relative;
    background: linear-gradient(to right, #7b00ff2a, #e63b3e, #7b00ff2a);
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 0 black;
    transition: all .3s;
 }
 
 .profile-banner {
    width: 100%;
    height: 235px;
    background: url(img/space.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 25px 25px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all .4s;
 }
 
 .profile-img-bg {
    position: absolute;
    width: 100%;
    height: 235px;
    background: linear-gradient(to bottom, #7b00ff9a, #e63b3e9a, #7b00ff9a);
    transition: all .5s;
    object-fit: cover;
    object-position: center;
 }
 
 
 .profile-img {
    bottom: -70px;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    position: relative;
    background: linear-gradient(to right, #e63b3e, #7b00ff, #7b00ff, #7b00ff, #e63b3e);
    padding: 4px;
    box-shadow: 0 0 10px 5px black;
    pointer-events: none;
    transition: all .5s;
 }
 
 .profile-img img
 {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: all .5s;
    position: absolute;
    padding: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    object-position: center;
 }
 #profile-img-in
 {
    opacity: 1;
    transition: 0.65s;
 }
 .profile-inf-border
 {
    position: relative;
    height: 70%;
    overflow: hidden;
 }
 .profile-inf {
    padding-top: 80px;
    text-align: center;
    transition: all .5s;
    position: absolute;
    width: 100%;
    top: 45%;
    transform: translateY(-50%);
 }
 
 .profile-inf .username {
    margin-bottom: 100px;
 }
 
 .profile-inf .username h1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: 72px;
    display: inline-block;
    background: linear-gradient(to bottom, #e2985b 20%, rgba(0, 0, 0, 0.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    z-index: 200;
 }
 
 .profile-inf .username h1:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    color: #e2985b;
    text-shadow: 0 0 10px black, 0 0 10px black, 0 0 10px black;
    font-weight: bold;
    z-index: 100;
 }
 
 .profile-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
 }
 
 .profile-detail h2 {
    font-size: 38px;
    color: #e2985b;
    font-weight: bold;
    text-shadow: 0 0 10px #e2985b,0 0 5px #e2985b, 0 0 5px black;
 }
 
 .profile-detail h3 {
    font-size: 32px;
    color: #e2985b;
    font-weight: bold;
    text-shadow: 0 0 10px #e2985b,0 0 5px #e2985b, 0 0 5px black;
 }
 
 .profile-detail h4 {
    font-size: 22px;
    color: #e2985b;
    font-weight: bold;
    text-shadow: 0 0 10px #e2985b,0 0 5px #e2985b, 0 0 5px black;
    transition: all .5s;
    padding-bottom: 15px;
 }
    
 
    @media (min-width:620px)
    {
       .profile-border:hover #profile-img-in
       {
          opacity: 0;
       }
       .profile-border:hover {
          padding: 4px;
       }
       .profile-border:hover .profile-inf {
          padding-top: 25px;
       }
       .profile-border:hover .profile-img
       {
          width: 200px;
          height: 200px;
          border-radius: 25%;
          transition: all .4s;
          bottom: 16px;
       }
       .profile-border:hover .profile-img img
       {
          border-radius: 25%;
       }
       .profile-border:hover .profile-nav {
          padding-bottom: 0;
       }
    }
 
    .insta:hover {
       box-shadow: 0 0 15px 10px rgba(120, 64, 190, 1);
    }
 
    .twitter:hover {
       box-shadow: 0 0 15px 8px rgba(19, 127, 212, 1);
    }

    .linkedin:hover {
        box-shadow: 0 0 15px 8px rgba(19, 127, 212, 1);
    }
 
    .github:hover {
       box-shadow: 0 0 15px 8px rgb(46, 48, 49);
    }
 
    .discord:hover {
       box-shadow: 0 0 15px 8px rgba(34, 120, 233, 1);
    }
 
    .bionluk:hover {
       box-shadow: 0 0 15px 8px #EC365F;
    }
 .links
 {
    box-shadow: 0 0 50px 0px black;
    width: 90%;
    gap: 15px;
    padding: 13px;
    border-radius: 25px;
    transition: all .5s;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 82px;
    overflow: hidden;
    scroll-behavior: smooth;
 }
 .links::-webkit-scrollbar
 {
    width: 0;
 }
 .profile-border:hover .links
 {
    height: 155px;
 }
 .profile-border:hover .links:hover
 {
    height: 175px;
 }
 .profile-border:hover .links:hover .studiesbtn
 {
    animation: arrowAnim 4s infinite ease-in-out;
    transform: translateY(0) scale(1);
 }
 @keyframes arrowAnim {
    0%
    {
       transform: translateY(-1px) scale(1);
    }
    35%
    {
       transform: translateY(-1px) scale(1);
    }
    40%
    {
       transform: translateY(-8px) scale(1);
    }
    45%
    {
       transform: translateY(3px) scale(1);
    }
    50%
    {
       transform: translate(-1px) scale(1);
    }
    100%
    {
       transform: translateY(-1px) scale(1);
    }
 }
 .profile-border:hover .links:hover .studiesbtn:hover
 {
    animation: none;
    transform: translateY(1px) scale(1.15);
 }
 .studies
 {
    display: flex;
    flex-direction: column;
    gap: 13px;
 }
 .studies .study
 {
    text-decoration: none;
    color: white;
    font-size: 26px;
    border-radius: 17px;
    padding: 16px 12px;
    transition: 0.2s;
    opacity: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: baseline;
    background: linear-gradient(to right, #7b00ff7a, #e63b3e7a);
    position: relative;
    cursor: pointer;
 }
 .study label
 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 75%;
    cursor: pointer;
    transition: 0.25s;
 }
 .studies .study:hover
 {
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
 }
 .links .studiesbtn
 {
    font-size: 15px;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.5s;
    transform: translateY(-1px) scale(1);
 }
 .links .studiesbtn.active
 {
    display: none;
 }
 .studies .study i
 {
    padding-left: 12px;
    width: 40px;
 }
 .studies .study .fa-github
 {
    padding-left: 11px;
    scale: 1.15;
 }
 .studies .study .fa-lock
 {
    margin-left: 1px;
 }
 .social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
 }
 .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 24px;
    border-radius: 17px;
    padding: 15px;
    transition: all .4s;
    opacity: 0;
    width: 55px;
 }
 .insta {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    box-shadow: 0 0 10px 5px rgba(120, 64, 190, 1);
    font-size: 28px;
 }
 .twitter {
    background: linear-gradient(45deg, #1da1f2, #0e71c8);
    box-shadow: 0 0 10px 3px rgba(19, 127, 212, 0.7);
 }
 .linkedin {
    background: linear-gradient(45deg, #1da1f2, #0e71c8);
    box-shadow: 0 0 10px 5px rgba(19, 127, 212, 0.9);
 }
 .github {
    background: linear-gradient(45deg, #333333, #626b73);
    box-shadow: 0 0 10px 5px rgba(63, 65, 67, 1);
 }
 .discord {
    background: linear-gradient(45deg, #455ba5,#4682B4, #4682B4, #7289DA);
    box-shadow: 0 0 10px 5px rgba(34, 120, 233, 0.7);
 }
 .bionluk img {
    width: 24px;
    transition: all .4s;
 }
 .bionluk {
    background: linear-gradient(45deg, #cc2e53,#D62F4B, #F1395C, #E6335C);
    box-shadow: 0 0 10px 3px #EC365F;
 }
 @media (max-width:620px)
 {
    .profile-border
    {
       width: 450px;
       border-radius: 25px;
       padding: 5px;
    }
    .links
    {
       height: 175px;
       margin-bottom: 10px;
    }
    .social-links {
       gap: 10px;
    }
    .profile-border
    {
       padding: 0;
    }
    .profile-img {
       width: 200px;
       height: 200px;
       border-radius: 100%;
       transition: all .4s;
       bottom: 16px;
    }
    .profile-img img
    {
       border-radius: 100%;
    }
    .profile-nav
    {
       padding-bottom: 0;
    }
    .profile-border:hover .links
    {
       height: 175px;
    }
    .profile-inf {
       padding-top: 20px;
    }
    .profile-inf .username h1 {
       padding-top: 10px;
       font-size: 64px;
    }
 
    .profile-detail h2 {
       font-size: 38px;
    }
 
    .profile-detail h3 {
       font-size: 32px;
    }
    .profile-detail h4
    {
       padding-bottom: 0;
    }
    .profile-detail {
       gap: 27px;
    }
    .study label
    {
       width: 70%;
    }
 }
 @media (max-width:460px)
 {
    .profile-border {
       width: 97%;
    }
    .main
    {
       padding-bottom: 20px;
    }
    .social-links a
    {
       font-size: 19px;
    }
    .bionluk img
    {
       width: 19px;
    }
    .study label
    {
       width: 73%;
       font-size: 20px;
       left: 54%;
    }
 }
 @media (max-width:350px)
 {
    .social-links
    {
       gap: 0;
    }
    .social-links a
    {
       font-size: 16px;
       width: 45px;
       height: 45px;
       margin-bottom: 3px;
    }
    .bionluk img
    {
       width: 16px;
    }
    .links
    {
       height: 173px;
    }
    .study label
    {
       width: 77%;
       left: 58%;
       font-size: 18px;
    }
 }
 .cursor
 {
    z-index: 5000;
    background-color: #d33639e0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    animation: colors 3s infinite;
    transform: translate(-50%,-50%);
    display: none;
    transition: none;
    opacity: 0.95;
 }
 @keyframes moveup
 {
    from
    {
       opacity: 0;
       transform: translateY(40px);
    }
    to
    {
       opacity: 1;
       transform: translateY(0);
    }
 }