:root{--color-text:#050505;--color-white:white;--color-bg:#e9e8e8;--color-nav:linear-gradient(45deg,#a307fd, #04dbdb);--color-secondary:linear-gradient(-45deg,#006eff, #ff00d4);--color-grey:grey;--color-text-primary:#ac04bb;--color-suggestions:linear-gradient(-90deg, white, #00ccff85);--color-blue:#21c2eb;--color-red:linear-gradient(-45deg, #e100ff, #ff0037);--color-grey-transparent:#5a5a5a8c;--color-orange:#ffa600}.dark{--color-text:#050505;--color-bg:#e9e8e8;--color-secondary:linear-gradient(-45deg,#0065e9, #f006c9);--color-follow:red}*{margin:0;padding:0}body{color:var(--color-text);background-color:var(--color-bg);overflow-x:hidden}body input{border-style:none;outline:none}body i{cursor:pointer;position:relative}body i #dot{background:red;border-radius:50%;width:6px;height:6px;position:absolute;top:0;right:-5px}body .loaderContainer{justify-content:center;align-items:center;width:100%;height:100vh;display:flex}body .loader{--d:22px;width:4px;height:4px;color:var(--color-text-primary);box-shadow:calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(.707*var(--d)) calc(.707*var(--d)) 0 1px, calc(0*var(--d)) calc(1*var(--d)) 0 2px, calc(-.707*var(--d)) calc(.707*var(--d)) 0 3px, calc(-1*var(--d)) calc(0*var(--d)) 0 4px, calc(-.707*var(--d)) calc(-.707*var(--d))0 5px, calc(0*var(--d)) calc(-1*var(--d)) 0 6px;border-radius:50%;animation:1s steps(8,end) infinite l27}#container{background:url(./images/login-bg.png) 50%/cover no-repeat;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}#container .loginError{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:red;z-index:10;border:1px solid red;border-radius:20px;justify-content:center;align-items:center;width:90%;max-width:400px;height:10%;display:flex;position:absolute;top:40px;box-shadow:2px 2px 10px}#container .form{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;flex-direction:column;justify-content:center;align-items:center;width:60%;max-width:450px;max-height:500px;padding:40px 0;display:flex;position:absolute;box-shadow:1px 0 2px}#container .form h1{text-shadow:2px 2px 2px #0690ec}#container .form #input{background:var(--color-secondary);border-radius:20px 0 0 40px;align-items:center;width:80%;height:50px;margin:10px 0;padding:5px;display:flex;position:relative}#container .form #input input{width:90%;height:80%}#container .form #input .isUsernameAvailable{position:absolute;right:10px}#container .form button{cursor:pointer;color:#fff;background:linear-gradient(45deg,#01ff232c,#0f0);border-style:none;border-radius:20px;justify-content:center;align-items:center;width:84%;height:40px;margin-top:20px;transition:all .5s;display:flex;position:relative}#container .form button .loader{position:absolute;scale:.6}#container .form button:hover{background:linear-gradient(-45deg,#01ff232c,#0f0);scale:1.02}#container .form p span{color:gray;cursor:pointer;text-decoration:underline}@media (width<=460px){#container .form{width:90%}}.navContainer{z-index:10;justify-content:center;align-items:center;width:100%;height:10vh;display:flex;position:fixed;bottom:0}.navContainer nav{background:var(--color-nav);border-radius:50px;justify-content:space-between;align-items:center;width:70%;max-width:500px;padding:8px 20px;font-size:130%;display:flex;position:relative}.navContainer nav .link{color:var(--color-bg)}.navContainer nav #addPostNavButton{background:var(--color-nav);border:1px solid;border-radius:50%;justify-content:center;align-items:center;width:35px;height:35px;margin-top:-20px;text-decoration:none;display:flex;position:relative;scale:1.3}.navContainer nav #addPostNavButton:hover{margin-top:-30px;scale:1.5}@media (width>=730px){.navContainer{pointer-events:none;width:80px;height:100%}.navContainer nav{pointer-events:all;flex-direction:column;width:10px;height:250px}.navContainer nav #addPostNavButton{margin-top:0;margin-right:-15px;top:0}.navContainer nav #addPostNavButton:hover{margin-top:0;margin-right:-30px}}#homepage-nav{justify-content:space-between;align-items:center;height:10vh;padding:0 10px;display:flex}#search{justify-content:center;align-items:center;padding:20px 0;display:flex}#search .search-container{background:var(--color-white);border-radius:10px;width:500px;height:40px;padding:10px}#search .search-container input{background:var(--color-bg);border-style:none;border-radius:5px;outline:none;width:100%;height:100%;padding:0 15px}#stories{justify-content:center;align-items:center;display:flex;overflow-x:auto}#stories .storiesContainer{align-items:center;width:100%;max-width:500px;margin:10px 0;padding:5px;display:flex}#stories .storiesContainer .addStory{background:linear-gradient(var(--color-white),var(--color-white)) padding-box,linear-gradient(135deg, #f0c, #33f) border-box;border:2px solid #0000;border-radius:50%;width:50px;height:50px;margin:0 5px;padding:2px;position:relative}#stories .storiesContainer .addStory img{border-radius:50%;width:50px;height:50px}#stories .storiesContainer .addStory .addStoryButton{background:var(--color-secondary);cursor:pointer;min-width:22px;height:22px;color:var(--color-bg);border-radius:50%;justify-content:center;align-items:center;transition:scale .5s;display:flex;position:absolute;bottom:-10%;right:-15%}#stories .storiesContainer .addStory .addStoryButton:hover{scale:1.1}#stories .storiesContainer #story-link{background:linear-gradient(var(--color-white),var(--color-white)) padding-box,linear-gradient(135deg, #f0c, #33f) border-box;border:2px solid #0000;border-radius:50%;width:50px;height:50px;margin:0 5px;padding:2px}#stories .storiesContainer #story-link img{border-radius:50%;width:50px;height:50px}.posts{flex-direction:column;align-items:center;margin-bottom:100px;display:flex}.posts .post{background:var(--color-white);flex-direction:column;width:100%;max-width:500px;margin:2px 0;display:flex}.posts .post .postInfo{align-items:center;padding:10px 0;display:flex;position:relative}.posts .post .postInfo #info .username{color:var(--color-text);font-weight:1000;text-decoration:none}.posts .post .postInfo #info .date{color:#0202028a;font-size:90%}.posts .post .postInfo .followButton{color:#0004ff;cursor:pointer;font-weight:1000;position:absolute;right:30px}.posts .post .postInfo #postProfile{background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#f0c,#33f) border-box;border:2px solid #0000;border-radius:50%;width:30px;height:30px;margin:0 5px;padding:2px}.posts .post .postInfo #postProfile img{border-radius:50%;width:100%;height:100%}.posts .post #post{position:relative}.posts .post #post img,.posts .post #post video{width:100%;max-height:80vh}.posts .post #post .totalPostIndicator{background:var(--color-text);color:var(--color-bg);border-radius:10px;padding:2px 5px;font-size:70%;position:absolute;top:5px;right:5px}.posts .post .postReactions{justify-content:space-around;padding:2px 0;display:flex}.posts .post .postReactions div{cursor:pointer;border:1px solid #0000;border-radius:50px;justify-content:center;align-items:center;padding:8px 10px;transition:all 1s;display:flex}.posts .post .postReactions div:hover{background:var(--color-bg);border:1px solid;border-radius:50px;padding:8px 10px}.posts .post .postComment{background:var(--color-bg);border-radius:10px;justify-content:center;align-items:center;width:95%;margin:5px;padding:5px;display:flex}.posts .post .postComment input{border-style:none;border-radius:5px;outline:none;width:75%;height:30px;padding-left:10px}.posts .post .postComment .shareComment{background:var(--color-secondary);color:var(--color-bg);cursor:pointer;border-radius:5px;padding:5px 5%}.posts .liked{color:#f60;pointer-events:none;display:none;position:absolute;bottom:68px;left:16px}@media (width<=460px){#stories .storiesContainer #story-link,#stories .storiesContainer .addStory{width:35px;height:35px}:is(#stories .storiesContainer #story-link,#stories .storiesContainer .addStory) img{width:35px;height:35px}#search .search-container{height:30px;padding:7px}}#profilePage{flex-direction:column;justify-content:center;align-items:center;display:flex}#profilePage .profile{align-items:center;max-width:500px;padding:10px;display:flex}#profilePage .profile .profilePic{border:4px solid #0000;border-radius:50%;width:40px;height:40px;margin-top:-20px;margin-right:20px;padding:3px;position:relative}#profilePage .profile .profilePic img{border-radius:50%;width:40px;height:100%}#profilePage .profile .profilePic i{background:var(--color-secondary);width:30px;height:30px;color:var(--color-bg);cursor:pointer;border:1px solid;border-radius:50%;justify-content:center;align-items:center;transition:scale .5s;display:flex;position:absolute;bottom:-10px;right:-15px;scale:.8}#profilePage .profile .profilePic i:hover{scale:.9}#profilePage .profile .aboutProfile{display:flex}#profilePage .profile .aboutProfile p{text-align:center;cursor:pointer;margin:5px 2px}#profilePage .nav{justify-content:space-between;max-width:500px;padding:10px;display:flex}#profilePage .nav i{cursor:pointer}#profilePage .userInfo{justify-content:center;align-items:center;max-width:500px;display:none}#profilePage #aboutUser{justify-content:center;align-items:center;width:100%;max-width:500px;display:flex}#profilePage #aboutUser .aboutUser{flex-wrap:wrap;justify-content:center;align-items:center;width:80%;display:flex}#profilePage #aboutUser .aboutUser p{max-width:50px;color:var(--color-blue);border:1px solid;border-radius:20px;justify-content:center;align-items:center;margin:5px;padding:5px 10px;display:flex}#profilePage #aboutUser .aboutUser #addAbout{color:#c402ff;cursor:pointer;transition:scale .5s}#profilePage #aboutUser .aboutUser #addAbout:hover{scale:1.05}#profilePage #highlights{width:100%}#profilePage #highlights .highlights{width:100%;max-width:500px;display:flex;overflow:auto}#profilePage #highlights .highlights .highlight-link img{border:3px solid var(--color-grey-transparent);border-radius:50%;width:50px;height:50px;margin:0 5px;padding:2px}#profilePage .profileDescription{background:var(--color-white);color:gray;border-radius:10px;flex-direction:column;justify-content:center;max-width:500px;margin:10px;padding:20px;display:flex}#profilePage .userPosts{flex-direction:column;justify-content:space-around;align-items:center;max-width:500px;margin:0 0 40%;display:flex}#profilePage .userPosts .head{background:var(--color-white);justify-content:space-around;width:100%;max-width:500px;margin:10px 0;display:flex}#profilePage .userPosts .head div{cursor:pointer;padding:4px}#profilePage .userPosts .postContainer{grid-template-columns:1fr 1fr 1fr;gap:2px;display:grid}#profilePage .userPosts .postContainer .post{cursor:pointer;height:200px;position:relative}#profilePage .userPosts .postContainer .post #post{width:100%;height:100%}#profilePage .userPosts .postContainer .post .list{color:var(--color-bg);position:absolute;top:5px;right:5px}#profilePage .userPosts .postContainer .post p{color:var(--color-bg);position:absolute;bottom:5px;right:10px}#profilePage .userPosts .noPost{height:200px;color:var(--color-text-primary);border:1px solid;border-radius:10px;justify-content:center;align-items:center;width:270px;margin:5px;font-size:200%;display:flex}#profilePage .h2{margin-top:20px;margin-bottom:-40px}#profilePage .suggestions{margin:40px 0;display:flex;overflow-x:auto}#profilePage .suggestions .suggestionsContainer{display:flex;position:relative}#profilePage .suggestions .suggestionsContainer .suggestion{background:var(--color-suggestions);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:150px;height:250px;margin:5px;display:flex}#profilePage .suggestions .suggestionsContainer .suggestion img{border-radius:50%;width:60px;height:60px}.profilePage-popup{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;height:100vh;position:fixed;top:0}.profilePage-popup .profilePopup{background:var(--color-bg);border:1px solid var(--color-text-primary);border-radius:10px 10px 0 0;flex-direction:column;align-items:center;width:100%;max-width:500px;height:80%;padding-top:10px;display:flex;position:fixed;bottom:0}.profilePage-popup .profilePopup .profile-popup-content{border-radius:5px;flex-direction:column;align-items:center;width:95%;padding-top:10px;padding-bottom:60px;display:flex;overflow:hidden auto}.profilePage-popup .profilePopup .profile-popup-content .inputContainer{width:100%;padding:5px;position:relative}.profilePage-popup .profilePopup .profile-popup-content .inputContainer .input{background:var(--color-white);border-radius:10px;margin:10px;padding:5px}.profilePage-popup .profilePopup .profile-popup-content .inputContainer .input input{background:var(--color-bg);border-radius:5px;width:98%;height:30px;padding-left:5px}.profilePage-popup .profilePopup .profile-popup-content .inputContainer .input textarea{resize:none;background:var(--color-bg);border-style:none;border-radius:5px;outline:none;width:99%;height:100px;padding-left:5px}.profilePage-popup .profilePopup .profile-popup-content .inputContainer i{position:absolute;right:10px}.profilePage-popup .profilePopup .profile-popup-content .button{background:var(--color-secondary);text-align:center;color:var(--color-bg);cursor:pointer;border-radius:10px;margin:10px;padding:10px 0}.profilePage-popup .profilePopup .profile-popup-content .about-post{background:var(--color-white);border-radius:10px;padding:10px;box-shadow:1px 1px 5px}.profilePage-popup .profilePopup .profile-popup-content .about-post img{border-radius:5px;width:100%}.profilePage-popup .profilePopup .profile-popup-content .about-post .about{flex-wrap:wrap;justify-content:center;display:flex}.profilePage-popup .profilePopup .profile-popup-content .about-post .about p{background:var(--color-bg);border-radius:10px;margin:2px;padding:10px}.profilePage-popup .profilePopup .profile-popup-content .edit-profile-profile img{border-radius:50%;width:70px;height:70px;box-shadow:2px 2px 10px}.profilePage-popup .profilePopup .profile-popup-content .about-user{background:var(--color-white);border-radius:10px;flex-wrap:wrap;justify-content:center;margin:10px;padding:20px 0;display:flex;box-shadow:1px 1px 5px}.profilePage-popup .profilePopup .profile-popup-content .about-user p{color:var(--color-text-primary);border:1px solid;border-radius:10px;margin:5px;padding:7px 10px}.profilePage-popup .profilePopup .profile-popup-content .profiles{justify-content:center;align-items:center;margin:10px 0;display:flex;position:relative}.profilePage-popup .profilePopup .profile-popup-content .profiles img{border:1px solid;border-radius:50%;width:60px;height:60px;margin:0 -10px;position:relative;box-shadow:2px 2px 10px}.profilePage-popup .profilePopup .profile-popup-content .profiles-container{flex-direction:column;align-items:center;width:100%;display:flex}.profilePage-popup .profilePopup .profile-popup-content .profiles-container .profile{background:var(--color-white);border-radius:10px;width:90%;margin:5px 10px;transition:box-shadow .5s;position:relative;box-shadow:1px 1px 2px}.profilePage-popup .profilePopup .profile-popup-content .profiles-container .profile .switch-account-button{background:var(--color-bg);cursor:pointer;border-radius:4px;padding:10px 20px;position:absolute;right:10px}.profilePage-popup .profilePopup .profile-popup-content .profiles-container .profile img{border:1px solid;border-radius:50%;margin-right:5px}.profilePage-popup .profilePopup .profile-popup-content .profiles-container .profile:hover{box-shadow:2px 2px 10px}.cancel-profilePopup{width:100%;height:20%}@keyframes l27{to{transform:rotate(1turn)}}@media (width<=460px){#profilePage .userPosts .postContainer .post{height:150px}}#stories{display:flex}#stories .story{background:var(--color-white);flex-direction:column;justify-content:space-between;width:100%;max-width:500px;height:100dvh;display:flex}#stories .story .storyInfo{align-items:center;padding:10px 0;display:flex;position:relative}#stories .story .storyInfo #info .username{color:var(--color-text);font-weight:1000;text-decoration:none}#stories .story .storyInfo #storyProfile{background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#f0c,#33f) border-box;border:2px solid #0000;border-radius:50%;width:30px;height:30px;margin:0 5px;padding:2px}#stories .story .storyInfo #storyProfile img{border-radius:50%;width:100%;height:100%}#stories .story .storyInfo .followButton{color:#0004ff;cursor:pointer;border:1px solid;border-radius:10px;padding:5px 10px;font-weight:1000;position:absolute;right:30px}#stories .story #story{background:var(--color-bg);flex-direction:column;justify-content:center;min-height:80%;display:flex;position:relative}#stories .story #story img{width:100%;max-height:70vh}#stories .story #story .totalStoryIndicator{background:var(--color-text);color:var(--color-bg);border-radius:10px;padding:2px 5px;font-size:70%;position:absolute;top:5px;right:5px}#stories .story .storyReactions{justify-content:center;align-items:center;margin-bottom:10px;padding:5px 0;display:flex}#stories .story .storyReactions i{margin-top:20px;font-size:160%;display:flex}#stories .storyPopup{background:var(--color-white);border:1px solid var(--color-text-primary);border-radius:30px 30px 0 0;width:100%;max-width:500px;height:80%;position:absolute;bottom:0}#stories .commentsContainer{flex-direction:column;align-items:center;display:flex}#stories .commentsContainer h3{margin-top:10px}#stories .commentsContainer .cancel-popup{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);cursor:pointer;border:1px solid;border-radius:50%;padding:6px 8px;position:absolute;top:-170px}#stories .commentsContainer .commentInput{background:var(--color-bg);border-radius:10px;justify-content:center;width:90%;margin-top:20px;padding:5px;display:flex}#stories .commentsContainer .commentInput input{border-style:none;border-radius:5px;outline:none;width:75%;height:30px;padding-left:10px}#stories .commentsContainer .commentInput .shareComment{background:var(--color-secondary);color:var(--color-bg);cursor:pointer;border-radius:5px;padding:5px 5%}#stories .commentsContainer .comments{background:var(--color-bg);border-radius:10px;width:90%;height:80%;margin:20px}.commentInput{background:var(--color-bg);border-radius:10px;justify-content:center;width:85%;margin-top:20px;padding:5px;display:flex}.commentInput input{border-style:none;border-radius:5px;outline:none;width:75%;height:30px;padding-left:10px}.commentInput .shareComment{background:var(--color-secondary);color:var(--color-bg);cursor:pointer;border-radius:5px;padding:5px 5%}#postPage{flex-direction:column;justify-content:center;align-items:center;display:flex}#postPage .post{background:var(--color-white);flex-direction:column;justify-content:space-between;align-items:center;width:100%;max-width:500px;height:100dvh;margin:2px 0;display:flex}#postPage .post .postInfo{align-items:center;width:100%;padding:10px 0;display:flex;position:relative}#postPage .post .postInfo #info .username{color:var(--color-text);font-weight:1000;text-decoration:none}#postPage .post .postInfo .followButton{color:#0004ff;cursor:pointer;border:1px solid;border-radius:10px;padding:5px 10px;font-weight:1000;position:absolute;right:30px}#postPage .post .postInfo #postProfile{background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#f0c,#33f) border-box;border:2px solid #0000;border-radius:50%;width:30px;height:30px;margin:0 5px;padding:2px}#postPage .post .postInfo #postProfile img{border-radius:50%;width:100%;height:100%}#postPage .post #post{background:var(--color-bg);flex-direction:column;justify-content:center;width:100%;height:85%;display:flex;position:relative}#postPage .post #post img{width:100%;max-height:95%}#postPage .post #post .totalPostIndicator{background:var(--color-text);color:var(--color-bg);border-radius:10px;padding:2px 5px;font-size:70%;position:absolute;top:5px;right:5px}#postPage .post .postReactions{justify-content:space-around;width:100%;padding:2px 0;display:flex}#postPage .post .postReactions div{cursor:pointer;border:1px solid #0000;border-radius:50px;justify-content:center;align-items:center;padding:8px 10px;transition:all 1s;display:flex}#postPage .post .postReactions div:hover{background:var(--color-bg);border:1px solid;border-radius:50px;padding:8px 10px}#postPage .aboutPost{background:var(--color-white);border-radius:5px;flex-direction:column;width:85%;max-width:460px;margin-bottom:10px;padding:20px;display:flex}#postPage .aboutPost .hashtags{flex-wrap:wrap;display:flex}#postPage .aboutPost .hashtags p{color:#2262da;margin-right:5px;font-weight:1000;display:flex}#postPage .aboutPost .more-aboutPost{color:gray}#postPage .postPopup{background:var(--color-white);border:1px solid var(--color-text-primary);border-radius:30px 30px 0 0;width:100%;max-width:500px;height:80%;position:fixed;bottom:0}#postPage .commentsContainer{flex-direction:column;align-items:center;display:flex}#postPage .commentsContainer h3{margin-top:10px}#postPage .commentsContainer .cancel-popup{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);cursor:pointer;color:var(--color-text-primary);border:1px solid;border-radius:50%;padding:6px 8px;position:absolute;top:-170px}#postPage .commentsContainer .commentInput{background:var(--color-bg);border-radius:10px;justify-content:center;width:90%;margin-top:20px;padding:5px;display:flex}#postPage .commentsContainer .commentInput input{border-style:none;border-radius:5px;outline:none;width:75%;height:30px;padding-left:10px}#postPage .commentsContainer .commentInput .shareComment{background:var(--color-secondary);color:var(--color-bg);cursor:pointer;border-radius:5px;padding:5px 5%}#postPage .commentsContainer .comments{background:var(--color-bg);border-radius:10px;flex-direction:column;align-items:center;width:90%;height:80%;margin:20px;display:flex;overflow-y:auto}#postPage .commentsContainer .comments #comment-container{background:var(--color-white);align-items:space-between;border-radius:10px;flex-direction:column;width:95%;margin:1px 0;padding:5px;display:flex}#postPage .commentsContainer .comments #comment-container .comment_profile{align-items:center;width:100%;display:flex;position:relative}#postPage .commentsContainer .comments #comment-container .comment_profile .comment-reaction{color:var(--color-grey);position:absolute;right:0}#postPage .commentsContainer .comments #comment-container .comment_profile .comment-reaction i{font-size:80%}#postPage .commentsContainer .comments #comment-container .comment_profile img{background:var(--color-bg);border-radius:50%;width:35px;height:35px}#postPage .commentsContainer .comments #comment-container .comment_profile div p{color:var(--color-grey)}#postPage .commentsContainer .comments #comment-container #comment{display:flex}#postPage .commentsContainer .comments #comment-container #comment .comment_reply{color:var(--color-text-primary);cursor:pointer}#postPage .commentsContainer .comments #comment-container #comment .comment_text{max-width:80%;color:var(--color-text-primary);text-wrap:nowrap;text-overflow:ellipsis;padding-right:10px;overflow:hidden}