@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Poppins:wght@100;200;300;400;600;700&display=swap');

:root{
    --font:'Poppins',sans-serif;
    --font-2:'Cookie',cursive;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:before,
:after{
    content:'';
    position:absolute;
}

body{
    font-family:var(--font);
    font-size:16px;
    overflow-x:hidden;
    min-height:100vh;


    background:
        linear-gradient(
            rgba(248,104,180,.35),
            rgba(34,58,184,.35)
        ),
        url("https://xatimg.com/image/TiYxkmuM4Kim.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

a,
span{
    display:inline-block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* CONTAINER */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-container-fluid{
    position:relative;
    min-height:100vh;
    z-index:10;
}

.jd-app{
    width:900px;
    height:710px;

    position:absolute;
    top:50px;
    left:50%;

    transform:translate(-50%,0);
}

.jd-app:after{
    width:830px;
    height:620px;

    background:#fff;

    left:calc(50% - 415px);
    top:0;

    box-shadow:
        0 5px #FF1493 inset,
        0 0 50px rgba(0,0,0,.2);

    z-index:-2;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* HEADER */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-header{
    width:830px;
    height:95px;

    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-left:35px;
}

.jd-title h1{
    font-family:var(--font-2);
    font-weight:300;
    font-size:2.8rem;
}

.jd-title h1 span{
    color:#FF1493;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* MENU */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-navbar{
    height:38px;
}

.jd-navbar ul{
    display:flex;
    align-items:center;
    gap:10px;
}

.jd-navbar ul li{
    width:90px;
    height:38px;

    background:#FFC0CB;
    border-radius:3px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    cursor:pointer;

    transition:.2s;
    font-size:.8rem;
}

.jd-navbar ul li:hover{
    background:#FF69B4;
    color:#fff;
    letter-spacing:1px;
}

.jd-navbar ul li:before,
.jd-navbar ul li:after{
    width:5px;
    height:1px;

    background:#363636;

    top:calc(50% - .5px);

    transition:.3s;
}

.jd-navbar ul li:before{
    left:0;
}

.jd-navbar ul li:after{
    right:0;
}

.jd-navbar ul li:hover:before,
.jd-navbar ul li:hover:after{
    width:10px;
    background:#fff;
}

.jd-navbar ul li:hover:before{
    left:calc(100% - 10px);
}

.jd-navbar ul li:hover:after{
    right:calc(100% - 10px);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* MAIN */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-main{
    width:900px;
    height:470px;

    background:#FF1493;

    position:relative;

    padding:10px;

    box-shadow:
        0 10px 20px rgba(0,0,0,.2),
        0 -10px 20px rgba(0,0,0,.2);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* SIDE TABS */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-tab{
    position:absolute;

    width:35px;
    height:100%;

    background:#FF69B4;

    top:0;
    z-index:-1;
}

.jd-tab.left{
    left:0;
}

.jd-tab.left:before{
    width:0;
    height:0;

    border-top:30px solid transparent;
    border-right:35px solid #EE1289;

    top:-30px;
}

.jd-tab.left:after{
    width:0;
    height:0;

    border-bottom:30px solid transparent;
    border-right:35px solid #fff;

    bottom:-30px;
}

.jd-tab.right{
    right:0;
}

.jd-tab.right:before{
    width:0;
    height:0;

    border-top:30px solid transparent;
    border-left:35px solid #fff;

    top:-30px;
}

.jd-tab.right:after{
    width:0;
    height:0;

    border-bottom:30px solid transparent;
    border-left:35px solid #EE1289;

    bottom:-30px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* PAGES */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-pages{
    width:880px;
    height:450px;

    position:relative;

    background:
        url("https://xatimg.com/image/VPeRHTf3PN88.gif") left top repeat,
        #fff;

    overflow:hidden;
}

.jd-page-section{
    width:100%;
    height:100%;

    position:absolute;
    top:-100%;
    left:0;

    background:
        url("https://xatimg.com/image/VPeRHTf3PN88.gif") left top repeat,
        #fff;

    overflow:hidden;
    display:flex;
}

.jd-page-section.home{
    top:0;
    background:#FF69B4;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* BANNER */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-banner{
    width:100%;
    height:100%;

    display:flex;
}

.jd-group-banner{
    width:calc(100% / 3);
    height:100%;

    position:relative;
    overflow:hidden;

    background:#FF1493;
}

.jd-img-base{
    width:100%;

    position:absolute;
    top:0;
    left:50%;

    transform:translateX(-50%) scale(1);
    transition:.5s;

    filter:grayscale(1);
}

.jd-group-banner:hover .jd-img-base{
    filter:grayscale(0);
    transform:translateX(-50%) scale(1.1);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* CARD */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-front{
    width:100%;
    height:155px;

    position:relative;

    background:#FF69B4;

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    top:calc(100% - 155px);

    transition:.5s;

    box-shadow:0 5px #FF69B4 inset;
}

.jd-box-small{
    width:74px;
    height:74px;

    border-radius:50%;

    position:absolute;
    overflow:hidden;

    top:-37px;
    left:calc(50% - 37px);

    display:flex;
    justify-content:center;
    align-items:flex-start;

    background:#fff;

    box-shadow:
        0 0 0 5px #FF69B4;
}

.jd-box-small img{
    width:100%;
}

.jd-group-banner:hover .jd-front{
    top:calc(100% - 55px);
}
.jd-footer{
width:830px;
position:relative;
padding:0 20px;
margin-left:35px;
z-index:-1;
display:flex;
justify-content:space-between
}
.jd-sound{
width:170px;
height:38px;
background:#FF1493;
margin-top:10px;
border-radius:38px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:.8rem;
gap:10px;
transition:.2s
}

.jd-credit{
    position:absolute;
    right:20px;
}

.jd-txt{
    width:100%;
    text-align:center;
}

.jd-sound:hover{
    color:#222;
    cursor:pointer;
}

.fa-volume-down,
.fa-volume-up,
.jd-sound i{
    width:20px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* SOCIAL */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-social{
    width:278px;
    height:223px;

    background:url(LINK) left top no-repeat;

    position:absolute;
    right:20px;
    top:-80px;

    padding-top:90px;
}

.jd-social span{
    color:#FF1493;
    padding-left:25px;

    font-family:var(--font-2);
    font-size:2rem;
}

.jd-social ul{
    width:150px;

    margin-left:80px;
    margin-top:20px;

    display:flex;
    gap:10px;
}

.jd-social ul a{
    width:40px;
    height:40px;

    color:#222;

    border-radius:50%;

    box-shadow:0 0 0 1px #FF1493;

    transition:.2s;
    font-size:1.3rem;
}

.jd-social ul a:hover{
    color:#FF1493;
}

.jd-social ul a i{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* PAGE IMAGE */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-box-img-page{
    width:294px;
    height:450px;

    border:10px solid #fff;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
}

.jd-box-img-page img{
    width:100%;
	height:100%;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* CONTENT */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-container{
    flex-grow:1;

    width:calc(100% - 294px);
    height:450px;

    padding:10px;
}

.jd-content{
    width:100%;
    height:100%;

    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:#FF69B4 #222;
}

.jd-title-page{
    color:#FF69B4;

    font-weight:400;
    font-size:2rem;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* ABOUT */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-article.about h1{
    color:rgb(13,146,255);

    font-size:3rem;
    font-weight:200;

    line-height:40px;
}

.jd-article.about span{
    color:#bababa;
    font-size:2rem;
	filter:drop-shadow(0 0 5px rgba(252,101,189,.5));
}

.jd-article.about p{
    width:350px;
    margin:20px 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* FRIENDS */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-article.friend{
    display:flex;
    flex-direction:column;

    margin-top:25px;
}

.jd-row-friend{
    width:275px;
    height:54px;

    margin-bottom:25px;

    display:flex;
}

.jd-avatar{
    width:54px;
    height:54px;

    background:#fff;

    border:3px solid #fff;

    box-shadow:10px 10px 10px #009dff50;

    overflow:hidden;

    margin-right:15px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.jd-avatar img{
    width:100%;
}

.jd-data{
    width:205px;
    height:54px;

    position:relative;
}

.jd-data span{
    color:#FF69B4;
    font-size:1.1rem;
}

.jd-data p{
    font-size:.8rem;
}

.jd-data a{
    position:absolute;

    width:70px;
    height:26px;

    background:#FF69B4;
    color:#fff;

    text-transform:uppercase;
    text-align:center;

    line-height:26px;

    font-size:.7rem;

    border-radius:2px;

    right:0;
    top:10px;

    transition:.2s;
}

.jd-data a:hover{
    letter-spacing:1px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* VIDEO */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-article.video,
.jd-group-video{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.jd-group-video{
    margin:25px;
}

.jd-group-video span{
    color:#FF69B4;
}

.jd-box-video{
    width:350px;
    height:197px;

    background:#111;

    margin-top:25px;

    box-shadow:0 10px #FF69B4;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* GALLERY */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.jd-article.gallery{
    width:540px;
    height:auto;

    display:flex;
    flex-direction:column;

    margin-top:20px;
}

.jd-box-img-gallery{
    width:540px;
    height:auto;

    border:10px solid #fff;

    margin-bottom:25px;
}

.jd-box-img-gallery img{
    width:100%;

    filter:grayscale(1);
    transition:.2s;
}

.jd-box-img-gallery:hover img{
    filter:grayscale(0);
}

.jd-box-img-gallery-prof{
    width:540px;
    height:300px;

    border:10px solid #fff;

    margin-bottom:25px;
}

.jd-box-img-gallery-prof img{
    width:520px;
    height:280px;

    filter:grayscale(1);
    transition:.2s;
}

.jd-box-img-gallery-prof:hover img{
    filter:grayscale(0);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* SCROLLBAR */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

::-webkit-scrollbar{
    width:8px;
    background:#222;
}

::-webkit-scrollbar-thumb{
    background:#FF69B4;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* CANVAS EFFECT */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

canvas{
    width:100%;
    height:100%;

    position:fixed;
    top:0;
    left:0;

    z-index:-1;
}

#credit a { 
    position:fixed; 
    right:10px; 
    bottom:10px; 
    font-size:15px;
    text-shadow: 0px 0px 2px #c8cdb3;
    color:#c8cdb3; 
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
 
#credit a:hover { 
    text-shadow: 0px 0px 4px #c8cdb3;
    color:#c8cdb3;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


footer{
    position:fixed;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:10;

    text-shadow:
        0 0 5px rgba(252,101,189,.7),
        0 0 10px rgba(24,213,221,.5);
}

footer a{
    color:#fc65bd;
    text-decoration:none;

    font-size:13px;
    font-weight:600;
}

footer a:hover{
    color:#18d5dd;
}

#year{
    color:#18d5dd;
    margin-left:4px;
}