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

@font-face {
    font-family: "Bad Script";
    src: url("assets/fonts/BadScript-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Ink Free";
    src: url("assets/fonts/Inkfree.ttf") format("truetype");
}

body{

    background:linear-gradient(180deg,#090909,#14081f);

    min-height:100vh;

}

.container{

    width:100%;

    margin:auto;

}

.header{

    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:40px;

}

.logo{

    width:200px;

}

.avatar{

    width:170px;
    height:170px;

    object-fit:cover;

    border-radius:50%;

    display:block;

}

.nickname{

    margin-top:20px;

    color:#d2d2d2;

    font-size:64px;

    font-family:"Bad Script";

    font-weight:400;

}

.separator{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

    width:100%;

    margin-top:25px;

    font-family:"Ink Free";
}

.line{

    flex:1;

    height:3px;

    background:white;

}

.separator span{

    font-size:34px;

    color:#808080;

    font-family:"Ink Free";

}


.cards{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:90px;

    margin-bottom:120px;

}

.card{

    width:min(1250px,92%);

    display:block;

    margin-bottom:100px;

    text-decoration:none;

    transition:.25s;
	
	cursor:pointer;

}


.footer{

    padding-bottom:80px;

    margin-top:40px;

}

.footer h2{

    margin-top:35px;

    text-align:center;

    color:#bfbfbf;

    font-family:Impact;

    font-size:72px;

}


.footer p{

    margin-top:40px;

    text-align:center;

    color:#bfbfbf;

    font-family:Impact;

    font-size:30px;

}

.card img{

    width:100%;

    display:block;

    border-radius:40px;

    user-select:none;

    -webkit-user-drag:none;
	
	transition:.25s;

}

.card:hover{

    transform:translateY(-8px) scale(1.015);

    filter:drop-shadow(0 0 18px rgba(126,43,255,.45));

}

html{

    scroll-behavior:smooth;

}

.avatar-wrapper{

    position:relative;

    display:inline-block;

    margin-top:35px;

    border-radius:50%;

}

.avatar-wrapper.live{

    padding:6px;

    border:4px solid #ff2020;

    animation:livePulse 2s infinite;

}

.live-badge{

    position:absolute;

    left:50%;

    top:-18px;

    transform:translateX(-50%);

    background:#ff2020;

    color:white;

    font-family:Impact;

    font-size:18px;

    padding:4px 14px;

    border-radius:999px;

    display:none;

    z-index:100;

    user-select:none;

}

.avatar-wrapper.live .live-badge{

    display:block;

}

#avatarLink{

    text-decoration:none;

    cursor:default;

}

#avatarLink.live{

    cursor:pointer;

}

@keyframes livePulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,0,0,.75);

    }

    70%{

        box-shadow:0 0 0 18px rgba(255,0,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,0,0,0);

    }

}

@media (max-width: 768px){

    .cards{

        margin-top:40px;

        margin-bottom:50px;

    }

    .card{

        width:95%;

        margin-bottom:12px;

    }

    .logo{

        width:150px;

    }

    .avatar{

        width:140px;
        height:140px;

    }

    .nickname{

        font-size:48px;

    }

    .separator{

        gap:18px;

    }

    .separator span{

        font-size:24px;

    }

    .footer h2{

        font-size:42px;

    }

    .footer p{

        font-size:20px;

    }

}