/* This stylesheet is for isolated styling of elements from Stylelab wireframes */

@import url("https://use.typekit.net/ohf5vvw.css");
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --main-hex: #0051FF;
    --main-hex-a: #0b47b6;
    --main-hex-hover: #0b47b6;
    --main-hex-light: #2C6FFF;

    --neutral: #171717;

    --background-hex: #070707;

    --text-color: white;
    --error-text-color: #cbcbcb;

    /* Half-transparent BG */
    --transparent-BG: rgba(0, 0, 0, 0.85);

    /* Feed's Padding */
    --feed-top-padding: 3rem;

    /* Font Style */
    --cal-sans: "Cal Sans", sans-serif;
    --motiva-sans: "motiva-sans", sans-serif;
    --dm-sans: "DM Sans", san-serif;

    /* DNA Strand root */
    --rotate-time: 4s;
    --rotate-delay: 0.15s;
    --lines-color: rgb(255, 255, 255, 0.5);
    --dots-color: white;

    /* Error DNA Variables */
    --lines-color: rgba(255, 255, 255, 0.5);
    --dots-color: white;

    /* Error DNA variables */
    --error-lines-color: rgba(255, 255, 255, 0.3);
    --error-dots-color: #6a6a6a;

    /* Alpha codes here: https://codepen.io/chriscoyier/pen/XjbzrW */

    --accent-hex: #00B2CA;

    --panel-hex: #E3E3E3;
    --border-hex: #000000;

    --text-light-hex: #FFFEFB;
    --text-light-hex-hover: #cbcaca;

    --text-dark-hex: #1B1B1B;
    --text-dark-hex-hover: #1b1b1b;

    --success-hex: #6ED909;
    --error-hex: #e54335;

    --border-radius-input: 0px;
    --border-radius-panel: 0px;

    --transition-time: .5s;
}

h1 {
    font-size: 10rem;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.material-symbols-rounded[class*="md-"] {
    display: inline-block;
}

.material-symbols-rounded.md-36 {
    font-size: 2.25rem !important;
}

#landing-wrapper {
    min-height: 100vh;
    background-image: url("../img/temporarybg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;

}

.login-page #landing-wrapper,
.register-page #landing-wrapper {
    overflow-y: scroll;
}

/* Header landing Styling */
.landing-header {
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem 0 2rem;
}

.main-logo {
    width: 20rem;
    height: auto;
    position: relative;
    z-index: 30;
}

.hamburger-icon {
    width: 3rem;
    height: auto;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Wrapper for layout and border */
.hamburger-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
}

/* hover animation */
.hamburger-wrapper:hover .material-symbols-rounded {
    transform: scale(1.1);
}

/* VERTICAL Navbar */

.navbar {
    display: flex;
    position: fixed;
    flex-direction: row;
    background: var(--transparent-BG);
    backdrop-filter: blur(3px);
    width: 5.3rem;
    height: 100vh;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 99;
    transition: width 0.3s ease;
}

.navbar:hover {
    width: 17.5rem;
}

.navbar.expanded {
    width: calc(17.5rem + 30rem);
}

.nav-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem 0;
    padding-bottom: 2rem;
    flex-shrink: 0;
    width: 17.5rem;
}

.search-sidebar-content {
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.navbar.expanded .search-sidebar-content {
    width: 25rem;
    opacity: 1;
    padding: 2rem 1rem;
    border: 1px solid white;
    margin: 2rem auto;
    border-radius: 3rem
}

.search-sidebar-content #search_box {
    display: flex;
    margin: 0 auto 1.5rem auto;
}

.search-sidebar-content #search_box input[type="search"] {
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

#searchResults {
    margin-top: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    width: 100%;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s ease;
    width: 100% !important;
    border-radius: 1rem !important;
    box-sizing: border-box;
}

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.search-result-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
}

.search-result-username {
    font-size: 1.15rem;
}

.search-loading,
.search-no-results,
.search-error {
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-color);
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
}

.nav-logo {
    display: block;
    width: 18.75rem;
    margin-left: 1rem;
}

.navlink-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* border: 1px solid red; */
}

.navbar .nav-link {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1rem;
    padding-left: 1.3rem;
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-family: var(--dm-sans);
    font-weight: 500;
    letter-spacing: .15rem;
    white-space: nowrap;
    transition: all 0.17s ease-in;
    border-radius: 0;
}

.nav-search {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-family: var(--dm-sans);
    font-weight: 500;
    letter-spacing: .15rem;
    white-space: nowrap;
    transition: all 0.3s ease-in;
    border-radius: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.navbar .nav-link:hover {
    background-color: var(--neutral);
    letter-spacing: .32rem;
}

.nav-link:focus {
    font-weight: 900;
    color: var(--main-hex-a);
}

.navlink-container a span+span,
.navbar>a span+span {
    display: none;
   /* hides the text first */
}

.navbar:hover a span+span {
    display: inline;
}

/* Main Landing Styling */
.landing-main {
    flex: 1;
    height: 90vh;
    display: flex;
    align-items: flex-start;
    padding-left: 10rem;
    justify-content: center;
    flex-direction: column;
}

.landing-maintext {
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text-light-hex);
    max-width: 50vw;
    margin: 0;
    line-height: 9rem;
    transform: translateY(-4rem);
}

.cta-btn-group {
    display: flex;
    gap: 2rem;
}

#go-back {
    text-decoration: none;
    border-radius: 3rem;
    font-family: var(--motiva-sans);
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    padding: 1rem 3rem;
    color: var(--text-light-hex);
    background-color: var(--main-hex);
    transition: all 0.3s ease-in-out;
    margin: 0 auto;
    /* Align center */
}

a:not(.change-password-btn) {
    text-decoration: none;
    border-radius: 3rem;
    font-family: var(--motiva-sans);
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;

}

a.login-btn {
    padding: 1rem 4rem;
    color: var(--text-dark-hex);
    background-color: var(--text-light-hex);
    transition: all 0.3s ease;
}

a.signup-btn {
    padding: 1rem 3rem;
    color: var(--text-light-hex);
    background-color: var(--main-hex);
    transition: all 0.3s ease-in-out;
}

a.signup-btn:hover {
    background-color: var(--main-hex-hover);
    transform: scale(1.07);
}

a.login-btn:hover {
    background-color: var(--text-light-hex-hover);
    transform: scale(1.07);
}

.main-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    padding-right: 0;
}

.landing-aside {
    position: relative;
}

.landing-aside #dna-strand {
    width: 93.75rem;
    height: 15rem;
    position: absolute;
    transform-origin: bottom;
    position: absolute;
    top: 50%;
    margin-top: -7.5rem;
    margin-left: -53.125rem;
    perspective: 62.5rem;
    transform: rotate(-50deg);
}

/* Dropdown styling */
.dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    color: var(--text-light-hex);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.3s ease;
    opacity: 0;
    z-index: 10;
    padding-bottom: 2rem;
}

.dropdown-menu.open {
    max-height: 31rem;
    opacity: 1;
}

.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 8rem 2rem 2rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu a {
    color: var(--text-light-hex);
    text-decoration: none;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    transition: color 0.2s ease;
    text-transform: none;
}

.dropdown-menu a:hover {
    color: var(--text-light-hex-hover);
}

.close-btn {
    position: absolute;
    top: 0;
    right: 4rem;
    background: none;
    border: none;
    color: var(--text-light-hex);
    font-size: 5rem;
    font-weight: 100;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.close-btn:hover {
    transform: scale(1.1);
    color: var(--text-light-hex-hover);
}

.landing-dropdown-seperator {
    width: 90%;
    height: 0.1rem;
    color: white;
    display: flex;
    justify-content: center;
    background-color: var(--text-light-hex);
    margin: 2.25rem auto;
}

.landing-dropdown-icons {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 10px;
    margin: 2.25rem 6rem 4rem auto;
}

.like-icon {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease-in-out;
}

.like-icon:hover {
    transform: scale(1.1);
}

.like-icon.liked,
.repost-icon:hover,
.comment-icon:hover {
    color: var(--main-hex);
    transform: scale(1.1);
}

.comment-icon,
.repost-icon {
    color: var(--text-color);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
}


.dd-icon {
    min-width: 3rem;
    height: 3rem;
    transition: all 0.3s ease-in-out;
}

.dd-icon:hover {
    transform: scale(1.07);
}

/* Container for Feed and 404 */

.feed-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 100vh;
    background-color: var(--background-hex);
    background-image: linear-gradient(var(--neutral) 3px, transparent 3px), linear-gradient(to right, var(--neutral) 3px, var(--background-hex) 3px);
    background-size: 4rem 4rem;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
    overflow: hidden;
    /* overflow: auto; */
}

/* Switch For You / Following Button */

.feed-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 19rem;
    padding: 0.8rem;
    background: rgba(86, 86, 86, 0.3);
    border-radius: 3.738rem;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--motiva-sans);
    font-size: 1.2rem;
    top: 0;
}

#errorSwitch {
    filter: saturate(0);
    cursor: pointer;
    pointer-events: none;
}

.active-slider {
    position: absolute;
    width: calc(50% - 0.8rem);
    height: calc(90% - 0.8rem);
    border-radius: 2.5rem;
    background: var(--main-hex);
    transition: ease-in 0.3s;
    z-index: 1;
}

.feed-option {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    z-index: 2;
    color: var(--error-text-color);
    font-weight: 500;
    transition: color 0.3s;
}

.feed-option.active {
    color: var(--text-color);
    font-weight: 900;
}

/* Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scrollbars_styling */

.feed-content {
    display: flex;
    width: 100%;
    height: 100vh;
    margin-top: 1.9rem;
    margin-left: 11.5rem !important;
    padding-bottom: 5rem;
    font-size: 18px;
    color: var(--text-color);
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    gap: 8rem;
    cursor: grabbing;
    scroll-behavior: smooth;
    /* Firefox scrollbar */
    scrollbar-width: 50px !important;
    scrollbar-color: var(--main-hex) rgba(0, 0, 0, 0.3);
    /* border: 1px solid green; */
    /* ^ Test Area Border */
}

/* Scrollbar Customization Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar*/

/* Chrome/Safari/Edge scrollbar */
.feed-content::-webkit-scrollbar {
    display: block !important;
    height: 30px !important;
    width: 30px !important;
}

.feed-content::-webkit-scrollbar-thumb {
    background: var(--main-hex) !important;
    border-radius: 6px !important;
}

.feed-content::-webkit-scrollbar-thumb:hover {
    background: var(--main-hex-hover) !important;
}

.feed-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
}


/* Feed Content Container */

.content-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-self: flex-end;
    position: relative;
    width: 95%;
    /* 95% of .feed-container */
    height: 100vh;
    padding-top: var(--feed-top-padding);
    right: 0 !important;
    /* border: 1px solid red; */
    overflow-y: hidden !important;
    overflow-x: hidden;
}

/* ------------------------- Top Notification Group ------------------------- */

.notification-gr {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-self: flex-end;
    justify-content: end;
    align-items: center;
    position: absolute;
    gap: 1.5rem;
    top: var(--feed-top-padding);
    right: 3rem;
    text-align: right;
    transition: ease 0.3s;
    z-index: 100;
    /* border: 1px solid red; */
}

.notification-gr a {
    /* background: rgba(255, 255, 255, 0.125); */
    color: var(--text-color);
    border-radius: 50%;
    padding: 1rem;
    cursor: pointer;
    transition: ease 0.3s;
}

.notification-gr a:hover {
    transform: scale(1.2);
}


.message {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.dot-cover {
    position: absolute;
    background-color: var(--background-hex);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    content: '';
}

/* Logout utton */

.logout-btn {
    padding: 1rem 1.5rem;
    color: var(--text-light-hex);
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease-in-out;

    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1rem;

    border: none;
    border-radius: 2rem;

    cursor: pointer;
}

.logout-btn:hover {
    background-color: var(--main-hex-hover);
    color: var(--text-color) !important;
}

.logout-btn:focus {
    background-color: var(--main-hex);
}

/* Bottom Create button */

.circle-create {
    display: flex;
    align-self: flex-end;
    position: fixed;
    bottom: 2.5rem;
    right: 3rem;
    border-radius: 50%;
    background-color: var(--transparent-BG);
    border: 2px solid var(--main-hex);
    padding: 1rem;
    transition: ease-in 0.3s;
    z-index: 100;
    cursor: pointer;
}

.circle-create:hover {
    background-color: var(--main-hex);
    transform: scale(1.1);
}

.circle-create a {
    color: var(--text-color);
    background: transparent !important;
}

.circle-create a:focus {
    color: var(--text-color);
}

.material-symbols-rounded.md-48 {
    font-size: 48px;
}

/* ------------------------------- EMPTY PAGE ------------------------------- */

.empty-text {
    font-family: var(--dm-sans);
    font-weight: 600;
    font-size: 4rem;
    margin: 0 auto;
    margin-top: 10%;
    color: var(--error-dots-color);
}

/* Empty div for profile.php */

.empty-col {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 210% !important;
    height: 100%;

    padding: 3rem;
    /* border: 1px solid red; */
}

.empty-p {
    font-family: var(--dm-sans);
    font-weight: 500;
    font-size: 1.5rem;
    margin: 0 auto;
    color: var(--error-dots-color);
}

/* --------------------------- 404 PAGE --------------------------- */

.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    margin-top: 8rem;
    position: relative;
    z-index: 2;
    font-family: var(--dm-sans);

    a {
        margin: auto;
    }
}

.pagenotfound p {
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: white;
    margin-top: -6rem;
    letter-spacing: 1rem;
    font-weight: 800;
}

.error-title {
   /* 404 title */
    background: linear-gradient(294deg, #BDBDBD 23.86%, #777 28.39%, rgba(27, 27, 27, 0.37) 48.62%, rgba(69, 69, 69, 0.66) 55.63%, #777 64.1%, #BDBDBD 73.38%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Font Style */
    font-size: 23rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    /* letter-spacing: 15rem; */
}


/* ----------------------------- DNA Strand CSS ----------------------------- */

/* source: https://codepen.io/ysosu/pen/vYLvaqX */

/* Main DNA strand */

#dna-strand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 240px;
    margin-top: -120px;
    margin-left: -400px;
    perspective: 1000px;
    transform: rotate(-50deg);
}

/* Base line style */
#dna-strand div {
    position: relative;
    top: 50%;
    left: 60px;
    width: 2px;
    height: 160px;
    margin-top: -80px;
    margin-left: 20px;
    float: left;
    background-color: var(--lines-color);
    transform-style: preserve-3d;
    animation: rotation var(--rotate-time) linear infinite;
    z-index: -3;
}

/* Dots (top and bottom) */
#dna-strand div::before,
#dna-strand div::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    height: 10px;
    background-color: var(--dots-color);
    border-radius: 5px;
    animation: rotation var(--rotate-time) linear infinite reverse;
    z-index: 1;
}

#dna-strand div::before {
    top: -10px;
}

#dna-strand div::after {
    bottom: -10px;
}

/* Vanilla CSS for 30 loops */

#dna-strand div,
#dna-strand div::before,
#dna-strand div::after {
    animation-delay: calc(var(--i) * var(--rotate-delay) * -1);
    /* * -1 keeps the animation run when the site is on load */
}

/* DNA on 404 Page */

#error-dna {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 240px;
    margin-top: -120px;
    margin-left: -400px;
    perspective: 1000px;
    transform: rotate(-50deg);
}

/* Base line style */
#dna-strand div {
    position: relative;
    top: 50%;
    left: 60px;
    width: 2px;
    height: 160px;
    margin-top: -80px;
    margin-left: 20px;
    float: left;
    background-color: var(--error-lines-color);
    transform-style: preserve-3d;
    animation: rotation var(--rotate-time) linear infinite;
    z-index: -3;
}

/* Dots (top and bottom) */
#dna-strand div::before,
#dna-strand div::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    height: 10px;
    background-color: var(--error-dots-color);
    border-radius: 5px;
    animation: rotation var(--rotate-time) linear infinite reverse;
    z-index: 1;
}

#dna-strand div::before {
    top: -10px;
}

#dna-strand div::after {
    bottom: -10px;
}

/* Vanilla CSS for 30 loops */

#dna-strand div,
#dna-strand div::before,
#dna-strand div::after {
    animation-delay: calc(var(--i) * var(--rotate-delay) * -1);
    /* * -1 keeps the animation run when the site is on load */
}

/* DNA on 404 Page */

#error-dna {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 240px;
    margin-top: -120px;
    margin-left: -400px;
    perspective: 1000px;
    transform: rotate(-50deg);
}

/* Base line style */
#dna-strand div {
    position: relative;
    top: 50%;
    left: 60px;
    width: 2px;
    height: 160px;
    margin-top: -80px;
    margin-left: 20px;
    float: left;
    background-color: var(--error-lines-color);
    transform-style: preserve-3d;
    animation: rotation var(--rotate-time) linear infinite;
    z-index: -3;
}

/* Dots (top and bottom) */
#dna-strand div::before,
#dna-strand div::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    height: 10px;
    background-color: var(--error-dots-color);
    border-radius: 5px;
    animation: rotation var(--rotate-time) linear infinite reverse;
    z-index: 1;
}

#dna-strand div::before {
    top: -10px;
}

#dna-strand div::after {
    bottom: -10px;
}

/* Vanilla CSS for 30 loops */

#dna-strand div,
#dna-strand div::before,
#dna-strand div::after {
    animation-delay: calc(var(--i) * var(--rotate-delay) * -1);
    /* * -1 keeps the animation run when the site is on load */
}

/* DNA on 404 Page */

#error-dna {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 50rem;
    height: 15rem;
    margin-top: -3.5rem;
    margin-left: -25rem;
    perspective: 62.5rem;
    transform: rotate(-50deg);
}

/* Base line style */
#error-dna div,
#dna-strand div {
    position: relative;
    top: 50%;
    left: 3.75rem;
    width: 0.125rem;
    height: 10rem;
    margin-top: -5rem;
    margin-left: 1.25rem;
    float: left;
    background-color: var(--error-lines-color);
    transform-style: preserve-3d;
    animation: rotation var(--rotate-time) linear infinite;
    z-index: -3;
}

/* Lines Color */

#dna-strand div {
    background-color: var(--lines-color);
}

#error-dna div {
    background-color: var(--error-lines-color);
}


/* Dots (top and bottom) */
#dna-strand div::before,
#dna-strand div::after,
#error-dna div::before,
#error-dna div::after {
    content: "";
    position: absolute;
    left: -0.25rem;
    right: -0.25rem;
    height: 0.625rem;
    border-radius: 0.313rem;
    left: -4px;
    right: -4px;
    height: 10px;
    background-color: var(--error-dots-color);
    border-radius: 5px;
    animation: rotation var(--rotate-time) linear infinite reverse;
    z-index: 1;
}

/* Dots Color */

#dna-strand div::before,
#dna-strand div::after {
    background-color: var(--dots-color);
}

#error-dna div::before,
#error-dna div::after {
    background-color: var(--error-dots-color);
}

/* Pseudo Elements Position */

#error-dna div::before,
#dna-strand div::before {
    top: -0.625rem;
}

#error-dna div::after,
#dna-strand div::after {
    bottom: -0.625rem;
}

/* Vanilla CSS for 30 loops */

#dna-strand div,
#dna-strand div::before,
#dna-strand div::after,
#error-dna div,
#error-dna div::before,
#error-dna div::after {
    animation-delay: calc(var(--i) * var(--rotate-delay) * -1);
    /* * -1 keeps the animation run when the site is on load */
}

@keyframes rotation {
    from {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateX(359deg);
    }
}

/* --------------------------------- NEW CSS -------------------------------- */

* {
    box-sizing: border-box;
}

html {
    --sliderTransX: 0px;
}

/* ------------------------------ FEED WRAPPER (Includes tagbar and feed tab) ------------------------------ */

.feed-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-self: flex-end;
    overflow: hidden;
    left: 0;
    /* margin-right: 2rem; */
    /* border: 1px solid pink; */
}


/* -------------------------- TAG HORIZONTAL SCROLL ------------------------- */

.tagbar {
    display: flex;
    align-items: center;
    align-self: flex-end;
    position: relative;
    width: 100%;
    max-width: calc(100vw - 20rem);
    height: fit-content;
    margin: 3.75rem 3rem 0 5rem;
    padding: 0 0 1.5rem 0;
    overflow: hidden;
    z-index: 10;
    cursor: grab;
    user-select: none;
    touch-action: pan-x;
    box-sizing: border-box;
    margin-left: 5rem;
    /* border: 1px solid orange; */
}

.tagbar:active {
    cursor: grabbing;
}

.tag-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5rem;
    width: max-content;
    height: fit-content;
    padding: 0 5rem 0 .5rem;
    transition: transform 0.3s ease;
    /* transform: translateX(5rem); */
    /* border: 1px solid green; */
}

/* DNNA TAGS */
.dnatag {
    background: transparent;
    font-size: 1.25rem;
    font-family: var(--motiva-sans);
    font-weight: 400;
    color: var(--error-text-color);
    text-transform: uppercase;
    letter-spacing: .015rem;
    transition: 0.3s ease-in;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    padding-bottom: .5rem;
    border-bottom: 2px solid transparent;
}

.dnatag.active {
    color: var(--text-color);
    font-weight: 800 !important;
    border-bottom: 2px solid var(--main-hex);
}

.dnatag:hover {
    color: var(--main-hex);
    border-bottom: 2px solid var(--main-hex);
}

.dnatag:focus {
    color: var(--text-color);
    font-weight: 800 !important;
    border-bottom: 2px solid var(--main-hex);
}

.dnatag:active,
.profile-tab:active {
    color: var(--main-hex);
}

.dnatag:not(:first-child)::before {
    content: '#';
    width: 100%;
    height: auto;
}

.tagbar-nav {
    position: absolute;
    top: 35%;
    /* aligns it to top edge of the .tagbar div */
    transform: translateY(-50%);
    background: var(--background-hex);
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    transition: all 0.3s ease;
    opacity: 1;
}

.tagbar-nav:hover {
    display: flex !important;
    opacity: 1 !important;
    background: var(--main-hex);
    /* transform: translateY(-50%) scale(1.1); */
}

.tagbar-nav.prev {
    left: 0rem;
}

.tagbar-nav.next {
    right: 0rem;
}

.tagbar-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.tagbar-nav:disabled:hover {
    background: var(--background-hex);
    transform: translateY(-50%);
}

.hide {
    display: none !important;
}

.tagbar::before,
.tagbar::after {
    content: '';
    position: absolute;
    top: 0;
    /* bottom: 0; */
    width: 50px;
    height: 50px;
    z-index: 55;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tagbar::before {
    left: 0;
    background: linear-gradient(to right, var(--background-hex), transparent);
}

.tagbar::after {
    right: 0;
    background: linear-gradient(to left, var(--background-hex), transparent);
}

/* Show Gradients */
.tagbar:has(.tagbar-nav.prev:not(.hide))::before {
    opacity: 1;
}

.tagbar:has(.tagbar-nav.next:not(.hide))::after {
    opacity: 1;
}

input.post {
    border-radius: 20rem;
}

/* ---------------------------- FEED'S POST STYLE --------------------------- */

/* Tab Slider Styling */

.tab-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* gap: 3rem; */
    width: 100%;
    padding: 0.8rem 0;
    background: transparent;
    flex-shrink: 0;

    overflow: hidden;
    cursor: pointer;

    text-transform: uppercase;
    font-family: var(--motiva-sans);
    font-size: 1.2rem;

    transition: 0.3s ease-in !important;
    /* border: 1px solid orange; */
}

.tab-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    gap: 1.5rem;
    padding: 10px 0;
    z-index: 2;
    color: var(--error-text-color) !important;
    font-weight: 500;
    transition: color 0.3s;
    /* border: 1px solid green; */
}

.tab-option.active {
    color: var(--text-color) !important;
    border-bottom: 2px solid var(--main-hex);
    font-weight: 900;
}

.tab-option .material-symbols-rounded {
    font-variation-settings:
        'wght' 500 !important
}

.tab-option svg {
    width: 2rem;
    fill: var(--error-text-color);
}

.tab-option.active svg {
    width: 2rem;
    fill: var(--text-color) !important;
}

.tab-content {
    width: 100%;
    /* 100% of .post-column */
    min-height: 100vh;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* horizontal style feed */

/* Feed Content Container */

.profile-container {
    /* includes both columns */
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    gap: 6rem;
    /* margin-left: 5.25rem; */
    /* border: 1px solid purple; */
}

.profile-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 95%;
    height: 100vh;
    padding: var(--feed-top-padding) 3rem 0 13rem;
}

.profile-wrapper-extras {
    align-self: flex-end;
}

.profile-column:not(#edit-avatar) {
    display: flex;
    flex-direction: column;
    width: 40%;
    position: sticky;
    margin-bottom: -5rem;
    /* border: 1px solid darkblue; */
}

/* Profile Section */

.user-display {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    font-family: var(--dm-sans);
}

.user-display img {
    width: 100%;
    object-fit: cover;
}

.name {
    text-align: center;
    line-height: 1.5rem;
}

.name h2 {
    font-size: 1.875rem;
    color: var(--text-color);
}

.name h3 {
    font-size: 1.15rem;
    color: var(--error-text-color);
    font-weight: 500;
}

.avatar {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background-color: var(--error-dots-color);
    /* temporary visibility */
    object-fit: cover;
}

.avatar img {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    object-fit: cover;
}

.profile_username {
    display: flex;
    gap: .5rem;

    font-family: var(--dm-sans);
    font-size: 1rem;
    font-weight: 500;

    margin-top: 1rem;
}

.profile_username h2 {
    color: var(--text-color) !important;
}

.profile-bio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: 1rem;
    width: 100%;
    height: 130px;
    padding: .5rem 0 0 0;
    margin-top: .5rem;
    margin-bottom: 1.75rem;


    color: var(--text-color);
    /* border: 1px solid gold; */
}

.profile-bio p {
    width: 100%;
    height: fit-content;
    margin: 0;

    font-family: var(--dm-sans);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .05rem;
    line-height: 1.5rem;

    /* border: 1px solid red; */

}

p .bio {
    height: 130px !important;

}


.follow_button,
.edit_profile_btn {
    display: block !important;
    background-color: var(--tag-default) !important;
    border: 0px;
    color: var(--text-color) !important;
    font-weight: bold;
    padding: .75rem 1rem;
    font-size: 1.1rem;
    background-size: contain;
    background-position: 5px center;
    background-repeat: no-repeat;
    display: block;
    margin: 10px auto;
    border-radius: 2rem;
    text-transform: uppercase;
    cursor: pointer;
}

.follow_button.follow_user {
    background-image: url("../img/follow_btn/follow.svg");
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: 16px center;
    padding-left: 4rem;
}

.follow_button.following_user {
    background-image: url("../img/follow_btn/followed.svg");
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: 16px center;
    padding-left: 4rem;
}

.edit_profile_btn.create_post_btn {
    display: inline-flex !important;
    background-color: var(--transparent-BG) !important;
    width: fit-content !important;
    height: fit-content !important;
    padding: 0.25rem !important;
    border-radius: 50% !important;
}

.edit_profile_btn:not(.create_post_btn) {
    background-image: url("../img/edit.svg");
    background-size: 16%;
    background-repeat: no-repeat;
    background-position: 16px center;
    padding-left: 3.5rem;
}

.follow_button:hover,
.edit_profile_btn:hover,
.save-btn:hover {
    background-color: var(--main-hex) !important;
    color: var(--text-color) !important;
    text-decoration: none;
}

.follow_button span::before {
    content: "";
}

/* viewer profile display instead of profile owner */

.edit_profile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;

    width: 100%;
    height: fit-content;

    margin: 1rem 0;
}

.edit_profile_btn {
    margin: 0 auto;
    border: 2px solid inherit;
}

.modal-comment-form .comment-send-btn {
    color: white;
    background-color: var(--transparent-BG);
    border: 2px solid var(--main-hex) !important;
    font-weight: bold;
    padding: .75rem 2rem;
    font-size: 1rem;
    border-radius: 3rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-left: auto;
}

.cmt-delete {
    color:white;
    margin-left: auto;
    margin-right: 2rem;
    display: flex;
    align-items: flex-start !important;
}

#commentInput {
    width: 100%;
    border-radius: 20px !important;
}


.edit_profile_btn.create_post_btn,
.comment-send-btn {
    background-color: var(--transparent-BG);
    border: 2px solid var(--main-hex) !important;
}

.edit_profile_btn.create_post_btn:hover,
.comment-send-btn:hover {
    background: var(--main-hex) !important
}

.edit-profile-header {
    font-family: var(--cal-sans);
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: .25rem;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 2rem;
}


.edit-profile-form form {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: fit-content;
    min-height: 100vh;
    /* border: 2px solid orange; */
}


.profile-column#edit-avatar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-self: flex-start !important;
    padding-top: 1rem;
    gap: 1rem;

    width: 25%;

    /* border: 1px solid var(--error-dots-color); */
}

.avatar-circle {
    display: flex;
    width: 14rem;
    height: 14rem;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    border: 3px solid var(--main-hex);
}

.profile-column#edit-avatar img {
    width: 15rem;
    min-width: 15rem;
    height: 15rem;
    flex-shrink: 0 !important;

    display: block;
    object-fit: cover;
    border-radius: 0%;

    transition: all 0.3s ease-in;
}

#edit-avatar label {
    font-size: 2.5rem !important;
    text-align: center;
    align-self: center;
}

.edit-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    width: 35%;
    /* border: 1px solid purple; */
}

.edit-info input[type="text"],
.edit-info input[type="email"],
.edit-info input[type="file"],
.edit-info input[type="textarea"],
#edit-password input:not([type="submit"]) {
    padding: .75rem 1rem;
    font-size: 1rem;
    border-radius: 2rem;
    font-family: var(--dm-sans);
    color: white !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
    -webkit-text-fill-color: white !important;


    outline: none !important;
}

#edit-password input {
    margin: 0 auto;
    width: 55%;
}

.edit-info input[type="file"] {
    border-radius: 3rem !important;
}

.custom-file-upload {
    display: inline-block;
    padding: .75rem 1rem;
    font-size: 1rem;
    border-radius: 2rem;
    font-family: var(--dm-sans);
    color: white;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-file-upload:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}


.edit-info input[type="file"]::file-selector-button {
    padding: .75rem 1.5rem;
    font-size: 1rem;
    border-radius: 2rem;
    font-family: var(--dm-sans);
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);

    border: none;
    cursor: pointer;
    margin-right: 1rem;
    transition: all 0.3s ease;
}

.edit-info input[type="file"]::file-selector-button:hover {
    background-color: var(--main-hex);
}

.form-action-btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.75rem;

    margin-top: 2.5rem;
}

input.save-btn {
    display: block !important;
    background-color: var(--tag-default) !important;
    border: 0px;
    color: var(--text-color) !important;
    font-weight: bold;
    padding: .75rem 1.5rem;
    font-size: 1.75rem;
    border-radius: 2rem;

    transition: all 0.3s ease-in;

    cursor: pointer;
    outline: none;
    border: none;
}

.edit-info .change-password-btn {
    color: var(--main-hex);
    font-family: var(--dm-sans);
    font-weight: 500 !important;
    font-size: 1.15rem !important;
    letter-spacing: .05rem;
    text-decoration: none;
    text-transform: capitalize !important;
    transition: all 0.3s ease-in;
}

/* Password Page */

h2.password-title {
    margin: 0 auto !important;
    padding-bottom: 0 !important;

    font-family: var(--cal-sans) !important;
    font-size: 3rem !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    text-align: center !important;

    margin-bottom: 2rem !important;
}

#password-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--text-color);
    overflow: auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
}

#password-page {
    display: block;
    color: var(--text-color);
}

#password-modal .modal-content {
    position: relative;
    background-color: var(--background-hex);
    margin: 5% auto;
    border-radius: 3rem;
    width: 50%;
    max-height: 90vh;
    padding: 4rem 3rem 3rem 3rem;
    overflow-y: auto;
}

#password {
    display: flex;
    align-items: center;
}

#password-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-password #password-modal-content label {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.login-password form {
    margin-top: 2rem;
}

.modal-content.login-password {
    display: flex;
    justify-content: center;
    align-items: center;
}

.password-login-modal #password-modal .modal-content.login-password {
    position: relative;
    background-color: var(--background-hex);
    margin: 5% auto;
    border-radius: 3rem;
    width: 45%;
    height: fit-content;
    padding: 3rem 0 !important;
    max-height: 90vh;
    padding: 0;
    overflow-y: auto;
    transform: translateY(50%);
}

#edit-password {
    /* display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: center !important; */
    display: grid !important;
    grid-template-columns: 1fr;
    inset: 0;
    gap: 3rem;
    width: 100%;
    min-height: auto;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin: 1.75rem 0 .5rem 0 !important;
    font-family: var(--cal-sans) !important;
    color: var(--text-color);
    letter-spacing: .1rem !important;


    /* padding-left: 10rem; */
    margin: 0 auto;
    /* transform: translateX(30%); */

    /* border: 1px solid red; */
}

#edit-password input {

    margin-top: -2rem;

    outline: none;
}

#edit-password input[type="submit"] {
    display: block;
    margin: 0 auto !important;

    width: fit-content !important;
    background-color: var(--tag-default) !important;
    border: none;

    padding: .75rem 1.5rem;
    margin-top: 1rem;

    color: var(--text-color) !important;
    font-weight: bold;
    font-size: 1.25rem;
    /* text-align: center; */

    border-radius: 2rem;

    transition: all 0.3s ease-in;

    cursor: pointer;
    outline: none;
    border: none;
}

#edit-password input[type="submit"]:hover {
    background-color: var(--main-hex) !important;
}


/* Follower counts */

.followers {
    color: var(--error-text-color);
}

.followers a {
    display: inline-block;

    font-size: inherit;
    font-family: inherit;

    text-transform: none;
    text-decoration: none;
    color: var(--error-text-color);
}

/* Profile DNA wrapper */

.dna-wrapper {
    position: relative;

    width: 100%;
    min-height: 100vh;

    /* border: 3px solid salmon; */
}

.dna-wrapper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out;
}

.dna-wrapper:hover .dna-wrapper-inner {
    transform: rotateY(180deg);
}

.hint {
    position: absolute;
    top: 2rem;
    left: 0 !important;

    font-family: var(--dm-sans);
    text-transform: uppercase;
    color: var(--error-text-color);
    font-size: 1.5rem;

    animation: blink-caret .75s step-end infinite;

    /* border: 1px solid cyan; */
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--text-color);
    }
}

.show-stat {
    position: absolute;
    display: flex;
    float: left;
    width: fit-content;
    height: fit-content;
    padding: .5rem;
    align-self: flex-start;

    background-color: var(--error-text-color);
    font-family: var(--motiva-sans);
    font-weight: 700;
    text-transform: capitalize;
    color: black;
    font-size: .75rem;
    letter-spacing: .1rem;
    text-transform: uppercase;

    /* margin: -1.5rem 0 0rem 0; */
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    z-index: 2;
}

.profile-dna {
    position: relative;
    display: flex;
    /* justify-content: center; */
    align-items: end;

    width: 100%;
    height: 100%;
    margin-top: 1.5rem;

    background: transparent;

    color: var(--text-color);
    cursor: pointer;
    bottom: 0;
    border-radius: .5rem;
    overflow: hidden;
    /* border: 1px solid violet !important; */
}

.profile-dna #dna-strand {
    width: 28rem;
    height: 5rem;
    bottom: 2rem;
    top: 16.75rem !important;
    transform: translateX(45%) rotate(-50deg);
    /* ^ Left 50% */


    /* border: 2px solid cyan; */
}

.profile-dna #dna-strand div {
    height: 10rem;

    inset: 0;
    margin-left: 0.625rem;

    width: 0.15rem;


}

/* Dots' scale */
.profile-dna #dna-strand div::before,
.profile-dna #dna-strand div::after {
    left: -0.125rem;
    right: -0.125rem;
    height: 0.3125rem;
    border-radius: 50%;
}

.profile-dna #dna-strand div::before {
    top: -0.3125rem;
}

.profile-dna #dna-strand div::after {
    bottom: -0.3125rem;
}

/* Numbers */

.dna-stat {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 45vh;
    color: var(--text-color);
    transform: rotateY(180deg);
    margin-top: 1.5rem;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-color: var(--panel-hex) rgba(0, 0, 0, 0.3);
    scrollbar-track-color: transparent;
}


.dna-stat-box {
    position: relative;
    width: 90%;
    height: fit-content;
    /* align-self: flex-end; */

    padding-top: 1.5rem;
    /* border: .75px solid var(--error-text-color); */
    border-radius: .5rem;
}

.profile-dna,
.dna-stat {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    top: 0;
    left: 0;
}

.dna-stat-title {
    display: flex;
    float: right;
    width: fit-content;
    height: fit-content;
    padding: .5rem;
    align-self: flex-end;

    background-color: var(--error-text-color);
    font-family: var(--motiva-sans);
    font-weight: 700;
    text-transform: capitalize;
    color: black;
    font-size: .75rem;
    letter-spacing: .1rem;
    text-transform: uppercase;

    margin: -1.5rem 0 0rem 0;
    border-bottom-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 2;
}

.stat-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;

    padding: 1.5rem 0;

    font-family: var(--dm-sans);
    color: var(--text-color);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    border-bottom: .15px solid transparent;

}

.stat-info:hover {
    border-bottom: .15px solid var(--main-hex);
}

.stat-info p::before {
    content: '#';
    width: 100%;
    height: auto;
}

.count {
    transform: scale(.91);
    letter-spacing: .1rem;
}

/* Post Type column */

.post-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-self: flex-end;
    overflow: hidden;
    /* margin-right: 2rem; */
    /* border: 1px solid pink; */
}

.post-column {
    width: 100% !important;
    min-height: fit-content;
    margin-top: 4.5rem;
}

.post-container {
    display: flex;
    flex-direction: row;
    gap: 10.5rem;
    align-items: flex-start;
    width: max-content;
    min-height: 100vh;
    /* margin-left: 5.5rem; */
    color: var(--text-color);
    overflow-x: visible;
    flex-wrap: nowrap;
    margin-right: 20rem;
}

.post-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: flex-start; */
    width: 100%;
    height: 80vh;
    margin: 1rem 0 0 0;

    color: var(--text-color);
    /* border: 1px solid lime; */
    overflow-y: scroll;
    overflow-x: hidden;
}

.post-col::-webkit-scrollbar {
    width: .5rem;
    display: block;
}

.post-col::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
}

.post-col::-webkit-scrollbar-thumb {
    background-color: var(--main-hex-hover);
    padding: 1rem;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    min-height: fit-content;
    height: auto;
    justify-content: space-between;
    /* border: 1px solid orange; */
    row-gap: 3rem;
    column-gap: 2rem;
    padding-bottom: 5rem;
    padding-top: 1.5rem;
}


/* INIFITY SCROLL */
.loading-indicator {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--error-text-color);
}

.loading-indicator.active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--neutral);
    border-top: 4px solid var(--main-hex);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.scroll-sentinel {
    height: 1px;
    width: 100%;
}

.feed-post-wrapper {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.retry-btn {
    background: var(--main-hex);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.retry-btn:hover {
    background: var(--main-hex-hover);
}

/* ------------------------------ POST STYLING ------------------------------ */

.feed-post-wrapper {
    /* Post styling */
    display: flex;
    flex-direction: row;
    gap: -2.875rem !important;
    position: relative;
    width: fit-content;
    padding: 0;
    /* border: 1px solid red; */
}

.img-post {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: fit-content;
    height: 100%;
}

.img-container {
    position: relative;
    width: fit-content;
}

.delete-post-form {
    position: absolute;
    bottom: 100px;
    right: 130px;
    z-index: 10;
    pointer-events: none;
}

.delete-post-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
    pointer-events: auto;
}

.delete-post-btn:hover {
    background: rgba(130, 51, 51, 0.8);
    opacity: 1;

}

.delete-post-btn .material-symbols-rounded {
    color: white;
    font-size: 24px;
}

.img-post img,
.img-post .attachment,
.feed-post-wrapper img,
.post-container img {
    user-select: none !important;
    -webkit-user-drag: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: auto;
}

.img-placeholder {
    overflow: hidden;
    position: relative;
    width: 22rem;
    height: 31rem;
    border-radius: 1.5rem;
    /* background-color: grey; */
    object-fit: cover !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    /* border: 1px solid red; */


    transition: transform 0.3s ease-in-out;
    /* Temporary BG */
}

.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-in-out;
    border-radius: 1.5rem;
}

.img-placeholder img:hover {
    /* filter: brightness(0.75); */
    transform: scale(1.05);
}


.tag-col {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: fit-content;
    gap: 1rem;
    top: 1rem;
    right: -5rem;
    z-index: 20;
    /* border: 1px solid green; */
}

.dnatag-post {
    width: fit-content;
    min-width: fit-content;
    background-color: var(--text-color);
    padding: .5rem 1rem .5rem 1rem !important;
    border-radius: 1.75rem;
    border: none;
    cursor: pointer;
    transition: 0.2s ease-in;
}

.dnatag-post:hover {
    color: var(--main-hex);
    transform: scale(1.1);
    font-weight: 900 !important;
}

.taglink {
    position: relative;
    text-decoration: none !important;
    font-family: var(--dm-sans);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .025rem;
    font-weight: 600;
    font-size: .8rem !important;
}

.taglink:visited {
    color: inherit;
}

.taglink::before {
    content: "+";
    display: inline-block;
    margin-right: 5px;
    font-size: inherit;
}

.username-wrapper {
    max-width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center !important;
    gap: 1rem;

    /* border: 1px solid green; */

}

.username-wrapper .username {
    color: var(--text-color);
    font-family: var(--dm-sans);
    font-size: 1rem;
    letter-spacing: .05rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.username-wrapper .username a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--dm-sans);
    font-size: 1rem;
    letter-spacing: .05rem;
    font-weight: 500;
    text-transform: lowercase;
}

.pfp-feed {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--main-hex);
    border: none;
    object-fit: cover;
}

.actions-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
    height: fit-content;

    /* border: 1px solid blue; */
}

/* actions */

.reactions-wrapper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.reactions-wrapper .material-symbols-rounded {
    font-weight: 600;
    cursor: pointer;
    font-variation-settings: 'FILL' 0, 'wght' 600;
    color: var(--text-color);
}

.reactions-wrapper .material-symbols-rounded:hover {
    color: var(--main-hex) !important;
}

.reactions-wrapper .material-symbols-rounded:focus {
    transform: scale(1.1) !important;
}

.reactions-wrapper .material-symbols-rounded:active {
    color: var(--main-hex) !important;
}

span {
    transition: all 0.15s ease-in-out;
}

#like_button.like_button,
#modal_like_button.like_button {
    color: var(--text-color);
    font-variation-settings: 'FILL' 0, 'wght' 600 !important;

}

#like_button.liked,
#modal_like_button.liked {
    color: var(--main-hex);
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
}

#repost_button.repost_button {
    color: var(--text-color);
    font-variation-settings: 'FILL' 0, 'wght' 600 !important;
}

#repost_button.reposted {
    color: var(--main-hex);
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
}

#comment_button.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 600 !important;
}


/* -------------------------------------------------------------------------- */
/*                              POST.PHP STYLING                              */
/* -------------------------------------------------------------------------- */

#post-created-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
}

.post-created {
    pointer-events: none;
    cursor: default;
}

.post-created .attachment {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.post-created-text {
    line-height: auto;
    margin-bottom: 1.75rem;
}

.return-explore-btn {
    background-color: var(--main-hex);
    padding: 1rem 2rem;
    color: var(--text-color);
    margin-top: 2.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.return-explore-btn:hover {
    background-color: var(--main-hex);
    padding: 1rem 2rem;
    color: var(--text-color);
    margin-top: 2.5rem;
    transform: scale(1.1);
}

/* -------------------------------------------------------------------------- */
/*                              REGISTER + LOGIN                              */
/* -------------------------------------------------------------------------- */

#register-wrapper h1,
#login-wrapper h1 {
    font-family: "cal sans", sans-serif;
    font-size: 42px;
    font-weight: 300;

}

#register-wrapper a,
#login-wrapper a {
    color: var(--main-hex);
    font-size: 1rem;
    text-transform: none;
    font-family: "Motiva Sans", sans-serif;
    text-decoration: underline !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
}

.btn,
button {
    transition: all 0.3s ease;
}

.btn:hover {
    cursor: pointer;
    background-color: var(--main-hex-hover);
    background-color: #0b47b6;
}

#form button:hover {
    cursor: pointer;
    background-color: var(--main-hex-hover);
    background-color: var(--text-light-hex-hover)
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#register-wrapper,
#login-wrapper {
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-y: auto;
    overflow: hidden;
    font-family: "Dm Sans", sans-serif;
}

.form-wrapper {
    margin-top: 2.6rem;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    transition: transform 0.3s ease;
}

#login-wrapper #form,
#register-wrapper #form {
    box-sizing: border-box;
    border-radius: 30px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: auto;
    margin-bottom: 3rem;
}

#login-wrapper form,
#register-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

#login-wrapper .form-container,
#register-wrapper .form-container {
    padding: 1.8rem 5.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 10;
    width: fit-content;
}

.paperclip {
    position: absolute;
    top: -50px;
    right: 0;
    transition: top ease 0.3s;
    cursor: pointer;
    z-index: 100;
}

.paperclip:hover {
    top: -60px;
    z-index: 1;
}

#login-wrapper .form-container p,
#register-wrapper .form-container p {
    opacity: 65%;
    width: 30ch;
    text-align: center;
}

p.discover {
    margin: 1rem 0;
}

/* 
form {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
} */


#register-wrapper label,
#login-wrapper .login_form label {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#register-wrapper input:not(.save-btn),
#login-wrapper input:not(.save-btn) {
    border: 1px solid black;
    padding: 15px;
    width: 363px;
    border-radius: 100px;
}


input.field_error {
    border: 2px solid var(--error-hex);
}

.btn.login {
    border: none;
    width: 119px;

}

input.btn {
    border: none;
}

input[type="submit"]:not(.save-btn) {
    padding: 10px;
    background-color: var(--main-hex);
    font-family: "DM Sans", sans-serif;
    color: white;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 1.5rem;
}


#mySubmit:disabled {
    opacity: 0.5;
    color: white;
    cursor: not-allowed;
    background-color: #ccc;
    border: none;
}



#form button {
    font-family: 'Dm Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    border: 1px solid black;
    padding: 10px;
    border-radius: 100px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
}

hr {
    border: none;
    border-top: 1.5px solid var(--panel-hex);
    width: 100%;
    margin: 1rem 0;
}

/* Post Modal Styling */

.placeholder-post {
    width: 30rem;
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(50, 50, 50);
    border-radius: 3rem;
}

.placeholder-post-text {
    font-size: 2rem;
    color: rgb(227, 227, 227);
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.2);
}

.modal-content {
    background-color: #000;
    margin: 5% auto;
    border-radius: 5rem;
    max-width: 70%;
    max-height: 80vh;
    height: 80vh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(255, 255, 255, 0.05);
    z-index: 999;
}

#modal-text {
    color: white;
    font-size: 3rem;
    display: flex;
    align-items: center;
}

.modal-left,
.modal-right {
    width: 50%;
    min-width: 0;
    height: 100%;
}

.modal-right {
    flex-direction: column;
    display: flex;
    height: 100%;
    min-height: 0;
}

.modal-info-top,
.modal-description,
.modal-tags {
    flex: 0 0 auto;
}

.modal-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
}

.modal-close {
    position: absolute;
    top: 1.25rem;
    right: 3rem;
    font-size: 4rem;
    font-weight: 100;
    cursor: pointer;
    color: var(--text-color);
    font-family: var(--dm-sans);
    transition: all 0.2s ease-in-out;
}

.modal-close:hover {
    transform: scale(1.1);
    color: var(--main-hex);
}

.modal-close-password {
    position: absolute;
    top: 1.25rem;
    right: 3rem;
    font-size: 4rem;
    font-weight: 100;
    cursor: pointer;
    color: var(--text-color);
    font-family: var(--dm-sans);
    transition: all 0.2s ease-in-out;
}

.modal-close-password:hover {
    transform: scale(1.1);
    color: var(--main-hex);
}

.modal-info-top {
    display: flex;
    flex-direction: row;
    max-height: 20%;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.modal-user-pfp {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.modal-pfp img {
    border-radius: 100rem;
    object-fit: cover;
    display: block;
    width: 6rem;
    height: 6rem;
}

.modal-info {
    padding: 5rem 4rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.modal-username {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-left: 2rem;
}

.modal-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-comment-form {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    min-height: 60px;
}

.modal-comment-form input[type="text"] {
    min-height: 50px;
    border-radius: 25px;
    padding-left: 1rem;
}

.modal-description,
.comment-text,
.modal-icons .material-symbols-rounded {
    color: var(--text-color);
}

.modal-description,
.comment-text {
    color: var(--text-color);
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
}

.modal-tags {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 1.75rem;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--error-lines-color);
    width: 100%;
    flex-wrap: wrap !important;
}

.modal-tag {
    color: var(--text-color);
    background-color: var(--tag-default);
    border-radius: 3rem;
    text-transform: uppercase;
    padding: 0.8rem 1.75rem;
    transition: all 0.3s ease-in-out;
    width: fit-content;
}

.modal-tag:hover {
    background-color: var(--main-hex-hover);
    transform: scale(1.1);
}

.modal-comments {
    overflow-y: hidden;
    overflow-x: hidden;
    flex: 1 1 auto;

    min-height: 0;
}

.modal-comments-list {
    margin-bottom: 20px;
    scroll-behavior: smooth;
    scrollbar-color: var(--main-hex) rgba(0, 0, 0, 0.3);
}


/* Scrollbar Customization Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar*/

/* Chrome/Safari/Edge scrollbar */
.modal-comments-list::-webkit-scrollbar {
    display: block !important;
    height: 30px !important;
    width: 30px !important;
}

.modal-comments-list::-webkit-scrollbar-thumb {
    background: var(--main-hex) !important;
    border-radius: 6px !important;
}

.modal-comments-list::-webkit-scrollbar-thumb:hover {
    background: var(--main-hex-hover) !important;
}

.modal-comments-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
}


.modal-comment {
    margin-left: 1.65rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.modal-header {
    color: var(--error-dots-color);
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.comment-pfp img {
    border-radius: 10rem;
    width: 4rem;
    height: 4rem;
}

.comment-info {
    display: flex;
    flex-direction: column;
    max-width: 60%;
    height: auto;
}

.comment-username {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.comment-like {
    margin-left: auto;
}

/* GETMESSAGES ERROR PAGE STYLING  */

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



.message_text h2 {
    color:white !important;
}

.get_messages {
    position: fixed;
    margin: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    border-radius: 30px;
    z-index: 20;
    font-size: 2rem;
    color: white !important;
    font-family: "Cal Sans", sans-serif;
    border-radius: 1.875rem;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--Colour-Dark, #1B1B1B);

}

.get_messages.error {
    border: 5px solid var(--error-hex);
    box-shadow: 0 0 85px 0 var(--error-hex);
}


.get_messages.success {
    border: 5px solid var(--success-hex);
    box-shadow: 0 0 85px 0 var(--success-hex);

}

.get_messages p {
    font-size: 1rem;
}

.alert_close {
    position: absolute;
    display: flex;
    right: 14px;
    top: 0;

}

.message_text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.get_messages span:hover {
    cursor: pointer;
}

.error_content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.overlay {
    animation: fadeIn 0.4s ease-in;
}


.overlay.hide {
    opacity: 0;
    pointer-events: none;
    animation: fadeOut 0.4s ease-out;
}

.cta-btn-group.login-error-cta {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}



@keyframes fadeIn {
    from {
        translate: 0 5vh;
        opacity: 0;
    }

    to {
        translate: 0 0;
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        pointer-events: none;
    }
}


/* -------------------------------------------------------------------------- */
/*                                POST COMPOSER                               */
/* -------------------------------------------------------------------------- */

.feed-container .post_composer.add {
    padding: 0 5rem 5rem 5rem;
    color: white;
    width: 80vw;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 4rem;
}

.feed-container .post_composer {
    font-family: 'DM Sans', sans-serif;
}

/* This is so that the create-post content doesn't overlap with the notification and logout symbol at the top */
.top-space {
    height: 5rem;
    width: 100%;
}

/* username and profile pic */
.post_composer .row {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    padding: 1rem;
    gap: 1rem;

}

.post_composer .row h2 {
    padding: 0;
}



.post_composer .left {
    height: fit-content;
}

.post_composer .right {
    width: fit-content;
    min-height: 0;
    max-height: 50vh;

}

.right .post-editor-container {
    min-height: 0;
    max-height: 50vh;
    width: 100%;
    height: fit-content;
    padding: 0 2rem 2rem 2rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}






.post_composer .right h2 {
    font-size: 1.875rem;
    color: var(--text-color);
}





.post_composer img {
    border-radius: 100rem;
    object-fit: cover;
    display: block;
    width: 5rem;
    height: 5rem;
}


.post_composer textarea {
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    min-height: 150px;
    border: 1px solid var(--border-hex);
    align-self: stretch;
    border-radius: 1.5rem;
    padding: 1rem;
    margin: 0;
}





.post_composer .post {
    margin-top: 20px;
    flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--transition-time);

}


.profile_right {
    width: 61.8%;
}

.post_composer input[type="submit"]:hover {
    color: var(--accent-hex);
}





.post_composer .dnatag-post {
    width: 100%;
    color: white;
    background-color: var(--tag-default);
    padding: .5rem 1rem .5rem 1rem !important;
    border-radius: 1.5rem;
    border: none;
    cursor: pointer;
    transition: 0.1s ease-in;
    display: flex;
    justify-content: center;
}

/* https://stackoverflow.com/questions/19927813/make-a-checkbox-look-like-a-button-css */
.tag-picker input[type="checkbox"] {
    display: none;
}

.tag-picker label span {
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    background-color: var(--tag-default);
    color: white;
    cursor: pointer;
    transition: 0.1s ease-in;
    width: 100%;
    font-weight: 500;
    gap: 10px;
}

.tag-picker label span:hover {
    transform: scale(.96);
    background-color: rgb(43, 43, 43);
}

/* 
.tag-picker label span:hover::before {
    content: "+";
}

.tag-picker label:has(input:checked) span::before {
    content: "";
} */

.tag-section hr {
    opacity: 20%;
}

.tag-picker input[type="checkbox"]:checked+span {
    background-color: var(--main-hex);
    color: white;
}





.post_composer .tag-section input {
    width: 210px;
}



.post_composer .taglink {
    position: relative;
    text-decoration: none !important;
    font-family: var(--dm-sans);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .025rem;
    font-weight: 600;
    font-size: .8rem;
}

.post_composer .taglink:visited {
    color: inherit;
}

.caption-input {
    position: relative;
}


.used-create-tags {
    display: flex;
    gap: .3rem;
    z-index: 10;
    position: absolute;
    bottom: 12px;
    left: 7px;
    width: 100%;
    flex-wrap: wrap;
}


.post_composer .drag-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--panel-hex);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 26vw;
    height: 80vh;
}

.post_composer .drag-image h3 {
    color: var(--text-color);
}

.post_composer .drag-image.active {
    border-color: var(--main-hex);
}

.post_composer .drag-image .icon {
    font-size: 48px;
    color: var(--main-hex);
    margin-bottom: 1rem;
}

.post_composer .drag-image h3,
.post_composer .tag-section h3 {
    text-transform: uppercase;
}

.post_composer .tag-section h3 {
    color: white;
}

.post_composer .tag-section h4 {
    color: var(--main-hex-light);
    margin-bottom: 1rem;
}

.post_composer .tag-section h3,
h4 {
    display: inline-block;
    margin: 0;
    margin-right: 0.5rem;
}

.post_composer .drag-image button {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--main-hex);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--cal-sans);
    letter-spacing: 2px;
}

.post_composer .drag-image button:hover {
    background-color: #fff;
    color: var(--main-hex)
}


.post_composer .drag-image {
    position: relative;
    overflow: hidden;
}

.post_composer .drag-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
}

.post_composer .tag-section {
    border-radius: 1.5rem;
    box-sizing: border-box;
    padding: 2rem;
    width: fit-content;
    height: fit-content;
    background-color: black !important;
    border: 2px solid rgba(255, 255, 255, 0.5);

}

.post_composer .tag-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.post_composer .tag-section .post {
    display: block;
    margin-left: auto;
    width: 210px;
}

.post_composer .left .dlt-icon {
    z-index: 5;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: fit-content;
    padding: 5px;
    background-color: rgb(0, 0, 0, 0.5);
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    transition: background-color .2s ease-in-out;
}

.post_composer .left .dlt-icon:hover {
    background-color: rgb(0, 0, 0, 0.1);
}

.post_composer .left .dlt-icon.on {

    display: flex;

}

.post_composer .left .material-symbols-rounded.dlt {
    font-size: 2rem;
    font-weight: normal;
}

.logout-btn {
    padding: 1rem 1.5rem;
    color: var(--text-light-hex);
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease-in-out;
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
}

/* Search Sidebar */
.search-sidebar {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background-color: var(--bg-color);
    border-left: 1px solid var(--border-color);
    transition: right 0.3s ease;
    z-index: 999;
    padding: 2rem;
    box-sizing: border-box;
}

.search-sidebar.active {
    right: 0;
}

.navbar.expanded {
    border-right: 1px solid var(--border-color);
}

.search-sidebar-content {
    margin-top: 2rem;
}

.search-sidebar-content h2 {
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
    font-size: 1.5rem;
}

.search-sidebar #search_box {
    display: flex;
    gap: 0.5rem;
    padding: 0;
}

.search-sidebar #search_box input[type="search"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
}

.search-sidebar #search_box button {
    padding: 0.75rem 1.25rem;
    background-color: var(--main-hex);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-sidebar #search_box button:hover {
    opacity: 0.9;
}

.post_composer .used-tag-item {
    color: black;
    background-color: transparent;
    border: 1px solid black;
    padding: .5rem 1rem .5rem 1rem !important;
    border-radius: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.1s ease-in;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
}


.used-tag-item:hover {
    transform: scale(1.05);
    cursor: default;
}



/* ---------------------------------- FORM STYLING ---------------------------------- */

.profile-wrapper form:not(#edit-password) {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    width: fit-content;
    gap: 3rem;
    width: 100%;
    height: fit-content;

    /* border: 1px solid antiquewhite; */
}

.profile-wrapper #form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent !important;
    padding: 2rem 0;

    /* border: 5px solid red !important; */
}

.profile-wrapper #form h1 {
    font-size: 5rem;
}

.profile-wrapper #form label {
    align-self: flex-start;
    font-size: 1.25rem;
    font-weight: 400;
    margin: 1.75rem 0 .5rem 0 !important;
    font-family: var(--cal-sans);
    color: var(--text-color);
    letter-spacing: .1rem;
}

.profile-wrapper #form input:not([type="submit"]):not(.edit-info input) {
    background: white;
    color: var(--text-dark-hex) !important;
    border: 3px solid var(--text-dark-hex) !important;
    outline: none;

}

.profile-wrapper #form input:focus {
    border: 3px solid var(--main-hex) !important;
    outline: none !important;
}

#login-wrapper #edit-password {
    margin: 0;
    margin-top: 4rem !important;
    padding-left: 0;
    gap: 2.5rem;
    color: white;
}

.wide_butt {
    cursor: pointer;
}

/* Notifications Styling */

.notification {
    background-color: rgba(19, 19, 19, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 1.15rem 2rem;
    width: 45rem;
    border-radius: 5rem;
    font-size: 1.3rem;
    border: 3px solid var(--main-hex);
    box-shadow: 0 0 10px var(--main-hex);
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    font-family: var(--motiva-sans);
    letter-spacing: 1px;
    color: var(--text-light-hex);
}

/* Avatar picture */
.notification img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: cover;
}

/* For the username */
.notification strong {
    font-weight: 700;
}

.notification-group {
    display: flex;
    align-items: flex-start;
    padding-left: 14rem;
    padding-top: 3rem;
    flex-direction: column;
    justify-content: flex-start;
    width: 100vw;
    min-height: 100vh;
}

.notification-header {
    color: var(--text-light-hex);
    font-size: 4.5rem;
    font-family: var(--cal-sans);
    margin-bottom: 3.5rem;
    margin-top: 3rem;
    position: sticky;
    top: 3rem;
    background-color: var(--background-hex);
    z-index: 10;
    margin-left: 8rem;
    letter-spacing: 2px;
    color: var(--text-light-hex);
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    overflow-y: auto;
    padding-right: 2rem;
    padding-bottom: 4rem;
}

.notification-strand {
    right: 10%;
    top: 50%;
}

#notifications {
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    position: relative;
}

#notifications #dna-strand {
    width: 93.75rem;
    height: 15rem;
    position: absolute;
    top: 50%;
    left: 90%;
    margin-top: -7.5rem;
    margin-left: -46.875rem;
    perspective: 62.5rem;
    transform: rotate(-50deg);
}