* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



@font-face {
    font-family: 'Astera2';
    src: url(../Font/ASTERA.ttf);
}
@font-face {
    font-family: 'KanitLight';
    src: url(../Font/KanitLight2.ttf);
}
@font-face {
    font-family: 'RobotoRegular';
    src: url(../Font/Roboto-Regular.ttf);
}



:root {
    --avatar: url(../Image/Avatar1.svg);
    --BBHC: rgb(17,17,17);
    --BBVC: rgb(17,17,17);
    --BGC: rgba(70,70,70,.15);
    --BR: 3px;
}



::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(50,50,50);
    border-radius: 1px;
}



html {
    overflow: hidden;
    font-family: 'RobotoRegular';
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
    min-width: 320px;
    background: rgb(20,20,20);
    background-image: url(../Image/pattern1.png);
    background-repeat: repeat;
    background-size: 210px;
    color: rgb(180,180,180);
    font-size: 15px;
}



body, .container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}
.container { overflow-y: scroll; overflow-x: hidden }
.container::-webkit-scrollbar { width: 0 }



.background {
    position: absolute;
    pointer-events: none;
    border-left: solid 1px var(--BBVC);
    border-right: solid 1px var(--BBVC);
    height: calc(100vh - 50px);
    width: calc(100vw - 10px);
    max-width: 1122px;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
}
.background::before, .background::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -75px;
    width: 1px;
    height: 75px;
    background: linear-gradient(to top, transparent 0%, rgba(39,222,191,.5) 75%, rgb(39,222,191) 25%);
    animation: risingstar 3.5s 0s infinite;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    animation-fill-mode: forwards;
}
.background::before { left: -1px }
.background::after { right: -1px }
@keyframes risingstar {
    0% { bottom: -150px }
    60% { bottom: calc(100% + 150px) }
    100% { bottom: calc(100% + 150px) }
}



.empty-list {
    position: relative;
    text-align: center;
    color: rgb(100, 100, 100);
    padding: 20px;
    font-size: 15px;
    grid-column: 1/5;
}



.initial {
    position: absolute;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    background: rgb(20,20,20);
    background-image: url(../Image/pattern1.png);
    background-repeat: repeat;
    background-size: 210px;
    color: rgb(250,250,250);
    height: 100vh;
    width: 100vw;
    opacity: 0;
    z-index: -1;
    transition: 1s ease;
    gap: 5px;
}
.initial.active {
    opacity: 1;
    z-index: 99 !important;
}
.initial .logo {
    background: url(../Image/newLogo4.svg) no-repeat;
    background-size: cover;
    filter: drop-shadow(2px 2px 1px black);
    margin-bottom: 20px;
    height: 35px;
    width: 40px;
    animation: dangle 2.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
.initial .name {
    font-family: 'Astera2';
    font-size: 20px;
    letter-spacing: 26px;
    padding-left: 26px;
}
.initial .specialty {
    font-family: 'KanitLight';
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 10px;
    padding-left: 10px;
}
@keyframes dangle {
    0% { transform: rotate(-45deg) }
    50% { transform: rotate(45deg) }
    100% { transform: rotate(-45deg) }
}