body {
    margin: 0;
    font-family: sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Main layout uses flexbox to manage header/content height */   
    font-family: 'Roboto', sans-serif;
    font-size: clamp(0.8rem, 3vw + 0.8rem, 4.0rem);
 
}

.fixed-header {
            position: fixed; /* Fixes the header at the top */
            top: 0;
            left: .5vw;
            right: 0vw;
            margin-right: 0vw;
            margin-bottom: 1.57vw;
            width: 98%; /* Ensures 100% width */
            height: 5.72vw; /* Fixed height for the header */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: .4vw;
            z-index: 10; /* Ensures the header stays on top */

            /* Apply the linear gradient as a background image */
            background: linear-gradient(to right, #0000ff, #ff0000) left bottom no-repeat;
            /* Constrain the background image size to just the bottom padding area */
            background-size: 100% 0.7vw; 
}


.card-container {
    display: grid;
    /* On mobile, flow into columns with fixed width for swiping */
    grid-auto-flow: column;
    grid-auto-columns: 85vw; /* Each card takes up 85% of the viewport width */
    gap: 1rem;
    overflow-x: auto; /* Enables horizontal scrolling/swiping */
    height: 100%; /* Ensures container fills the vertical space of main-container */
    padding: 1rem;
    box-sizing: border-box;

    /* Optional: Add scroll snap for a "swipe-to-page" effect */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooths scrolling on iOS */
}


.card {
    background: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start; /* Snaps the start of the card to the scroll container's start */
    overflow-y: auto; /* Allows independent vertical scrolling within each card */
    height: calc(100% - 2rem); /* Fills container height minus padding */
}

.card {
  overflow-y: scroll; /* or auto, to only show if content overflows */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

/* For Chrome, Safari, Opera, and other WebKit browsers */
.card::-webkit-scrollbar {
  display: none;
}


.main-area {
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: top;
    margin: 0;
    color: #ffffff;
    position: relative;
}

.login-container {
    background-color: #ffffff;
    padding: 2vw 3vw; /*2rem 3rem*/
    border-radius: 3vw; /*.4vw*/
    box-shadow: 0 1.3vw 2.2vw rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 85vw;
    text-align: center;
    margin: 2rem; /* Add margin for small screens */
}

.login-form h1 {
    margin-bottom: .625vw;
    color: #333;
}

.login-form p {
    margin-bottom: 1.88vw;
    color: #666;
}

.input-group {
    margin-bottom: 1.25vw;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: .625vw;
    font-weight: bold;
    color: #555;
}

.input-group input {
    width: 100%;
    padding: .9375vw;
    border: .079vw solid #ddd;
    border-radius: .393vw;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    font-size: 1.25vw;
}

.input-group input:focus {
    outline: none;
    border-color: #9b59b6;
}


.input-group img {
    width: 7.5vw;
    height: 7.5vw;
    vertical-align: middle;
}


button {
    width: 100%;
    padding: .9375vw;
    border: none;
    border-radius: 2vw;
    background: #9b59b6;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.7s ease;
    margin-top: 1.25vw;
    font-size: 5vw;
}

button:hover {
    background: rgb(112, 157, 255);
}

button a {
    text-decoration: none;
    color: inherit;
}

.register-link {
    margin-top: 1.88vw;
    font-size: 1.125vw;
}

.register-link a {
    color: #9b59b6;
    text-decoration: none;
    font-weight: bold;
}

.register-link a:hover {
    text-decoration: underline;
}


.signup-container {
    background-color: #ffffff;
    padding: 2vw 3vw; /*2rem 3rem*/
    border-radius: 3vw; /*.4vw*/
    box-shadow: 0 1.3vw 2.2vw rgba(0, 0, 0, 0.2);
    width: 90vw;
    text-align: center;
    margin: 2rem; /* Add margin for small screens */
}

.signup-form h2 {
    margin-bottom: .625vw;
    color: #333;
}

.signup-form p {
    margin-bottom: 1.88vw;
    color: #666;
}

.input-group {
    margin-bottom: 1.25vw;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: .625vw;
    color: #555;
}

.input-group input {
    width: 100%;
    padding: 0.94vw;
    border: 0.08vw solid #ddd;
    border-radius: .4vw;
    box-sizing: border-box; 
    font-size: 4.25vw; /* 1.25vw */
}

.input-group input:focus {
    outline: none;
    border-color: #71b7e6;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 1.25vw;
    font-size: 4.125vw;
    color: #555;
    text-align: left;
}

.checkbox-group input {
    margin-right: .625vw;
}

.checkbox-group a {
    color: #71b7e6;
    text-decoration: none;
}

.signup-button {
    width: 100%;
    padding: .9375vw;
    border: none;
    border-radius: .93vw;
    background-color: #0f44b7;
    color: white;
    font-size: 5.375vw;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.88vw;
}



.volume-display-signup {
color: rgb(90, 90, 90);
font-size: 4.2vw;
font-weight: bold;
align-content: center;
vertical-align: middle;
position: relative;
}


.volume-display-signup table td {
color: rgb(90, 90, 90);
font-size: 4.2vw;
font-weight: bold;
align-content: center;
vertical-align: middle;
position: relative;
}

.signup-button:hover {
    background-color: #8e44ad;
}

.form-footer {
    margin-top: 1.88vw;
    font-size: 1.125vw;
    color: #555;
}

.form-footer a {
    color: #71b7e6;
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}

.logothedial {
    margin-top: .4vw;
    font-family: 'Roboto','sans-serif';
    margin-left: 5.93vw;
    position: relative;
    align-items: top;
    font-size: 9.625vw;
    color: #333;
}

.rotator-container {
    position: absolute;
    width: 11.393vw; /* Adjust size as needed */
    height: 11.393vw;
    align-items: center;
    align-content: center;
    display: flex;
    justify-content: center;
}

/* Visually hide the actual input, but keep it accessible for screen readers/keyboard users */
.rotator-container input[type="range"] {
    position: absolute;
    width: 80%;
    height: 80%;
    opacity: 0;
    cursor: pointer;
}

/* This makes the hidden input cover the entire container for easy interaction */

/* Style the custom visual knob */
.knob {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #333;
    position: relative;
    display: flex;
    pointer-events: none; /* Allows clicks to pass through to the hidden input */
    box-shadow: 0 0 2.57vw rgba(0,0,0,0.5);
    transition: transform 0.1s linear; /* Smooth rotation transition */
    transform: rotate(135deg); /*initial rotation*/
}

/* Add a "tick" or indicator to the knob */
.knob::after {
    content: "";
    width: .91vw;
    height: 1.8vw;
    background: #ff0000;
    position: absolute;
    top: .993vw; /* Position from the top edge */
    left: 50%;
    margin-left: -0.357vw; /* Center the tick */
    border-radius: 0.357vw;
}


.volume-display {
  color: white;
  font-size: 4vw;
  font-weight: bold;
  align-content: center;
  vertical-align: middle;
  position: absolute;
  z-index: 2;
  /* Centered within the knob via flexbox on the knob container */
}


.volume-display2 {
  color: rgb(0, 0, 0);
  font-size: 4vw;
  font-weight: bold;
  align-content: center;
  vertical-align: middle;
  position: absolute;
  z-index: 2;
  /* Centered within the knob via flexbox on the knob container */
}


    /* Header Styling */
    .header {
        position: fixed; /* Fixes the header at the top */
        top: 2vw;
        left: .5vw;
        right: 0vw;
        margin-right: 0vw;
        margin-bottom: 4.8vw;
        width: 95%; /* Ensures 100% width */
        height: 10vw; /* Fixed height for the header */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5.4vw;
        padding-top: 2vw;
        z-index: 10; /* Ensures the header stays on top */

        /* Apply the linear gradient as a background image */
        background: linear-gradient(to right, #0000ff, #ff0000) left bottom no-repeat;
        /* Constrain the background image size to just the bottom padding area */
        background-size: 100% 3.5vw; 

    }

        .header2 {
        position: relative;
        top: 2vw;
        left: .5vw;
        right: 0vw;
        margin-right: 0vw;
        margin-bottom: 4.8vw;
        width: 95%; /* Ensures 100% width */
        height: 10vw; /* Fixed height for the header */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5.4vw;
        padding-top: 2vw;
        z-index: 10; /* Ensures the header stays on top */
    }

        .logo {
            font-size: 2.31vw;
            font-weight: bold;
        }

        /* Dropdown Menu Styling */
        .dropdown {
            position: relative;
            display: inline-block;
            margin-top: -1.6vw;
        }

        .dropdown-button {
            background-color: #fff;
            color: black;
            padding: 1.2vw 2.18vw;
            border: .179vw solid #ccc;
            cursor: pointer;
            margin-right: 1.57vw;        }

        .dropdown-button:hover {
            background-color: #b5a3fc;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 1.57vw;
            background-color: #fff;
            min-width: 12.58vw;
            box-shadow: 0vw .629vw 1.258vw 0vw rgba(0,0,0,0.2);
            z-index: 1;
            font-size: 5vw;
        }

        .dropdown-content a {
            color: black;
            padding: 1.943vw 2.258vw;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1;}

        .dropdown:hover .dropdown-content {display: block;}

        .dropdown label:hover {
            background-color: #f1f1f1;
            display: block;
            padding: .3vw .3vw;
        }

        .dropdown-content label {
            display: block;
            padding: .3vw .3vw;
        }

        /* Main Container Styling */
        .main-container {
            display: flex;
            /* Margin top to prevent content overlay by the fixed header */
            margin-top: 15.72vw; 
            background-color: #ffffff;
            height: calc(100vh - 15.72vw); /* Full height minus header height */
                /* For Internet Explorer and Edge */
            -ms-overflow-style: none;
            /* For Firefox */
            scrollbar-width: none;
            /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
            overflow: auto;
        }

        /* Sidebar Styling */
        .sidebar {
            width:25vw; /* Fixed width for sidebars */
            background-color: #ffffff;
            padding: 1.57vw;
            overflow-y: auto; /* Scrollable if content exceeds height */
            box-sizing: border-box;
            /* position: fixed; is not needed here because the main-container has a fixed height and flex layout handles the positioning */
        }

        .sidebar-left {
                /* For Internet Explorer and Edge */
            -ms-overflow-style: none;
            /* For Firefox */
            scrollbar-width: none;
            /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
            overflow: auto;
        }

        
        .sidebar-left::-webkit-scrollbar {
            display: none;
        }


        .sidebar-right {
                /* For Internet Explorer and Edge */
            -ms-overflow-style: none;
            /* For Firefox */
            scrollbar-width: none;
            /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
            overflow: auto;
        }
        
        .sidebar-right::-webkit-scrollbar {
            display: none;
        }

/* Content Area Styling */
.content {
    display: flex;
    flex-direction: column; /* Stacks the boxes vertically */
    margin-top: 0vw;
    width: 40vw;
    padding: 1.57vw;
    border-radius: 1vw;
    background-color: #ffffff;
    overflow-y: auto; /* Makes only the content area scrollable */
    box-sizing: border-box;
    gap: 2vw;
}

        
.session-box {
    background-color: #f8f8f8; /* Light gray background for the boxes */
    padding: 1.5vw;             /* Space inside the boxes */
    border-radius: 3vw;       /* Rounded corners */
    text-align: left;
    margin-bottom: 4vw;
    font-size: 5vw;
    position: relative;
    cursor: pointer; /* 2. Changes the cursor to a pointer for the entire div for better UX. */
}

/* Optional: Add hover effect to the entire card */
.session-box:hover {
    background-color: #e0e0e0;
}

.reference-link {
    color: rgb(43, 36, 53);
}

.reference-link a {
    position: relative;
    z-index: 2; /* 6. Must be higher than the full-post-link z-index. */
    /* Add other styling for your specific links (color, underline, etc.) */
    text-decoration: none;
}
    
.reference-link table a {
    position: relative;
    z-index: 2; /* 6. Must be higher than the full-post-link z-index. */
    /* Add other styling for your specific links (color, underline, etc.) */
    text-decoration: none;
}

.reference-link table tr a {
    position: relative;
    z-index: 2; /* 6. Must be higher than the full-post-link z-index. */
    /* Add other styling for your specific links (color, underline, etc.) */
    text-decoration: none;
}

.reference-link table td a {
    position: relative;
    z-index: 2; /* 6. Must be higher than the full-post-link z-index. */
    /* Add other styling for your specific links (color, underline, etc.) */
    text-decoration: none;
}

.full-post-link {
position: absolute; /* 3. Positions the link overlay. */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1; /* 4. Places this link above the rest of the content (except specific links). */
/* Optional: can add display: block for older browser compatibility, though inset: 0 covers it now */
}

/* slider to determine a range that will later be used as parameters for algorythnm*/


.range-container {
  position: relative;
  width: 15.72vw; /* Adjust width as needed */
  height: 2.36vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.value-display {
  display: flex;
  justify-content: space-between;
  margin-top: 2.36vw;
}

/* drop down with checkmarks */

.custom-select { 
    position: relative;
    width: 15.72vw; 
    border: .0786vw solid #ccc; 
    padding: .393vw; 
    font-size: 1.2vw;
    background: white;
}

.options { 
    position: absolute; 
    background: white; 
    border: .0786vw solid #ccc; 
    width: 100%; 
    z-index: 10; 
    display: flex; 
    flex-direction: column;  
    font-size: 1.2vw;
    color: #333;
}

.custom-select label { 
    padding: .393vw; 
    cursor: pointer; 
}

.custom-select label:hover { 
    background-color: #f0f0f0; 
}

.options:hover .custom-select {display: block;}

/* Base styles for the input element */
.pointy-slider {
  -webkit-appearance: none; /* Removes default WebKit/Blink styles */
  appearance: none;
  background: transparent; /* Makes the input container background transparent */
  cursor: pointer;
  width: 16vw; /* Adjust width as needed */
  height: 1.89vw;
}

/* Styling the track (optional, for consistency) */
.pointy-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 3.4vw;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
}

.pointy-slider::-moz-range-track {
  background: transparent;
  height: 3.4vw;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
}

/* Styling the pointy handle (thumb) */

/* For Chrome, Safari, Edge (Blink/WebKit) */
.pointy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removes default thumb style */
  appearance: none;
  width: 6vw; /* Adjust size as needed */
  height: 6vw;
  background: linear-gradient(to right, rgb(172, 172, 172), black, black);
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 60%); 
  /* Vertically center the thumb on the track */
  margin-top: -.8vw; 
}

/* For Firefox */
.pointy-slider::-moz-range-thumb {
  -moz-appearance: none; /* Removes default thumb style */
  appearance: none;
  width:  6vw;
  height:  6vw;
  background: linear-gradient(to right, rgb(172, 172, 172), black, black);
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 60%);  
  border: none; /* Removes default Firefox border */
  margin-top: -.8vw; 
}


/* Base styles for the input element */
.pointy-slider2 {
  -webkit-appearance: none; /* Removes default WebKit/Blink styles */
  appearance: none;
  background: transparent; /* Makes the input container background transparent */
  cursor: pointer;
  width: 16vw; /* Adjust width as needed */
  height:  1.89vw;
}

/* Styling the track (optional, for consistency) */
.pointy-slider2::-webkit-slider-runnable-track {
background: transparent;
  height: 3.4vw;
  border-radius: .393vw;
  margin-left: 0;
  padding: 0;
}

.pointy-slider2::-moz-range-track {
  background: transparent;
  height: 3.4vw;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
}

/* Styling the pointy handle (thumb) */

/* For Chrome, Safari, Edge (Blink/WebKit) */
.pointy-slider2::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removes default thumb style */
  appearance: none;
  width:  6vw; /* Adjust size as needed */
  height:  6vw;
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(172, 172, 172));
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(100% 40%, 100% 100%, 50% 100%, 50% 0%); 
  /* Vertically center the thumb on the track */
  margin-top: 0; 
}

/* For Firefox */
.pointy-slider2::-moz-range-thumb {
  -moz-appearance: none; /* Removes default thumb style */
  appearance: none;
  width: 6vw;
  height: 6vw;
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(172, 172, 172));
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(100% 0%, 50% 0%, 50% 100%, 100% 60%);
  border: none; /* Removes default Firefox border */
  margin-top: 0; 
}


/* Base styles for the input element */
.pointy-slider-signup {
  -webkit-appearance: none; /* Removes default WebKit/Blink styles */
  appearance: none;
  background: transparent; /* Makes the input container background transparent */
  cursor: pointer;
  width: 16vw; /* Adjust width as needed */
  height: 1.89vw;
  padding: 0vw;
}

/* Styling the track (optional, for consistency) */
.pointy-slider-signup::-webkit-slider-runnable-track {
  background: transparent;
  height: 3.4vw;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
}

.pointy-slider-signup::-moz-range-track {
  background: transparent;
  height: 3.4vw;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
}

/* Styling the pointy handle (thumb) */

/* For Chrome, Safari, Edge (Blink/WebKit) */
.pointy-slider-signup::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removes default thumb style */
  appearance: none;
  width: 6vw; /* Adjust size as needed */
  height: 6vw;
  background: linear-gradient(to right, black, rgb(117, 117, 117), black);
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(25% 0%, 75% 0%, 75% 60%, 50% 100%, 25% 60%); 
  /* Vertically center the thumb on the track */
  margin-top: -.8vw; 
}

/* For Firefox */
.pointy-slider-signup::-moz-range-thumb {
  -moz-appearance: none; /* Removes default thumb style */
  appearance: none;
  width:  6vw;
  height:  6vw;
  background: linear-gradient(to right, black, rgb(117, 117, 117), black);
  cursor: pointer;
  /* Creates a pointy shape (triangle pointing right) */
  clip-path: polygon(25% 0%, 75% 0%, 75% 60%, 50% 100%, 25% 60%);  
  border: none; /* Removes default Firefox border */
  margin-top: -.8vw; 
}




.pointyslidercontainer {
  position: relative;
  width: 15vw; /* Adjust width as needed */
  height: .4vw;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  background: linear-gradient(to right, blue, white, red);
  border-radius: .3144vw;
}


.slider-container {
  position: relative;
  width: 50vw;
  height: 5vw;
}

.slider-container input {
  /* Remove default styling and position absolutely */
  position: absolute;
  width: 100%;
  pointer-events: none; /* Allows clicks to pass through the input track to the one below, only the thumb is interactive */
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

/* Make only the thumbs interactive */
.slider-container input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.slider-container input::-moz-range-thumb {
  pointer-events: auto;
  -moz-appearance: none;
  appearance: none;
}



/* Style the track visually */
.slider-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2.4vw;
  background: linear-gradient(to right, rgb(255, 0, 0), white, rgb(0, 0, 0));
  border-radius: 1.93vw;
}

.slider-track-like {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2.4vw;
  background: linear-gradient(to right, rgb(255, 0, 0), white, rgb(0, 167, 0));
  border-radius: 1.93vw;
}

.slider-track-politics {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2.4vw;
  background: linear-gradient(to right, rgb(0, 0, 255), white, rgb(255, 0, 0));
  border-radius: 1.93vw;
}


.slider-track-comedy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2.4vw;
  background: linear-gradient(to right, rgb(119,119,199), rgb(254,210,49));
  border-radius: 1.93vw;
}


.slider-track-veracity {
  position: absolute;
  top: 50%;
  background: linear-gradient(to right, rgb(0,0,0), rgb(0, 168, 168));
  transform: translateY(-50%);
  width: 100%;
  height: 2.4vw;
  border-radius: 1.93vw;
}




.values-display {
  margin-top: .4vw;
  font-family: sans-serif;
}


.containergrid {
  display: grid;                   /* 1. Activate CSS Grid */
  grid-template-columns: 2vw 16vw 2vw; /* 2. Defines three equal-width columns */
  align-items: center;             /* 3. Vertically centers all child items */
}

.containergrid img {
    width: 2vw;
    height: 2vw;
    vertical-align: middle;
}

.item {
    text-align: center;
}

.group-border {
  border-bottom: .09vw solid #aaa; 
}

.rangeSelectors table {
     border-collapse: collapse;
}

.rangeSelectors table td  {
  font-size: 5.2vw;
}


.rangeSelectors table td img {
    width: 7.5vw;
    height: 7.5vw;
    vertical-align: middle;
}

/* CSS for the disabled/grayed out state */
.disabled-element {
    opacity: 0.2;
    filter: saturate(0%);
}



.rotator-container-priorities {
    position: relative;
    width: 20vw; /* Adjust size as needed */
    height: 20vw;
    align-items: center;
    align-content: center;
    display: flex;
    justify-content: center;
}

/* Visually hide the actual input, but keep it accessible for screen readers/keyboard users */
.rotator-container-priorities input[type="range"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* This makes the hidden input cover the entire container for easy interaction */

/* Style the custom visual knob */
.knob-priorities {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #333;
    position: relative;
    display: flex;
    pointer-events: none; /* Allows clicks to pass through to the hidden input */
    box-shadow: 0 0 1.57vw rgba(0,0,0,0.5);
    transition: transform 0.1s linear; /* Smooth rotation transition */
    transform: rotate(135deg); /*initial rotation*/
    z-index: 1; /* Below the range input  - suggested*/
}

/* Add a "tick" or indicator to the knob */
.knob-priorities::after {
    content: "";
    width: 1vw;
    height: 4vw;
    background: #00ff37;
    position: absolute;
    top: .5vw; /* Position from the top edge */
    left: 50%;
    margin-left: -1vw; /* Center the tick */
    border-radius: 1vw;
}


    #knob-following {
        position: absolute;
        width: 25vw;
        height: 25vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-location {
        position: absolute;
        width: 25vw;
        height: 25vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-engagements {
        position: absolute;
        width: 25vw;
        height: 25vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-time {
        position: absolute;
        width: 25vw;
        height: 25vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

.newPost {
    width: 95%;
    padding: .9375vw;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3vw;
    background: #ffffff;
    color: rgb(0, 0, 0);
    font-size: 6vw;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.7s ease;
    margin-bottom: 3.25vw;
    margin-top: 1.25vw;
    text-align: center;
}

.newPost a{
    text-decoration: none;
    color: rgb(0, 0, 0);
}
.newPost:hover {
    background: rgb(182, 146, 255);
}


.input-newtext {
    margin-bottom: 1.25vw;
    text-align: left;
}

.input-newtext label {
    display: block;
    margin-bottom: .325vw;
    font-weight: bold;
    color: #555;
}

.input-newtext textarea {
    width: 100%;
    height: 20vw;
    padding: .9375vw;
    border: .079vw solid #ddd;
    border-radius: .393vw;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    font-size: 1.25vw;
}

.input-newtext textarea:focus {
    outline: none;
    border-color: #9b59b6;
}

.upload-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.upload-label:hover {
    background-color: #0056b3;
}


.postImage img {
    width: 100%;
    height: auto;
    border: 1px solid rgb(211, 211, 211);
    box-sizing: border-box;
}

.postTime {
    font-size: 2.5vw;
    color: #aaa;
}

.postCheckedBox {
    font-size: 1.2vw;
    color: #aaa;
    position: relative;
}

.postCategories {
    position: relative;
    z-index: 2;
}

.postCategories img {
    width: 10vw;
    height: 10vw;
    margin-bottom: 2vw;
    margin-right: 2vw;
}

.fixedHeight {
    max-height: 20vw; 
    overflow-y: hidden;
}

.hidden-text {
  /* Hide the text initially */
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease; /* Smooth transition */
  position: absolute;
  margin-top: 11vw;
  margin-left: -9vw;
  font-size: 3vw;
}

/* Reveal the text when the trigger is focused */
.trigger:focus + .hidden-text {
  opacity: 0.5;
  height: auto; /* Allow height to adjust */
  position: absolute;
  margin-top: 11vw;
  margin-left: -9vw;
  font-size: 3vw;
}

.photoThumb {
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2vw;
}

@font-face {
  font-family: 'SegmentFont';
  /* src: url('../fonts/DSEG7Classic-Bold.woff') format('woff'),
       url('../fonts/DSEG7Classic-Bold.ttf') format('truetype'); */
    src: url('../fonts/dseg14-classic-latin-400-normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.knob-container {
    position: relative;
    width: 5vw; /* Adjust size as needed */
    height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.knob-background-ideology {
    width: 100%;
    height: 100%;
    background-image: url("../images/ideologyKnob.png"); /* Replace with your image URL */
    background-size: cover;
    border-radius: 50%; /* Assumes a circular image */
    position: relative;
}


.knob-background-humor {
    width: 100%;
    height: 100%;
    background-image: url("../images/humorKnob.png"); /* Replace with your image URL */
    background-size: cover;
    border-radius: 50%; /* Assumes a circular image */
    position: relative;
}


.knob-background-approval {
    width: 100%;
    height: 100%;
    background-image: url("../images/approvalKnob.png"); /* Replace with your image URL */
    background-size: cover;
    border-radius: 50%; /* Assumes a circular image */
    position: relative;
}


.knob-background-veracity {
    width: 100%;
    height: 100%;
    background-image: url("../images/veracityKnob.png"); /* Replace with your image URL */
    background-size: cover;
    border-radius: 50%; /* Assumes a circular image */
    position: relative;
}

.knob-value {
    position: absolute;
    font-size: .629vw;  
    padding-top: .157vw;
    padding-bottom: .157vw;
    font-family: 'SegmentFont', monospace;
    color: rgb(255, 255, 255); /* Adjust color for readability */
    /* Center the text over the knob image */
    background-color: #666;
    border-radius: 20%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Allows mouse events to pass through the value display to the knob */
}

.knob-pointer {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: .236vw; /* Width of the pointer */
    height: 2.2vw; /* Height of the pointer, adjusts how far it reaches from center */
    background-color: rgb(40, 40, 40); /* Color of the pointer */
    transform-origin: bottom center; /*bottom center; /* Pivot point for rotation */
    /* Initial rotation to the vertical 0 position */ 
    border-radius: 50%;
    /*border: 1px solid black;*/
}

input[type="checkbox"] {
  accent-color: #636363; /* This sets the checkbox color to a shade of blue */
  width: 3vw; /* Optional: Adjusts the size */
  height: 3vw; /* Optional: Adjusts the size */
}

.oval-container {
    border-radius: 6vw;
    background-color: #00ff37;
    padding-left: 2.1vw;
    padding-right: 2.1vw;
    padding-top: 2.1vw;
    padding-bottom: 2.1vw;
    font-size: 3vw;
}


    .oval-container-self {
        position: relative;
        border-radius: 3vw;
        padding-left: 2.1vw;
        padding-right: 2.1vw;
        padding-top: 2.1vw;
        padding-bottom: 2.1vw;
        margin-left: 3vw;
        border: 1px rgb(198, 198, 198) solid;
    }



.oval-container-ideology {
    color: rgb(0, 0, 0);
    /*font-size: 2.4vw; */
}

    .oval-container-selfidentification {
        color: black;
        font-size: 3.6vw;
        width: 12vw;
        align-items: center;
        text-align: center;
    }


.oval-container-veracity {
    color: rgb(255, 255, 255);
}
.oval-container-humor {
    color: rgb(0, 0, 0);
}
.oval-container-approval {
    color: rgb(0, 0, 0);
}

/* dropdown for categories


        /* Dropdown Menu Styling */
        .dropdown2 {
            position: relative;
            display: inline-block;
            margin-top: -1.6vw;
            font-size: 5.2vw;
        }

        .dropdown-button2 {
            background-color: #fff;
            color: black;
            padding: 1.2vw 1.2vw;
            border: .16vw solid #ccc;
            cursor: pointer;
            margin-right: .9vw;
        }

        .dropdown-button2:hover {
            background-color: #cdcdcd;
        }

        .dropdown-content2 {
            display: none;
            position: absolute;
            padding: .4vw .4vw;
            margin-right: .3vw;
            background-color: #fff;
            min-width: 20.58vw;
            box-shadow: 0vw .629vw 1.258vw 0vw rgba(0,0,0,0.2);
            z-index: 20;
            font-size: 5.2vw;
        }

        .dropdown2:hover .dropdown-content2 {display: block;}

        .dropdown2 label:hover {
            background-color: #f1f1f1;
            display: block;
            padding: .3vw .3vw;
        }

        .dropdown-content2 label {
            display: block;
            padding: .3vw .3vw;
        }

input[type="range"] {
    touch-action: none;
    /* Other styles for your sliders */
}

.criteria_match {
    font-size: 3vw; 
    color: #888; 
    text-align: right;
}

.number_followers {
    text-align: right; 
    font-size: 3vw; 
    color: #444;
}


.togglePassword {
    width: 10vw;
    padding: .3vw;
    border: 1px black solid;
    border-radius: .93vw;
    background: #ffffff;
    color: rgb(0, 0, 0);
    font-size: 1.8vw;
    margin-left: 3.1vw;
} 


.follow {
    position: relative;
    margin-top: 0px;
    width: 14vw;
    padding: .3vw;
    border-radius: .93vw;
    background-color: #fff;
    border: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 3vw;
    margin-left: 3.1vw;
    z-index: 2;
} 


.unfollow {
    position: relative;
    margin-top: 0px;
    width: 14vw;
    padding: .3vw;
    border-radius: .93vw;
    background-color: #fff;
    border: 1px solid #ccc;
    color: rgb(255, 0, 0);
    font-size: 3vw;
    margin-left: 3.1vw;
    z-index: 2;
} 


    .currentPage {
        display: flex;
        width: 7.5vw; /* Sets a fixed width for each element */
        /* Optional: Add styling for visibility */
        height: 7.5vw;
        justify-content: center;
        align-items: center;
        background-color: rgb(80, 80, 80);
        color: white;
        border: 1px solid #ccc;
        border-radius: 1.5vw;
        text-align: center;
        padding: 1vw 0;
        box-sizing: border-box; /* Ensures padding/border are included in the 150px width */
        padding-bottom: 1vw;
        font-weight: bold;
    }


    .pageListContainer {
    display: flex; /* Enables flexbox layout */
    height: 9vw;
    justify-content: center; /* Horizontally centers the items within the container */
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap to the next line if the container is too narrow */
    /* Optional: Add some gap between items */
    gap: 3vw; 
    /* Optional: Add padding for better visual spacing */
    padding: 3vw;
    }

    .pageList {
        display: flex;
        width: 7.5vw; /* Sets a fixed width for each element */
        /* Optional: Add styling for visibility */
        height: 7.5vw;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 1.5vw;
        text-align: center;
        padding: 3vw 0;
        box-sizing: border-box; /* Ensures padding/border are included in the 150px width */
        padding-bottom: 3vw;
    }

    .pageList a {
        text-decoration: none;
        font-weight: bold;
        color: black;
        align-items: center;
    } 

    .pageList a:hover {
        background-color: rgb(80, 80, 80);
        color: white
    }

    
    .pageListContainer a {
        color: black;
        text-decoration: none;
        font-weight: bold;
        align-items: center;
    } 

    .pageListContainer a:hover {
        background-color: rgb(80, 80, 80);
        color: white
    }

.commentIcon {
    font-size: 2.5vw;
}

.commentIcon img {
    width: auto;
    height: 3vw;
}

.commentIcon table td img {
    width: auto;
    height: 3vw;
}

@media (min-width: 768px) {
    .card-container {
        grid-auto-flow: unset;
        grid-template-columns: 25vw 40vw 25vw; /* 3 equal columns on desktop */
        overflow-x: hidden; /* No horizontal scroll on desktop */
        scroll-snap-type: none;
    }

    .card {
        height: auto; /* Height adapts to content on desktop */
    }

    
    body {
        margin: 0;
        font-family: sans-serif;
        height: 100vh;
        display: flex;
        flex-direction: column; /* Main layout uses flexbox to manage header/content height */   
        font-family: 'Roboto', sans-serif;
        font-size: clamp(.3rem, 1vw + .3rem, 1.5rem);
    
    }

    .fixed-header {
                position: fixed; /* Fixes the header at the top */
                top: 0;
                left: .5vw;
                right: 0vw;
                margin-right: 0vw;
                margin-bottom: 2.57vw;
                width: 98%; /* Ensures 100% width */
                height: 3.72vw; /* Fixed height for the header */
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: .4vw;
                z-index: 10; /* Ensures the header stays on top */

                /* Apply the linear gradient as a background image */
                background: linear-gradient(to right, #0000ff, #ff0000) left bottom no-repeat;
                /* Constrain the background image size to just the bottom padding area */
                background-size: 100% 0.7vw; 
    }



    .main-area {
        font-family: 'Roboto', sans-serif;
        display: flex;
        justify-content: center;
        align-items: top;
        margin: 0;
        color: #ffffff;
        position: relative;
    }

    .login-form h1 {
        margin-bottom: .625vw;
        color: #333;
    }

    .login-form p {
        margin-bottom: 1.88vw;
        color: #666;
    }

    .input-group {
        margin-bottom: 1.25vw;
        text-align: left;
    }

    .input-group label {
        display: block;
        margin-bottom: .625vw;
        font-weight: bold;
        color: #555;
    }

    .input-group input {
        width: 100%;
        padding: .9375vw;
        border: .079vw solid #ddd;
        border-radius: .393vw;
        box-sizing: border-box; /* Ensures padding doesn't affect width */
        font-size: 1.25vw;
    }

    .input-group input:focus {
        outline: none;
        border-color: #9b59b6;
    }

    button {
        width: 100%;
        padding: .9375vw;
        border: none;
        border-radius: .393vw;
        background: #9b59b6;
        color: white;
        font-size: 1.375vw;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.7s ease;
        margin-top: 1.25vw;
    }

    button:hover {
        background: rgb(112, 157, 255);
    }

    .register-link {
        margin-top: 1.88vw;
        font-size: 1.125vw;
    }

    .register-link a {
        color: #9b59b6;
        text-decoration: none;
        font-weight: bold;
    }

    .register-link a:hover {
        text-decoration: underline;
    }

    .signup-form h2 {
        margin-bottom: .625vw;
        color: #333;
    }

    .signup-form p {
        margin-bottom: 1.88vw;
        color: #666;
    }

    .input-group {
        margin-bottom: 1.25vw;
        text-align: left;
    }

    .input-group label {
        display: block;
        margin-bottom: .625vw;
        color: #555;
    }

    .input-group input {
        width: 100%;
        padding: 0.94vw;
        border: 0.08vw solid #ddd;
        border-radius: .4vw;
        box-sizing: border-box; 
        font-size: 1.25vw; /* 1.25vw */
    }

    .input-group input:focus {
        outline: none;
        border-color: #71b7e6;
    }

    .signup-button {
        width: 100%;
        padding: .9375vw;
        border: none;
        border-radius: .393vw;
        background-color: #0f44b7;
        color: white;
        font-size: 1.375vw;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 1.88vw;
    }

    .signup-button:hover {
        background-color: #8e44ad;
    }

    .form-footer {
        margin-top: 1.88vw;
        font-size: 1.125vw;
        color: #555;
    }

    .form-footer a {
        color: #71b7e6;
        text-decoration: none;
    }

    .form-footer a:hover {
        text-decoration: underline;
    }

    .logothedial {
        margin-top: .4vw;
        font-family: 'Roboto','sans-serif';
        margin-left: 3.93vw;
        position: relative;
        align-items: top;
        font-size: 3.625vw;
        color: #333;
    }

    .rotator-container {
        position: absolute;
        width: 5.393vw; /* Adjust size as needed */
        height: 5.393vw;
        align-items: center;
        align-content: center;
        display: flex;
        justify-content: center;
    }

    /* Visually hide the actual input, but keep it accessible for screen readers/keyboard users */
    .rotator-container input[type="range"] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    /* This makes the hidden input cover the entire container for easy interaction */

    /* Style the custom visual knob */
    .knob {
        width: 80%;
        height: 80%;
        border-radius: 50%;
        background: #333;
        position: relative;
        display: flex;
        pointer-events: none; /* Allows clicks to pass through to the hidden input */
        box-shadow: 0 0 1.57vw rgba(0,0,0,0.5);
        transition: transform 0.1s linear; /* Smooth rotation transition */
        transform: rotate(135deg); /*initial rotation*/
    }

    /* Add a "tick" or indicator to the knob */
    .knob::after {
        content: "";
        width: .31vw;
        height: .8vw;
        background: #ff0000;
        position: absolute;
        top: .393vw; /* Position from the top edge */
        left: 50%;
        margin-left: -0.157vw; /* Center the tick */
        border-radius: 0.157vw;
    }


    .volume-display {
    color: white;
    font-size: 0.85vw;
    font-weight: bold;
    align-content: center;
    vertical-align: middle;
    position: absolute;
    /* Centered within the knob via flexbox on the knob container */
    }



    .volume-display-signup {
    color: rgb(90, 90, 90);
    font-size: 1.2vw;
    font-weight: bold;
    align-content: center;
    vertical-align: middle;
    position: relative;
    }


    .volume-display-signup table td {
    color: rgb(90, 90, 90);
    font-size: 1.2vw;
    font-weight: bold;
    align-content: center;
    vertical-align: middle;
    position: relative;
    }




    .volume-display2 {
    color: rgb(0, 0, 0);
    font-size: 0.85vw;
    font-weight: bold;
    align-content: center;
    vertical-align: middle;
    position: absolute;
    /* Centered within the knob via flexbox on the knob container */
    }


    /* Header Styling */
    .header {
        position: fixed; /* Fixes the header at the top */
        top: 0;
        left: .5vw;
        right: 0vw;
        margin-right: 0vw;
        margin-bottom: 1.57vw;
        width: 98%; /* Ensures 100% width */
        height: 2.72vw; /* Fixed height for the header */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.8vw;
        padding-top: 2vw;
        z-index: 10; /* Ensures the header stays on top */

        /* Apply the linear gradient as a background image */
        background: linear-gradient(to right, #0000ff, #ff0000) left bottom no-repeat;
        /* Constrain the background image size to just the bottom padding area */
        background-size: 100% 0.7vw; 
    }

        .header2 {
        position: relative; /* Fixes the header at the top */
        top: 0;
        left: .5vw;
        right: 0vw;
        margin-right: 0vw;
        margin-bottom: 1.57vw;
        width: 98%; /* Ensures 100% width */
        height: 2.72vw; /* Fixed height for the header */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.8vw;
        padding-top: 2vw;
        z-index: 10; /* Ensures the header stays on top */
    }


    .logo {
        font-size: 2.31vw;
        font-weight: bold;
    }

    /* Dropdown Menu Styling */
    .dropdown {
        position: relative;
        display: inline-block;
        margin-top: -1.6vw;
    }

    .dropdown-button {
        background-color: #fff;
        color: black;
        padding: .4vw 1.18vw;
        border: .079vw solid #ccc;
        cursor: pointer;
        margin-right: 1.57vw;
        min-width: 6vw; 
    }

    .dropdown-button:hover {
        background-color: #b5a3fc;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 1.57vw;
        background-color: #ffffff;
        min-width: 8.58vw;
        box-shadow: 0vw .629vw 1.258vw 0vw rgba(0,0,0,0.2);
        z-index: 20;
        font-size: 1.2vw;
    }

    .dropdown-content a {
        color: black;
        padding: .943vw 1.258vw;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown label:hover {
        background-color: #f1f1f1;
        display: block;
        padding: .3vw .3vw;
    }

    .dropdown-content label {
        display: block;
        padding: .3vw .3vw;
    }

    /* Main Container Styling */
    .main-container {
        display: flex;
        /* Margin top to prevent content overlay by the fixed header */
        margin-top: 5.72vw; 
        background-color: #ffffff;
        height: calc(100vh - 5.72vw); /* Full height minus header height */
            /* For Internet Explorer and Edge */
        -ms-overflow-style: none;
        /* For Firefox */
        scrollbar-width: none;
        /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
        overflow: auto;
    }

    /* Sidebar Styling */
    .sidebar {
        width:25vw; /* Fixed width for sidebars */
        background-color: #ffffff;
        padding: 1.57vw;
        overflow-y: auto; /* Scrollable if content exceeds height */
        box-sizing: border-box;
        /* position: fixed; is not needed here because the main-container has a fixed height and flex layout handles the positioning */
    }

    .sidebar-left {
            /* For Internet Explorer and Edge */
        -ms-overflow-style: none;
        /* For Firefox */
        scrollbar-width: none;
        /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
        overflow: auto;
    }

    
    .sidebar-left::-webkit-scrollbar {
        display: none;
    }


    .sidebar-right {
            /* For Internet Explorer and Edge */
        -ms-overflow-style: none;
        /* For Firefox */
        scrollbar-width: none;
        /* Ensure content that needs to scroll has a defined height/max-height and overflow: auto/scroll */
        overflow: auto;
    }
    
    .sidebar-right::-webkit-scrollbar {
        display: none;
    }

    /* Content Area Styling */
    .content {
        flex-direction: column; /* Stacks the boxes vertically */
        margin-top: 0vw;
        padding: 1.57vw;
        border-radius: 1vw;
        background-color: #ffffff;
        overflow-y: auto; /* Makes only the content area scrollable */
        box-sizing: border-box;
        gap: 2vw;
    }
            
    .session-box {
        background-color: #f5f5f5; /* Light gray background for the boxes #f5f5f5 */
        padding: 1.5vw;             /* Space inside the boxes */
        border-radius: 1vw;       /* Rounded corners */
        text-align: left;  
        margin-bottom: 2vw;
        font-size:1.2vw;
        position: relative;
        cursor: pointer; /* 2. Changes the cursor to a pointer for the entire div for better UX. */
    }

    /* Optional: Add hover effect to the entire card */
    .session-box:hover {
        background-color: #e0e0e0;
    }

    .reference-link {
        color: rgb(43, 36, 53);
    }

    .reference-link a {
        position: relative;
        z-index: 3; /* 6. Must be higher than the full-post-link z-index. */
        /* Add other styling for your specific links (color, underline, etc.) */
        text-decoration: none;
    }

    .reference-link a:hover {
        opacity: 50%;
    }

        
    .reference-link table a {
        position: relative;
        z-index: 3; /* 6. Must be higher than the full-post-link z-index. */
        /* Add other styling for your specific links (color, underline, etc.) */
        text-decoration: none;
    }

    .reference-link table tr a {
        position: relative;
        z-index: 3; /* 6. Must be higher than the full-post-link z-index. */
        /* Add other styling for your specific links (color, underline, etc.) */
        text-decoration: none;
    }

    .reference-link table td a {
        position: relative;
        z-index: 3; /* 6. Must be higher than the full-post-link z-index. */
        /* Add other styling for your specific links (color, underline, etc.) */
        text-decoration: none;
    }

    .full-post-link {
    position: absolute; /* 3. Positions the link overlay. */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* 4. Places this link above the rest of the content (except specific links). */
    /* Optional: can add display: block for older browser compatibility, though inset: 0 covers it now */
    }

    .comment-box {
        background-color: #ffffff; /* Light gray background for the boxes #f5f5f5 */
        padding: 1.5vw;             /* Space inside the boxes */
        border-radius: 1vw;       /* Rounded corners */
        text-align: left;  
        margin-bottom: 2vw;
        font-size:1.2vw;
        position: relative;
        z-index: 2;
    }

    /* slider to determine a range that will later be used as parameters for algorythnm*/

    .range-container {
    position: relative;
    width: 15.72vw; /* Adjust width as needed */
    height: 2.36vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: red;
    }

    .value-display {
    display: flex;
    justify-content: space-between;
    margin-top: 2.36vw;
    }

    /* drop down with checkmarks */

    .custom-select { 
        position: relative;
        width: 15.72vw; 
        border: .0786vw solid #ccc; 
        padding: .393vw; 
        font-size: 1.2vw;
        background: white;
    }

    .options { 
        position: absolute; 
        background: white; 
        border: .0786vw solid #ccc; 
        width: 100%; 
        z-index: 10; 
        display: flex; 
        flex-direction: column;  
        font-size: 1.2vw;
        color: #333;
    }

    .custom-select label { 
        padding: .393vw; 
        cursor: pointer; 
    }

    .custom-select label:hover { 
        background-color: #f0f0f0; 
    }

    .options:hover .custom-select {display: block;}

    /* Base styles for the input element */
    .pointy-slider {
    -webkit-appearance: none; /* Removes default WebKit/Blink styles */
    appearance: none;
    background: transparent; /* Makes the input container background transparent */
    cursor: pointer;
    width: 23.58vw; /* Adjust width as needed */
    height: 1.89vw;
    }

    /* Styling the track (optional, for consistency) */
    .pointy-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: .4vw;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
    }

    .pointy-slider::-moz-range-track {
    background: transparent;
    height: .4vw;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
    }

    /* Styling the pointy handle (thumb) */

    /* For Chrome, Safari, Edge (Blink/WebKit) */
    .pointy-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Removes default thumb style */
    appearance: none;
    width: 1.2vw; /* Adjust size as needed */
    height: 1.2vw;
    background: linear-gradient(to right, rgb(172, 172, 172), black, black);
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 60%); 
    /* Vertically center the thumb on the track */
    margin-top: -.4vw; 
    }

    /* For Firefox */
    .pointy-slider::-moz-range-thumb {
    -moz-appearance: none; /* Removes default thumb style */
    appearance: none;
    width:  1.2vw;
    height:  1.2vw;
    background: linear-gradient(to right, rgb(172, 172, 172), black, black);
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 60%);  
    border: none; /* Removes default Firefox border */
    margin-top: -.4vw; 
    }


    /* Base styles for the input element */
    .pointy-slider2 {
    -webkit-appearance: none; /* Removes default WebKit/Blink styles */
    appearance: none;
    background: transparent; /* Makes the input container background transparent */
    cursor: pointer;
    width: 23.58vw; /* Adjust width as needed */
    height:  1.2vw;
    }

    /* Styling the track (optional, for consistency) */
    .pointy-slider2::-webkit-slider-runnable-track {
    background: transparent;
    height: .4vw;
    border-radius: .393vw;
    margin-left: 0;
    padding: 0;
    }

    .pointy-slider2::-moz-range-track {
    background: transparent;
    height: .4vw;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
    }

    /* Styling the pointy handle (thumb) */

    /* For Chrome, Safari, Edge (Blink/WebKit) */
    .pointy-slider2::-webkit-slider-thumb {
    -webkit-appearance: none; /* Removes default thumb style */
    appearance: none;
    width:  1.2vw; /* Adjust size as needed */
    height:  1.2vw;
    background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(172, 172, 172));
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(100% 40%, 100% 100%, 50% 100%, 50% 0%); 
    /* Vertically center the thumb on the track */
    margin-top: 0; 
    }

    /* For Firefox */
    .pointy-slider2::-moz-range-thumb {
    -moz-appearance: none; /* Removes default thumb style */
    appearance: none;
    width: 1.5726vw;
    height: 1.5726vw;
    background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(172, 172, 172));
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(100% 0%, 50% 0%, 50% 100%, 100% 60%);
    border: none; /* Removes default Firefox border */
    margin-top: 0; 
    }

    /* Base styles for the input element */
    .pointy-slider-signup {
    -webkit-appearance: none; /* Removes default WebKit/Blink styles */
    appearance: none;
    background: transparent; /* Makes the input container background transparent */
    cursor: pointer;
    width: 23.58vw; /* Adjust width as needed */
    height: 1.89vw;
    padding: 0vw;
    }

    /* Styling the track (optional, for consistency) */
    .pointy-slider-signup::-webkit-slider-runnable-track {
    background: transparent;
    height: .4vw;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
    }

    .pointy-slider-signup::-moz-range-track {
    background: transparent;
    height: .4vw;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
    }

    /* Styling the pointy handle (thumb) */

    /* For Chrome, Safari, Edge (Blink/WebKit) */
    .pointy-slider-signup::-webkit-slider-thumb {
    -webkit-appearance: none; /* Removes default thumb style */
    appearance: none;
    width: 1.2vw; /* Adjust size as needed */
    height: 1.2vw;
    background: linear-gradient(to right, black, rgb(117, 117, 117), black);
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(25% 0%, 75% 0%, 75% 60%, 50% 100%, 25% 60%); 
    /* Vertically center the thumb on the track */
    margin-top: -.4vw; 
    }

    /* For Firefox */
    .pointy-slider-signup::-moz-range-thumb {
    -moz-appearance: none; /* Removes default thumb style */
    appearance: none;
    width:  1.2vw;
    height:  1.2vw;
    background: linear-gradient(to right, black, rgb(117, 117, 117), black);
    cursor: pointer;
    /* Creates a pointy shape (triangle pointing right) */
    clip-path: polygon(25% 0%, 75% 0%, 75% 60%, 50% 100%, 25% 60%);  
    border: none; /* Removes default Firefox border */
    margin-top: -.4vw; 
    }


    .pointyslidercontainer {
    position: relative;
    width: 15vw; /* Adjust width as needed */
    height: .4vw;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    background: linear-gradient(to right, blue, white, red);
    border-radius: .3144vw;
    }


    .slider-container {
    position: relative;
    width: 8.72vw;
    height: 2.36vw;
    }

    .slider-container input {
    /* Remove default styling and position absolutely */
    position: absolute;
    width: 100%;
    pointer-events: none; /* Allows clicks to pass through the input track to the one below, only the thumb is interactive */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    }

    /* Make only the thumbs interactive */
    .slider-container input::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    }

    .slider-container input::-moz-range-thumb {
    pointer-events: auto;
    -moz-appearance: none;
    appearance: none;
    }



    /* Style the track visually */
    .slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: .4vw;
    background: linear-gradient(to right, rgb(255, 0, 0), white, rgb(0, 0, 0));
    border-radius: .393vw;
    }

    .slider-track-like {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: .4vw;
    background: linear-gradient(to right, rgb(255, 0, 0), white, rgb(0, 167, 0));
    border-radius: .393vw;
    }

    .slider-track-politics {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: .4vw;
    background: linear-gradient(to right, rgb(0, 0, 255), white, rgb(255, 0, 0));
    border-radius: .393vw;
    }


    .slider-track-comedy {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: .4vw;
    background: linear-gradient(to right, rgb(119,119,199), rgb(254,210,49));
    border-radius: .393vw;
    }


    .slider-track-veracity {
    position: absolute;
    top: 50%;
    background: linear-gradient(to right, rgb(0,0,0), rgb(0, 168, 168));
    transform: translateY(-50%);
    width: 100%;
    height: .4vw;
    border-radius: .393vw;
    }




    .values-display {
    margin-top: .4vw;
    font-family: sans-serif;
    }


    .containergrid {
    display: grid;                   /* 1. Activate CSS Grid */
    grid-template-columns: 2vw 16vw 2vw; /* 2. Defines three equal-width columns */
    align-items: center;             /* 3. Vertically centers all child items */
    }

    .containergrid img {
        width: 2vw;
        height: 2vw;
        vertical-align: middle;
    }

    .item {
        text-align: center;
    }

    .group-border {
    border-bottom: .09vw solid #aaa; 
    }

    .rangeSelectors table {
        border-collapse: collapse;
    }

    .rangeSelectors table td  {
    font-size: 1.2vw;
    }


    .rangeSelectors table td img {
        width: 1.5vw;
        height: 1.5vw;
        vertical-align: middle;
    }


    /* CSS for the disabled/grayed out state */
    .disabled-element {
        opacity: 0.2;
        filter: saturate(0%);
    }



    .rotator-container-priorities {
        position: relative;
        width: 3.393vw; /* Adjust size as needed */
        height: 3.393vw;
        align-items: center;
        align-content: center;
        display: flex;
        justify-content: center;
    }

    /* Visually hide the actual input, but keep it accessible for screen readers/keyboard users */
    .rotator-container-priorities input[type="range"] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    /* This makes the hidden input cover the entire container for easy interaction */

    /* Style the custom visual knob */
    .knob-priorities {
        width: 80%;
        height: 80%;
        border-radius: 50%;
        background: #333;
        position: relative;
        display: flex;
        pointer-events: none; /* Allows clicks to pass through to the hidden input */
        box-shadow: 0 0 1.57vw rgba(0,0,0,0.5);
        transition: transform 0.1s linear; /* Smooth rotation transition */
        transform: rotate(135deg); /*initial rotation*/
        z-index: 1;
    }

    /* Add a "tick" or indicator to the knob */
    .knob-priorities::after {
        content: "";
        width: .23vw;
        height: .6vw;
        background: #00ff37;
        position: absolute;
        top: 0.17vw; /* Position from the top edge */
        left: 50%;
        margin-left: -0.157vw; /* Center the tick */
        border-radius: 0.157vw;
    }

    

    #knob-following {
        position: absolute;
        width: 3.393vw;
        height: 3.393vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-location {
        position: absolute;
        width: 3.393vw;
        height: 3.393vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-engagements {
        position: absolute;
        width: 3.393vw;
        height: 3.393vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }

    
    #knob-time {
        position: absolute;
        width: 3.393vw;
        height: 3.393vw;
        opacity: 0; /* Make invisible but clickable */
        cursor: pointer;
        z-index: 3; /* Sit on top of the knob */
        margin: 0;
    }


    .newPost {
        width: 95%;
        padding: .3375vw;
        border: 1px solid rgb(204, 204, 204);
        border-radius: .4vw;
        background: #ffffff;
        color: rgb(0, 0, 0);
        font-size: 1.2vw;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.7s ease;
        margin-top: 0.25vw;
        margin-bottom: 1.25vw;
        text-align: center;
    }

    .newPost a{
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
    .newPost:hover {
        background: rgb(182, 146, 255);
    }


    .input-newtext {
        margin-bottom: 1.25vw;
        text-align: left;
    }

    .input-newtext label {
        display: block;
        margin-bottom: .325vw;
        font-weight: bold;
        color: #555;
    }

    .input-newtext textarea {
        width: 100%;
        height: 6vw;
        padding: .9375vw;
        border: .079vw solid #ddd;
        border-radius: .393vw;
        box-sizing: border-box; /* Ensures padding doesn't affect width */
        font-size: 1.25vw;
    }

    .input-newtext textarea:focus {
        outline: none;
        border-color: #9b59b6;
    }

    .upload-label {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    .upload-label:hover {
        background-color: #0056b3;
    }


    .postImage img {
        width: 100%;
        height: auto;
        border: 1px solid rgb(211, 211, 211);
        box-sizing: border-box;
    }

    .postTime {
        font-size: .8vw;
        color: #aaa;
    }

    .postCheckedBox {
        font-size: 1.2vw;
        color: #aaa;
        position: relative;
    }

    .postCategories {
        position: relative;
        z-index: 2;
    }

    .postCategories img {
        width: 3vw;
        height: 3vw;
        margin-bottom: 0.5vw;
        margin-right: 0.5vw;
    }

    
.fixedHeight {
    max-height: 6vw; 
    overflow-y: hidden;
}



    .hidden-text {
    /* Hide the text initially */
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease; /* Smooth transition */
    position: absolute;
    margin-top: 3vw;
    margin-left: -2.5vw;
    font-size: 1vw;
    }

    /* Reveal the text when the trigger is focused */
    .trigger:focus + .hidden-text {
    opacity: 0.5;
    height: auto; /* Allow height to adjust */
    position: absolute;
    margin-top: 3vw;
    margin-left: -2.5vw;
    font-size: 1vw;
    }

    .photoThumb {
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 1vw;
    }

    @font-face {
    font-family: 'SegmentFont';
    /* src: url('../fonts/DSEG7Classic-Bold.woff') format('woff'),
        url('../fonts/DSEG7Classic-Bold.ttf') format('truetype'); */
        src: url('../fonts/dseg14-classic-latin-400-normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    .knob-container {
        position: relative;
        width: 5vw; /* Adjust size as needed */
        height: 5vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .knob-background-ideology {
        width: 100%;
        height: 100%;
        background-image: url("../images/ideologyKnob.png"); /* Replace with your image URL */
        background-size: cover;
        border-radius: 50%; /* Assumes a circular image */
        position: relative;
    }


    .knob-background-humor {
        width: 100%;
        height: 100%;
        background-image: url("../images/humorKnob.png"); /* Replace with your image URL */
        background-size: cover;
        border-radius: 50%; /* Assumes a circular image */
        position: relative;
    }


    .knob-background-approval {
        width: 100%;
        height: 100%;
        background-image: url("../images/approvalKnob.png"); /* Replace with your image URL */
        background-size: cover;
        border-radius: 50%; /* Assumes a circular image */
        position: relative;
    }


    .knob-background-veracity {
        width: 100%;
        height: 100%;
        background-image: url("../images/veracityKnob.png"); /* Replace with your image URL */
        background-size: cover;
        border-radius: 50%; /* Assumes a circular image */
        position: relative;
    }

    .knob-value {
        position: absolute;
        font-size: .629vw;  
        padding-top: .157vw;
        padding-bottom: .157vw;
        font-family: 'SegmentFont', monospace;
        color: rgb(255, 255, 255); /* Adjust color for readability */
        /* Center the text over the knob image */
        background-color: #666;
        border-radius: 20%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none; /* Allows mouse events to pass through the value display to the knob */
    }

    .knob-pointer {
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: .236vw; /* Width of the pointer */
        height: 2.2vw; /* Height of the pointer, adjusts how far it reaches from center */
        background-color: rgb(40, 40, 40); /* Color of the pointer */
        transform-origin: bottom center; /*bottom center; /* Pivot point for rotation */
        /* Initial rotation to the vertical 0 position */ 
        border-radius: 50%;
        /*border: 1px solid black;*/
    }

    input[type="checkbox"] {
    accent-color: #636363; /* This sets the checkbox color to a shade of blue */
    width: 1vw; /* Optional: Adjusts the size */
    height: 1vw; /* Optional: Adjusts the size */
    }

    .oval-container {
        border-radius: 2vw;
        background-color: #00ff37;
        padding-left: .7vw;
        padding-right: .7vw;
        padding-top: .2vw;
        padding-bottom: .2vw;
    }

    
    .oval-container-self {
        position: relative;
        border-radius: 1vw;
        padding-left: .7vw;
        padding-right: .7vw;
        padding-top: .2vw;
        padding-bottom: .2vw;
        margin-left: 1vw;
        border: 1px rgb(198, 198, 198) solid;
    }


    .oval-container-ideology {
        color: rgb(0, 0, 0);
        font-size: .8vw; 
    }

    .oval-container-selfidentification {
        color: black;
        font-size: 1.2vw;
        width: 4vw;
        align-items: center;
        text-align: center;
    }


    .oval-container-veracity {
        color: rgb(255, 255, 255);
        font-size: .8vw; 
    }
    .oval-container-humor {
        color: rgb(0, 0, 0);
        font-size: .8vw; 
    }
    .oval-container-approval {
        color: rgb(0, 0, 0);
        font-size: .8vw; 
    }

    /* dropdown for categories


            /* Dropdown Menu Styling */
            .dropdown2 {
                position: relative;
                display: inline-block;
                margin-top: -1.6vw;
                font-size: 1.2vw;
            }

            .dropdown-button2 {
                background-color: #fff;
                color: black;
                padding: .4vw .4vw;
                border: .079vw solid #ccc;
                cursor: pointer;
                margin-right: .3vw;
            }

            .dropdown-button2:hover {
                background-color: #cdcdcd;
            }

            .dropdown-content2 {
                display: none;
                position: absolute;
                padding: .4vw .4vw;
                margin-right: .3vw;
                background-color: #fff;
                min-width: 12.58vw;
                box-shadow: 0vw .629vw 1.258vw 0vw rgba(0,0,0,0.2);
                z-index: 1;
                font-size: 1.2vw;
            }

            .dropdown2:hover .dropdown-content2 {display: block;}

            .dropdown2 label:hover {
                background-color: #f1f1f1;
                display: block;
                padding: .3vw .3vw;
            }

            .dropdown-content2 label {
                display: block;
                padding: .3vw .3vw;
            }


    .criteria_match {
        font-size: 1vw; 
        color: #888; 
        text-align: right;
    }

    .number_followers {
        text-align: right; 
        font-size: .9vw; 
        color: #444;
    }


    .signup body {
        background: linear-gradient(135deg,#001aff,#ff0000);
        height: 100%;
        background-repeat: no-repeat; /* Prevents the gradient from repeating if content is still short */
        background-attachment: fixed; /* Ensures the background stays fixed while scrolling */
        font-family: 'Roboto', sans-serif;
        font-size: clamp(.3rem, 1vw + .3rem, 1.5rem);
    }

    .main-area {
        font-family: 'Roboto', sans-serif;
        display: flex;
        justify-content: center;
        align-items: top;
        margin: 0;
        color: #ffffff;
        position: relative; 
    }


    .login-container {
        background-color: #ffffff;
        padding: 2vw 3vw; /*2rem 3rem*/
        border-radius: .79vw; /*.786vw*/
        box-shadow: 0 .3vw 1.2vw rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 35.4vw;
        text-align: center;
        margin: 2rem; /* Add margin for small screens */
    }

    .login-form h1 {
        margin-bottom: .625vw;
        color: #333;
    }

    .login-form p {
        margin-bottom: 1.88vw;
        color: #666;
    }

    .input-group {
        margin-bottom: 1.25vw;
        text-align: left;
    }

    .input-group label {
        display: block;
        margin-bottom: .625vw;
        font-weight: bold;
        color: #555;
    }

    .input-group input {
        width: 100%;
        padding: .9375vw;
        border: .079vw solid #ddd;
        border-radius: .393vw;
        box-sizing: border-box; /* Ensures padding doesn't affect width */
        font-size: 1.25vw;
    }

    .input-group-slider input {
        padding: 0vw;
    }


    .input-group img {
        width: 1.5vw;
        height: 1.5vw;
        vertical-align: middle;
    }


    .input-group input:focus {
        outline: none;
        border-color: #9b59b6;
    }

    .register-link {
        margin-top: 1.88vw;
        font-size: 1.125vw;
    }

    .register-link a {
        color: #9b59b6;
        text-decoration: none;
        font-weight: bold;
    }

    .register-link a:hover {
        text-decoration: underline;
    }


    .signup-container {
        background-color: #ffffff;
        padding: 2vw 3vw; /*2rem 3rem*/
        border-radius: .79vw; /*.786vw*/
        box-shadow: 0 .3vw 1.2vw rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 35.4vw;
        text-align: center;
        margin: 2rem; /* Add margin for small screens */
    }

    .signup-form h2 {
        margin-bottom: .625vw;
        color: #333;
    }

    .signup-form p {
        margin-bottom: 1.88vw;
        color: #666;
    }

    .input-group {
        margin-bottom: 1.25vw;
        text-align: left;
    }

    .input-group label {
        display: block;
        margin-bottom: .625vw;
        color: #555;
    }

    .input-group input {
        width: 100%;
        padding: 0.94vw;
        border: 0.08vw solid #ddd;
        border-radius: .4vw;
        box-sizing: border-box; 
        font-size: 1.25vw; /* 1.25vw */
    }

    .input-group input:focus {
        outline: none;
        border-color: #71b7e6;
    }

    .checkbox-group {
        display: flex;
        align-items: center;
        margin-top: 1.25vw;
        font-size: 1.125vw;
        color: #555;
        text-align: left;
    }

    .checkbox-group input {
        margin-right: .625vw;
    }

    .checkbox-group a {
        color: #71b7e6;
        text-decoration: none;
    }

    .signup-button {
        width: 100%;
        padding: .9375vw;
        border: none;
        border-radius: .393vw;
        background-color: #0f44b7;
        color: white;
        font-size: 1.375vw;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 1.88vw;
    }

    .signup-button:hover {
        background-color: #8e44ad;
    }

    .form-footer {
        margin-top: 1.88vw;
        font-size: 1.125vw;
        color: #555;
    }

    .form-footer a {
        color: #71b7e6;
        text-decoration: none;
    }

    .form-footer a:hover {
        text-decoration: underline;
    }

    .togglePassword {
        width: 4vw;
        padding: .1vw;
        border: 1px black solid;
        border-radius: .393vw;
        background: #ffffff;
        color: rgb(0, 0, 0);
        font-size: .8vw;
        margin-left: 1.1vw;
    } 
    
    .follow {
        position: relative;
        margin-top: 0px;
        width: 4vw;
        padding: .1vw;
        border-radius: .393vw;
        background-color: #fff;
        border: 1px solid #ccc;
        color: rgb(0, 0, 0);
        font-size: .8vw;
        margin-left: 1.1vw;
        z-index: 2;
    } 

    .follow:hover {
        color: rgb(175, 175, 175);
        background-color: #fff;

    }

    .unfollow {
        position: relative;
        margin-top: 0px;
        width: 4vw;
        padding: .1vw;
        border-radius: .393vw;
        background-color: #fff;
        border: 1px solid #ccc;
        color: rgb(255, 0, 0);
        font-size: .8vw;
        margin-left: 1.1vw;
        z-index: 2;
    } 

    .unfollow:hover {
        color: rgb(175, 175, 175);
        background-color: #fff;

    }

    .currentPage {
        display: flex;
        width: 2.5vw; /* Sets a fixed width for each element */
        /* Optional: Add styling for visibility */
        height: 2.5vw;
        justify-content: center;
        align-items: center;
        background-color: rgb(80, 80, 80);
        color: white;
        border: 1px solid #ccc;
        border-radius: 0.5vw;
        text-align: center;
        padding: 1vw 0;
        box-sizing: border-box; /* Ensures padding/border are included in the 150px width */
        padding-bottom: 1vw;
        font-weight: bold;
    }


    .pageListContainer {
    display: flex; /* Enables flexbox layout */
    height: 3vw;
    justify-content: center; /* Horizontally centers the items within the container */
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap to the next line if the container is too narrow */
    /* Optional: Add some gap between items */
    gap: .5vw; 
    /* Optional: Add padding for better visual spacing */
    padding: 1vw;
    }

    .pageList {
        display: flex;
        width: 2.5vw; /* Sets a fixed width for each element */
        /* Optional: Add styling for visibility */
        height: 2.5vw;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 0.5vw;
        text-align: center;
        padding: 1vw 0;
        box-sizing: border-box; /* Ensures padding/border are included in the 150px width */
        padding-bottom: 1vw;
    }

    .pageList a {
        text-decoration: none;
        font-weight: bold;
        color: black;
        align-items: center;
    } 

    .pageList a:hover {
        background-color: rgb(80, 80, 80);
        color: white
    }

    
    .pageListContainer a {
        color: black;
        text-decoration: none;
        font-weight: bold;
        align-items: center;
    } 

    .pageListContainer a:hover {
        background-color: rgb(80, 80, 80);
        color: white
    }

    .commentIcon {
        font-size: 1vw;
        align-items: right;
        align-content: right;
        text-align: right;
    }

    .commentIcon img {
        width: auto;
        height: 1.5vw;
    }

    .commentIcon table td img {
        width: auto;
        height: 1.5vw;
    }

    
}