/* core styling */
 *, *:before, *:after {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     outline: none;
}
 *::-webkit-scrollbar {
     display: none;
     height: 0;
     width: 0;
}
 body {
     background-size: 400% 400%;
     display: grid;
     place-items: center;
     font-size: 20px;
     color: #000;
     cursor: pointer;
     animation: gradient 15s ease infinite;
}
 a {
     text-decoration: none;
     color: #333;
     cursor: pointer;
}
/* main styling */
 .container {
     display: grid;
     place-items: center;
     height: 100vh;
     width: 100vw;
}
 .video-container {
     position: relative;
     border-radius: 10px;
     height: 659px;
     width: 330px;
     box-shadow: 0 0 50px #000;
     margin: auto;
     overflow: scroll;
     scroll-snap-type: y mandatory;
     scroll-snap-align: center;
}
/* video container header */
 .video-container-header {
     position: absolute;
     top: 20px;
     left: 0;
     width: 100%;
     height: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: center;
     z-index: 3;
}
 .video-container-header div {
     width: 100%;
     height: 100%;
     display: flex;
     font-size: 15px;
     color: #ccc;
     justify-content: center;
     align-items: center;
     cursor: pointer;
}
 .video-container-header div.active {
     font-size: 20px;
     color: #fff;
}
 .post {
     position: relative;
     height: 659px;
     width: 330px;
     overflow: hidden;
     scroll-snap-align: center;
}
 .video-player {
     position: relative;
     height: 100%;
     width: 100%;
}
 .video-player::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     height: 100%;
     width: 100%;
     box-shadow: inset 0 0 120px #000;
}
 .side-bar {
     position: absolute;
     right: 0;
     top: 50%;
     z-index: 2;
     transform: translate(0, -50%);
}
 .post-footer {
     position: absolute;
     width: 80%;
     bottom: 0;
     left: 0;
     padding: 10px;
     color: #fff;
     z-index: 2;
}
 .post-footer a {
     color: #fff;
}
 .post-footer .username {
     display: flex;
     height: 30px;
     align-items: center;
}
 .post-footer .username .username-link::before {
     content: '@ ';
     color: #fff;
}
 .verfied .verfied-icon, .post-comment-user-verified {
     height: 20px;
     width: 20px;
     margin-left: 10px;
     font-size: 9px;
     border-radius: 50%;
     background-color: #008abf;
     display: grid;
     place-items: center;
}
 .post-description {
     padding-left: 10px;
     font-size: 10px;
}
 .disc-logo {
     position: absolute;
     right: 10px;
     bottom: 10px;
     height: 50px;
     width: 50px;
     border-radius: 50%;
     overflow: hidden;
     z-index: 2;
     animation: disc-anime infinite linear 2s;
}
 .disc-logo-img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     transform: scale(1.4);
}
 .side-bar .profile-follow {
     position: relative;
}
 .side-bar .profile-follow .fa-plus {
     font-size: 10px;
     position: absolute;
     top: 65%;
     left: 50%;
     transform: translate(-50%);
     height: 20px;
     width: 20px;
     border-radius: 50%;
     background-color: #ff2828;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .side-bar .profile-logo-img {
     overflow: hidden;
     height: 40px;
     width: 40px;
     border-radius: 50%;
}
 .side-bar .side-icon {
     cursor: pointer;
     padding: 20px;
     font-size: 25px;
     text-align: center;
     color: #fff;
}
 .side-icon p {
     font-size: 10px;
     padding-top: 5px;
}
/* post comments */
 .post-comments {
     position: absolute;
     bottom: -100%;
     left: 0;
     height: 60%;
     width: 100%;
     border-radius: 10px 10px 0 0;
     padding: 10px;
     background-color: #fff;
     z-index: 5;
     transition: all 0.5s ease;
     font-size: 16px;
}
 .post-comments::before {
     content: '';
     position: absolute;
     top: 5px;
     left: 50%;
     width: 50%;
     padding: 1px;
     background-color: #333;
     border-radius: 50px;
     transform: translate(-50%);
}
 .post-comments.open {
    bottom: 0;
    display: block !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}
 .close-comment {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     font-size: 34px;
     font-weight: 300px;
}
 .post-comments-area {
/*     height: 239px;*/
     height: 100%;
     margin-top: 10px;
     overflow: scroll;
    scrollbar-width: thin;
}
 .post-comment {
     margin: 12px auto;
     display: flex;
     width: 100%;
     height: auto;
     align-items: center;
     justify-content: space-between;
     text-align: left;
}
 .post-comment-user-name {
     display: flex;
}
 .post-comment-user-img {
     overflow: hidden;
     border-radius: 50%;
     height: 40px;
     width: 40px;
}
 .post-comment-user-verified {
     width: 15px;
     height: 15px;
     font-size: 10px;
}
 .post-comment-user-msg {
     font-size: 14px;
}
 .post-comment-like-btn {
     text-align: center;
     cursor: pointer;
}
 .post-comment-like-btn p {
     font-size: 10px;
}
 .post-comment-like-btn .post-comment-like-icon.liked {
     color: #ff2828;
}
 .post-comment-content {
     display: flex;
     flex-direction: column;
     padding-left: 20px;
     padding-right: 20px;
     justify-content: center;
     width: 100%;
}
 .post-comment-input {
     background-color: aliceblue;
     padding: 10px;
     display: flex;
     height: 50px;
     width: 100%;
     align-items: center;
     justify-content: flex-start;
}
 .post-comment-text {
     height: 40px;
     width: 100%;
     border: 0;
     padding: 10px 20px;
}
 .post-comment-send {
     height: 40px;
     width: 40px;
     border: 0;
     background-color: transparent;
     cursor: pointer;
}
 .music-name {
     display: flex;
     font-size: 10px;
     padding: 5px;
}
 .song-name {
     margin-left: 10px;
}
 video.post-video {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 @keyframes gradient {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
 @keyframes disc-anime {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loader {
     display: none;
     padding: 10px;
    /*border: 16px solid #f3f3f3;
     */
    /* Light grey */
    /*border-top: 16px solid #048023;
     */
    /* Dark Green */
    /*border-radius: 50%;
     */
     width: 550px;
     height: 160px;
    /*animation: spinloader 2s linear infinite;
     */
}
 .loader img {
     width: 550px;
     height: 160px;
    /*animation: spinlogo 2s linear infinite;
     */
}
 .load_logo {
     max-inline-size: 100%;
     block-size: auto;
     width: unset !important;
     height: unset !important;
}
 @keyframes spinloader {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes spinlogo {
     0% {
         transform: rotate(360deg);
    }
     100% {
         transform: rotate(0deg);
    }
}