:root {
    --dark-blue: #264653;
    --orange: #F3A261;
    --white: #FFF;
    --turquoise: #2A9D8F;
    --red: #E76F51;
    --gray: #737572;
    --light-gray: #D7D7D7;
    --blue: #5A708D;
    --black: #000;
    --yellow: #E9C369;
}

body, html {
    min-width: 280px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", Lato, sans-serif;
}

@media (min-width: 280px) {
/* Styles for the smallest. most narrow screens */
/*This will be the basis for the CSS*/

    .element {
      height: calc(var(--vh, 1vh) * 100); /* Fallback for browsers that do not support CSS variables */
    }


    body, html {
        /*    height: calc(var(--vh, 1vh) * 100);*/
        height: 100%;
    /*    !!!*/
        margin: 0;
        padding: 0;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }

    header, footer {
    /*    background-color: var(--dark-blue);*/
        color: var(--white);
        align-items: center;
        text-align: center;
        padding: 0;
        width: 100%;
    }

    header {
        display: flex;
        flex-grow: 0;
        flex-direction: row;
        width: 94%;
        margin: 1vh 3% 0;
        justify-content: space-between;
    }

    footer {
        margin-top: 0.25vh;
        flex-grow: 0;
        justify-content: space-between;
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        background-color: var(--dark-blue);
    }

    header img {
        height: 5vh;
        width: auto;
        margin: 0.5vh 0;
    }

    /*.main-container {
        display: flex;
        flex-grow: 10;
        position: relative;
        margin-top: 0;
        padding-top: 0;
        position: relative;
    }
    */

    .primary-content {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
    /*    height: 100%;*/
    }

    .card-container {
        display: flex;
    /*    flex-grow: 5;*/
        flex-grow: 1;
        flex-direction: column;
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 5px;
        position: relative;
    }

    #signin-overlay {
        padding: 15%;
        margin: 10px 0;
    }

    #signin-text {
        justify-content: center;
    }

    .card-text {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: fit-content;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    /*    height: 100%;*/
    /*    width: 100%;*/
        margin: 5px;
    }

    #done-card-text {
        display: flex;
        height: auto;
        flex-grow: 1;
        margin: auto;
        padding: 5vw;
    }

    .spinner {
        position: absolute;
        left: calc(50% - 25px);
        top: calc(50% - 25px);
        z-index: 999;
        border: 5px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 5px solid var(--turquoise);
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }

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

    .bottom-bar, .top-bar {
        color: var(--white);
        align-items: center;
        text-align: center;
        padding: 0;
        width: 100%;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
    }

    .top-bar {
        justify-content: flex-start;
        align-items: center;
    }

    .bottom-bar {
        justify-content: space-around;
        align-items: center;    
    }


    .vote-bar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    /*    color: var(--white);*/
        width: 94%;
        margin: 1.5vh 3%;
    }

    .bottom-text {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 0.5EM;
        margin: 0.25EM auto;
        text-align: center;
        color: var(--light-gray);
    }


    .page-selector {
        display: flex;
    }

    .top-logo {
        display: flex;
        align-items: center;
        flex-shrink: 2;
    }

    .menu {
        display: flex;
        cursor: pointer;
        background-color: var(--white);
        border-style: none;
    }


    .archive-main {
        display: flex;
        flex-shrink: 1;    
        position: relative;
        margin-top: 0;
        padding-top: 0;
    }

    .archive-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1024px;
        margin: 0 auto;
        overflow-y: auto;
        flex-grow: 1;
    }

    .archive-viewer {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        background-color: var(--white);
    /*    height: auto;*/
    /*    max-height: -webkit-fill-available;*/
        margin: 0;
        padding-bottom: 5px;
    /*    padding: 5px;*/
    /*    border: 1px solid var(--black);*/
        border-radius: 3px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional for a drop shadow effect */
    }

    #signin-menu {
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        background: rgba(0, 0, 0, 0.5);
    }

    .empty-archive-title {
        display: flex;
        flex-grow: 10;
        padding: 10px;
        text-align: center;
        font-size: 1.5EM;
    }

    .empty-archive-text {
        display: flex;
        flex-grow: 10;
        min-height: 30%;
        padding: 10px;
        text-align: left;
        font-size: 1.2EM;
    }

    .viewer-content {
        display: flex;
        flex-grow: 1;
        position: relative;
        flex-direction: column;
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 5px;
    /*    max-height: 70vh;*/
        overflow-y: hidden;
    }

    .fixed-archive-container {
        position: sticky;
        top: 0; /* Adjust as needed */
        z-index: 10; /* Higher than the scrollable content */
        background: var(--white); /* So it doesn't become transparent when scrolling */
    }

    .scrollable-archive-container {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        margin-top: 0;
        height: calc(100% - 85px);
    }

    .article {
        display: flex;
        background-color: white;
        padding: 10px;
        height: 150px;
        align-items: center;
    }

    .article:nth-child(even) {
        background-color: #F6F6F6;
    }

    .empty-article-text {
        display: flex;
        flex-grow: 5;
        height: auto;
        margin: 5% 10%;
        flex-direction: column;
        overflow: hidden;
    }

    .archive-item {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;    
        top: 0;
        left: 0%;
        margin: auto;
        align-items: center;
    /*    background-color: var(--white);*/
        border-color: var(--dark-blue);
        overflow: hidden;
        overflow-y : hidden;
    }

    .article-text {
        flex: 0 0 70%;
        padding-right: 10px; 
        border-style: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--black);
        font-weight: normal;
    }

    .article-title {
        display: flex;
        align-items: center;
    }

    .title-text, title-text a, .title-text-bookmarked, .title-text-trashed {
        font-size: 12px;
        font-weight: normal;
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: calc(12px * 2.5 + 5px); /* 12px (font-size) multiplied by 2 lines + a little buffer (5px) */
    }

    .title-text-bookmarked {
        font-weight: bold;
        color: var(--black);
    }

    .archive-title {
        font-size: 16px;
        font-weight: bold;
        color: var(--black);
        text-decoration: none;
    }

    .archive-title-bookmarked {
        font-size: 16px;
        font-weight: bolder;
        color: var(--black);
        text-decoration: none;
    }

    .archive-title-trashed {
        font-size: 16px;
        font-weight: normal;
        color: var(--gray);
        text-decoration: none;
    }

    .archive-meta {
        display: flex;
        flex-direction: row;
        font-size: 12px;
        color: var(--gray);
    }

    .archive-summary {
        font-size: 14px;
        text-decoration: none;
        color: var(--black);
        margin: auto;
        max-height: 35vh;
    }

    .archive-summary-bookmarked {
        font-size: 14px;
        text-decoration: none;
        color: var(--black);
        margin:auto;
        max-height: 35vh;
    }

    .archive-summary a, .archive-summary-bookmarked a {
        text-decoration: underline;
        color: var(--dark-blue);
    }

    .archive-summary-trashed {
        font-size: 14px;
        text-decoration: none;
        color: var(--gray);
    /*    margin:auto;*/
        max-height: 35vh;
    }

    .bookmark-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    .article-meta {
        font-size: 10px;
        color: var(--gray);
        margin: 5px 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(10px * 1.5 + 3px); /* 12px (font-size) multiplied by 2 lines + a little buffer (5px) */
    }

    .article-summary, .article-summary a, .article-summary-trashed {
        font-size: 10px;
        text-decoration: none;
    /*    color: var(--dark-blue);*/
        margin:auto;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: calc(10px * 5 + 10px); /* 12px (font-size) multiplied by 2 lines + a little buffer (5px) */
    }


    .title-text-trashed, .article-summary-trashed {
        font-weight: normal;
        color: var(--gray);
    }

    .numbered-item {
        display: inline-block; /* or 'inline' depending on desired spacing and alignment */
    }

    .numbered-circle {
        display: inline-block;
        width: min(calc(16px + 1vh), 20px);
        height: min(calc(16px + 1vh), 20px);
        line-height: min(calc(16px + 1vh), 20px);
        border-radius: 50%;
        background-color: var(--orange);
        border-color: var(--white);
        border-style: solid;
        border-width: 1px;
        color: var(--orange);
        text-align: center;
        margin-right: 2px;
    /*    font-size: min(calc(12px + 1vh), 16px)*/
    }

    .bullet {
        display: inline-block;
        width: min(calc(8px + 1vh), 8px);
        height: min(calc(8px + 1vh), 8px);
        line-height: min(calc(12px + 1vh), 12px);
        border-radius: 50%;
        background-color: var(--black);
        border-color: var(--white);
        border-style: solid;
        border-width: 2px;
        margin-right: 3px;
        margin-top: 5px;
        vertical-align: 0px;
    }

    .article-image, .article-image-trashed {
        flex: 0 0 30%;
        border-style: hidden;
        height: 90%; /* ensures the container takes up the full height of its parent */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .article-image img, .article-image img a {
        border-radius: 3px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    .article-image-trashed img, .article-image-trashed img a {
        border-radius: 3px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: grayscale(100%) opacity(30%);
    }


    .search-box {
        display: flex;
        position: relative;
        width: 100%;
    }

    .search-input {
        width: 96vw;
        margin: 1vh 3vw;
        padding: 10px 40px 10px 35px;
        border: 1px solid #F6F6F6;
        border-radius: 3px;
        box-sizing: border-box;
        background-color: #F6F6F6;
        font-size: 16px;
        outline: none;
    }

    .search-icon {
        position: absolute;
        left: 3vw;
        margin-left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .stop-search-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .archive-view-options {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    .toggle-deleted-items {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px;
        color: var(--black);
    }

    .toggle-deleted-items input[type="checkbox"] {
        width: 1em;
        height: 1em;
        margin-right: 5px; /* Space between checkbox and label */
    }

    .toggle-deleted-items input[type="checkbox"]:checked {
        accent-color: var(--light-gray);
    }

    .toggle-deleted-items label {
        margin: 0; /* Remove default margin */
        cursor: pointer; /* Change cursor to pointer */
    }

    .sort-button {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Aligns children (text and icon) to the right */
        padding: 10px; /* Add padding as needed */
    }

    .sort-text {
        margin-right: 10px; /* Space between the text and the icon */
        /* Additional styling as needed */
    }

    .sort-icon {
        /* No changes needed, but ensure it's the correct size */
        width: 24px; /* Example size, adjust as needed */
        height: 24px; /* Example size, adjust as needed */
        cursor: pointer;
    }

    .page-selector {
        display: flex;
    }

    .top-logo {
        display: flex;
        align-items: center;
        flex-shrink: 2;
    }

    .current-page {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        font-family: 'Lato', sans-serif;
        color: var(--dark-blue);
        font-size: 2EM;
        margin: 0 4vw;
    }

    .page-name {
        display: flex;
        margin: 0 0.2vw;
    }

    .shared-card {
        color: var(--black);
    }


    #card-counter {
        font-size: 0.7EM;
        color: var(--orange);
    }

    .hamburger-menu, .user-menu {
        text-decoration: none; /* Ensures no underline on hover/focus/active */
        color: inherit; /* Optional: can set a specific color for hover/focus/active state */
        background: none; /* Ensures no background change on hover/focus/active */
        border: none; /* Ensures no border change on hover/focus/active */
    }


    .user-menu {
        background-color: var(--white);
        color: var(--gray);
        line-height: 48px;
        padding: 5px;
        width: auto; /* Adjust width as needed */
        height: auto;
        position: absolute;
        top: 7vh;
        right: 2.25%;
        z-index: 999;
        border: 1px solid var(--light-gray);
        border-radius: 3px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional for a drop shadow effect */
    }

    .user-menu a {
        text-decoration: none;
        color: var(--dark-blue);
    }

    hr {
        border: 0;
        height: 3px; 
        background-color: var(--light-gray);
        width: 95%; 
        margin: auto; 
    }

    .menu-icon {
        display: flex;
        cursor: pointer;
    /*    background-color: var(--white);*/
    /*    border-style: none;*/
    /*    outline: none; /* This removes the outline */*/
        padding: 0;
    }

    .menu-icon img {
    /*    padding: 0.1vh 0;*/
        border-radius: 0;
    /*    margin: 0 2vw;*/
        width: auto;      /* Allows the height to adjust automatically to maintain aspect ratio */
        max-height: 100%;  /* Ensures the image doesn't exceed the container's height */
    /*    flex-shrink: 1;    /* Allows the image to shrink if necessary */*/
    }

    .menu-icon:focus {
        outline: none;
    }

    .main-menu {
        background-color: var(--white);
        line-height: 48px;
        padding: 5px;
        width: auto; /* Adjust width as needed */
        height: auto;
        position: absolute;
        top: 7vh;
        right: 2.25%;
        z-index: 999;
        border: 1px solid var(--light-gray);
        border-radius: 3px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional for a drop shadow effect */
    }

    .main-menu a {
        text-decoration: none;
        color: var(--dark-blue);
    }

    .menu-item, .menu-username {
        display: flex;
        align-items: center; /* This will vertically center the icon with the text */
        color: var(--dark-blue);
        text-decoration: none;
        padding: 5px 10px; /* Adds padding inside each menu item */
        text-align: left; /* Aligns text to the left */
    }

    .menu-username {
        color: var(--gray);
    }

    .menu-icon-small {
        flex-shrink: 0; /* Prevents the icon from shrinking */
        height: 14px;
        width: 14px;
        margin-right: 8px; /* Space between the icon and text */
    }

    .input-area {
        color: var(--dark-blue);
        padding: 2%;
        margin-bottom: 0.5vh;
        margin-top: 0.5vh;
        width: 100%;
        display: flex;           /* Set this container as a flex container */
        flex-wrap: wrap;         /* Allow items to wrap onto multiple lines */
        justify-content: center; /* Center the items horizontally */
    }

    .input-line {
    /*    max-width: 600px;
        min-width: 200px;*/
        width: 100%;
        margin: 0.5vh;
        padding: 0.25vh;
        border-radius: 5px;
        border-style: solid;
        font-size: max(calc(8px + 2vw), 16px);
        background-color: var(--white);
        border-width: 1px;
    }

    .submit-area {
        width: 100%;
        padding: 2%;
        display: flex;            /* Set as flex container */
        justify-content: center;  /* Horizontally center children */
        align-items: center;      /* Vertically center children (this is optional if you only want horizontal centering) */
    }

    .signup-btn {
        height: auto;
        font-size: min(calc(12px + 2vw), 16px);
        padding: 0.5vh 1vw;
        max-width: 600px;
        min-width: 200px;
        width: 100%;
        margin: auto;
        font-weight: 400;
        background-color: var(--turquoise);
        color: var(--white);
        text-transform: uppercase;
        border-radius: 5px;
        border-style: none;
        text-decoration: none;
        cursor: pointer;
    }

    .signup-btn:hover {
      font-weight: 700;
    }

    .all-done {
        display: flex;
        height: calc(100vh - 100px);
        margin: 1.5vh;
        align-items: center;
        background-color: var(--white);
        border-radius: 20px;
        text-align: center;
        font-size: min(calc(24px + 2vw), 48px);
        font-weight: bolder;
        color: var(--turquoise);
    }

    .under-construction {
        display: flex;
        height: calc(100vh - 100px);
        margin: 1.5vh;
        align-items: center;
        background-color: var(--white);
        border-radius: 20px;
        text-align: center;
        font-size: min(calc(24px + 2vw), 48px);
        font-weight: bolder;
        color: var(--red);
    }

    .cards {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 94%;
        height: 100%;    
        top: 0;
        left: 3%;
        margin: auto;
        border-radius: 3px;
        border-width: 1px;
        border-style: solid;
        align-items: center;
        background-color: var(--white);
        border-color: var(--dark-blue);
        overflow: hidden;
        transition: transform 0.5s ease-out, left 0.5s ease-out, top 0.5s ease-out;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); /* Optional for a drop shadow effect */
    }

    #push-card {
        box-shadow: none;
        border-width: 2px;
        border-color: var(--orange);
    }

    .swiping {
        transition: top 0.5s ease-out, left 0.5s ease-out, transform 0.5s ease-out;
    }

    .headline, .headline-done, .headline-lp, .headline-success {
        height: auto;
        overflow: hidden;
        padding: 0; 
        margin: 5px;
        margin-top: 0px;
        flex-shrink: 0;
    }

    .headline {
        background-color: var(--white);
    }

    .headline-row, .headline-row-done, .headline-row-lp, .headline-row-success {
        flex: 1 1 auto; 
        padding-top: 0px;
        line-height: 1.3; 
        text-align: center;
    }

    #this-just-in, #this-just-in a {
        background-color: var(--orange); 
        color: var(--black); 
        padding: 0 5px;
    }

    #welcome-headline-row {
        margin-top: 2vh;
        color: var(--turquoise);
    }

    #welcome-summary-block {
        color: var(--gray);
    }

    .headline-block {
        display: flex;
        flex-direction: column;
        position: relative;
        height: auto;
        overflow: hidden;
        padding: 0; 
        margin: 5px;
        margin-top: 0px;
        flex-shrink: 0;
    /*    flex-grow: 0;    */
    }

    .headline-block a {
        outline: none;
        text-decoration: none;
    }

    .tutorial-top-text, .tutorial-bottom-text {
        display: flex;
        flex-grow: 2;
        flex-direction: column;
        position: relative;
        height: auto;
        overflow: hidden;
        padding: 0; 
        margin: 5px;
        margin-top: 0px;
        flex-shrink: 0;    
    /*    background-color: var(--white);*/
        width: 100%;
        padding: 1vh 5vw;
    }

    .tutorial-page-number {
        width: 100%;
        background-color: var(--orange);
    /*    text-decoration: underline;*/
        text-align: center;
        margin-top: 2vh;
        margin-bottom: 3vh;
        color: var(--white);
        padding: 1vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 0;
        justify-content: space-between;
    }

    .tutorial-number {
        display: flex;
    }

    .tutorial-skip {
        display: flex;
        color: var(--gray);
        font-size: 0.8EM;
        align-items: center;
    }

    .tutorial-page-headline {
        font-size: 1.3EM;
        font-weight: bolder;
        align-items: center;
        color: var(--orange);
        display: flex;
        flex-direction: row;
        flex-grow: 3;
    }

    .tutorial-summary {
        font-weight: normal;
    /*    font-size: 1.2EM;*/
        color: var(--dark-blue);
        display: flex;
        flex-grow: 3;
        flex-direction: column;
        align-items: flex-start;
    }

    .tutorial-instructions {
        font-weight: bold;
        color: var(--orange);
        display: flex;
        align-items: center; /* Align items in a line */
        text-align: center;
    }

    .tutorial-instructions input[type="checkbox"] {
        /* Adjust the size of the checkbox */
        width: 1em;  /* Adjust as needed */
        height: 1em; /* Adjust as needed */
        margin-right: 5px; /* Space between checkbox and label */
    }

    .tutorial-instructions input[type="checkbox"]:checked {
        /* Custom styles for checked state */
        accent-color: var(--orange);
    }

    .tutorial-instructions label {
        margin: 0; /* Remove default margin */
        cursor: pointer; /* Change cursor to pointer */
    }

     
    .headline-row {
        display: flex;
        color: var(--black);
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        align-items: center;
        font-size: min(calc(14px + 1vh), 18px);
        margin: 1vh 1vw 1vh 1vw;
        text-align: left;
    }

    .headline-row-lp {
        padding: 2vh 4vw;
        color: var(--dark-blue);
        display: flex;
        flex-grow: 1;
        height: auto;
        flex-direction: column;
        justify-content: center;
        font-size: min(calc(16px + 0.5vw), 24px);
        font-weight: 500;
        line-height: 1.5EM;
    }

    .headline-row a {
        color: var(--black);
        text-decoration: none;
        cursor: pointer;    
    }

    #landing-page {
        font-weight: 400;
        background-color: var(--white);
        color: var(--dark-blue);
        border-style: solid;
        border-width: 2px;
        border-color: var(--dark-blue);
        box-shadow: none;
    }

    .source-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: var(--orange);
        font-size: min(calc(18px + 1.5vw), 24px);
        margin: 3px 0;
    }

    .date, .source {
        display: flex;
        font-size: 1.6vh;
        color: var(--gray);
    /*    text-shadow: 1px 2px 2px var(--white);*/
        padding: 0.5vh 1vw;
    }

    .source {
        display: flex;
        align-items: center;
        color: var(--dark-blue);
        cursor: pointer;
    }

    .source img {
        height: 1.8vh;
        width: 1.8vh;
        margin-left: 2px;
    }

    .source:hover {
        font-weight: bold;
    }

    .source a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--dark-blue);
        width: 100%;
    }

    .card-head {
        width: 100%;
    }

    .summary-block, .form-block, .special-summary-block {
        display: flex;
        flex-grow: 0;
        flex-direction: column;
        align-items: flex-start;
        color: var(--gray);
        padding: 0 2.5vw;
        margin-bottom: 1vh;
        font-weight: 300;
        font-size: min(calc(12px + 1vh), 16px);
    }

    .special-summary-block {
        max-height: none;
    }

    .fortune-cookie {
        display: flex;
        flex-grow: 1;
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
    /*    background-image: url("https://getglance.ai/img/paper1.jpg");*/
        border: 1px solid var(--black);
        border-radius: 5px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        margin: 3vh 5vw 6vh;
        padding: 3%;
    /*    min-width: 80%;*/
    }

    .headline-row-done {
        color: var(--turquoise);
        font-size: min(calc(24px + 2vw), 32px);
        font-weight: bold; 
    }

    .headline-row-success {
        color: var(--turquoise);
        font-size: min(calc(12px + 1.5vw), 16px);
    }

    #done-card, #finished-share-card {
        display: flex;
        flex-direction: column;
        border: hidden;
        box-shadow: none;
    }

    #success-card {
        background-color: var(--white);
        color: var(--orange); 
        border: solid 2px white;        
    }

    .content, .content-done, .content-success {
        flex-grow: 1;  /* Allows this section to grow to fill available space */
        overflow: hidden;
    /*    overflow-y: hidden; 
        overflow-x: hidden;*/
        position: relative;
        background-color: var(--white);
        padding: 0;
        border-radius: 8px;
    }

    .content-done {
        background-color: var(--dark-blue);
    }

    .top-on-image-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 50%;
    /*    background-color: rgba(0,0,0,0.2);*/
        justify-content: space-between;
        align-items: top;
        border-radius: 8px 8px 0 0;
        position: absolute;
        top: 0;
        margin: 0;
        padding-top: 0.5vh;
        font-size: min(calc(12px + 1vw), 14px);
    }

    .bottom-on-image-row {
        display: flex;
        width: 100%;
        height: 50%;
    /*    background-color: rgba(0,0,0,0.2);*/
        border-radius: 0 0 8px 8px;
        position: absolute;
        align-items: flex-end;
        bottom: 0;
        margin: 0;
        padding: 0.5vh;
        font-size: min(calc(8px + 0.5vw), 12px);
    }

    .keywords {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-end;
    }

    .keyword {
        display: flex;
        color: var(--dark-blue);
        background-color: var(--light-gray);
        padding: 0.25vh;
        margin: 0.25vh;
        border-radius: 4px;
    }

    .categories {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: normal;
    }

    .cat-news, .cat-social, .cat-finance {
        color: var(--white);
        padding: 0.25vh;
        border-radius: 4px;
        margin: 0 1vw;

    }

    .cat-news {
        background-color: var(--yellow);
    }

    .cat-social {
        background-color:  #FAD7D7;
    }

    .cat-finance {
        background-color: #2A9D3F;
    }


    .on-image-button {
        height: 5vh;
        width: 5vh;
        margin: 1vh 1.5vh;
        border-radius: 50%;
        border-style: solid;
        border-color: var(--dark-blue);
        border-width: 1px;
        background-color: var(--white);
    }

    .on-image-button img{
        max-height: 100%; /* make sure the image doesn't exceed the container */
        max-width: 100%;
        padding: 0.5vh;
        object-fit: cover;
    }

    .top-wrapper, .top-wrapper-done, .bottom-wrapper{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255,255,255,0.5);
        border-radius: 8px 8px 0 0;
    }

    .logo {
        display: flex;
        align-items: center;
        height: 2.5vh;
        max-width: 50vw;
        flex-shrink: 1;
        border-radius: 0;
    }

    .logo img {
        padding: 0.1vh 0;
        border-radius: 0;
        margin: 0 2vw;
        width: auto;      /* Allows the height to adjust automatically to maintain aspect ratio */
        max-height: 100%;  /* Ensures the image doesn't exceed the container's height */
        flex-shrink: 1;    /* Allows the image to shrink if necessary */
    }

    /*.graphic-block, .top-graphic-block, .center-graphic-block, .bottom-graphic-block {*/

    .card-graphic {
        position: relative;
        display: flex;
        flex-grow: 1;
    /*    min-height: 20vh;*/
        height: 30%;
        width: 100%;
    }

    .graphic-block {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    /*    min-height: 20vh;*/
        border-style: solid;
        border-width: 0;
        border-color: var(--turquoise);
        border-radius: 0;
        margin: 0;
        background-repeat: no-repeat; /* Ensures the image doesn't repeat */
        background-size: cover; /* Makes sure the image covers the entire viewport */
        background-position: center center; /* Centers the image in the viewport */  
        position: relative;
    }


    .bottom-graphic-block {
        display: flex;
        flex-grow: 0;
        align-items: center; /* Center items vertically */
        justify-content: flex-end; /* Center items horizontally */
        width: 100%; /* Set the width of the container */
        overflow: hidden; /* Hide any overflow */
    }

    .bottom-graphic-block img {
        display: flex;
        height: 8vh;
        width: 100%;
        justify-content: flex-end;
    }

    .center-graphic-block {
        display: flex;
        flex-grow: 0;
        align-items: center; /* Center items vertically */
        justify-content: center; /* Center items horizontally */
        width: 100%; /* Set the width of the container */
        overflow: hidden; /* Hide any overflow */
    }

    .center-graphic-block img {
        display: flex;
        height: 15vh;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    .top-graphic-block {
        display: flex;
        flex-grow: 0;
        align-items: center; /* Center items vertically */
        justify-content: flex-start; /* Center items horizontally */
        width: 100%; /* Set the width of the container */
        overflow: hidden; /* Hide any overflow */
    }

    .top-graphic-block img {
        display: flex;
        height: 8vh;
        width: 100%;
        justify-content: flex-start;
    }

    #done-image {
        flex-grow: 3;
        border-color: var(--turquoise);
        border-width: 3px;
    }

    #error-image {
        flex-grow: 3;
        border-style: none;
        border-color: var(--red);
        border-width: 2px;
        min-height: 25vh;
    }

    .image, .image-success {
        height: 18vh;
        border-style: solid;
        border-width: 0;
        border-color: var(--turquoise);
        border-radius: 8px;
        background-repeat: no-repeat; /* Ensures the image doesn't repeat */
        background-size: cover; /* Makes sure the image covers the entire viewport */
        background-position: center center; /* Centers the image in the viewport */
    }

    .image-success {
        height: 40vh;
        border-radius: 50%;
    }

    .image-done, .image-lp, .image-tutorial-top, .image-tutorial-bottom {
        height: 120px;
        flex-grow: 1;
        display: flex;
        justify-content: center; 
        align-items: center; 
    }

    .image-lp {
        margin: 2vh 0;
    }

    .image-tutorial-top, .image-tutorial-bottom {
        min-height: 3vh;
    }

    .image-tutorial-bottom {
        align-items: flex-end;
    }


    .image-done img, .image-lp img {
        max-height: 100%; /* make sure the image doesn't exceed the container */
        width: auto;
        max-width: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-width: 3px;
        border-color: var(--dark-blue);
    }


    .image-lp img {
        border-radius: 1vh;
        width: 100%;
        height: auto;
        max-height: 100%; /* make sure the image doesn't exceed the container */
        max-width: 100%;
        object-fit: cover;
    }

    .image-tutorial-top img, .image-tutorial-bottom img {
        border-radius: 1vh;
        width: 100%;
        height: auto;
        max-height: 100%; /* make sure the image doesn't exceed the container */
        max-width: 100%;
        object-fit: cover;   
    }

    .summary {
        color: var(--dark-blue);
        padding: 2%;
        margin-bottom: 1.5vh;
    }


    .link-line {
        width: 100%;
        margin-bottom: 0.25vh;
        padding: 1vh 1vw;
    }

    .link-button {
        border-style: solid;
        border-width: 1px;
        border-color: var(--black);
        border-radius: 5px;
        padding: 0.25vw;
        background-color: transparent;
        margin-left: auto;
        margin-right: auto;
        display: block; 
        margin-bottom: 1.5vh;
        width: 100%;
    }

    .link-text {
        background-color: var(--white);
        color: var(--black);
        cursor: pointer; 
        text-decoration: underline;
    }

    .link-text:hover {
        font-weight: bold;
    }

    .read-time {
        color: var(--black);
        font-size: 0.8EM;
    }

    .item-options, .item-options-done {
        height: 8vh;
        width: 96%;
    /*    height: 70px;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2px solid var(--light-gray);
        border-radius: 0px 0px 20px 20px;
        padding: 0.5vh 0.5vw;
        color: var(--light-gray);
        flex-shrink: 0;
    }

    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        color: var(--white);
        width: 94%;
        margin: 1.5vh 3%;
    /*    width: 100%;*/
    /*    margin: 1vh 0 2vh 0;*/
    /*    max-height: 6vh;*/
    }

    /* Initial hidden state */
    .navigation-hidden {
        transform: translateY(100%);
    }

    .copyright {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 1vh;
        font-size: min(calc(6px + 1vw), 8px);
    }

    .option-button {
        height: 4vh;
        width: 4vh;
        border-color: var(--dark-blue);
        border-radius: 50%;
        border-width: 1px;
        border-style: solid;
        padding: 0.25vh 0.25vw;
        margin: 0.2vw;
        cursor: pointer;     /* Cursor style */
        background-color: transparent; 
    }

    .option-button:focus, .option-button:active {
      outline: none;
    }

    .option-button-big, .option-button, .option-button-top {
        position: relative;
        background-position: center;
        background-size: 67%;
        background-repeat: no-repeat;
        width: 15vw;
        height: 15vw;
        max-width: 32px;
        max-height: 32px;
        border-style: none;
        border-radius: 50%;
        padding: 0;
        cursor: pointer;
    }

    .option-button-big:active, .option-button-big:focus, .option-button:active, .option-button:focus {
      outline: none;
    }

    .option-button-top {
        border-style: solid;
        border-width: 2px;
        border-color: var(--dark-blue);

    }

    .button-default {
        background-color: var(--white);
        border-width: 0;
    }

    .button-processing-bookmark {
        background-color: var(--blue);
    }

    .button-processing-trash {
        background-color: var(--red);
    }

    .button-processing-archive {
        background-color: var(--turquoise);
    }

    .button-hover {
        border-width: 1px;
    }

    .archive-close-button {
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/close.png");
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1000;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .archive-link, .archive-link a, .archive-link visited {
        color: var(--dark-blue);
        text-decoration: underline;
    }

    .archive-link hover {
        font-weight: bold;
    }

    #done-undo-row {
        justify-content: flex-start;
    }

    .done-undo-button {
        background-color: var(--white);
    /*    border: 1px solid var(--black);*/

    /*            position: absolute;
        top: 8px;
        left: 8px;*/
        max-width: 32px;
        max-height: 32px;
        background-image: url("https://getglance.ai/img/undo-black.png");
        z-index: 100;
    }

    #archive-back-button {
    /*    margin-right: 3vw;*/
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/left.png");
    }

    #archive-trash-button {
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/bin-black.png");
    }

    #archive-bookmark-button {
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/bookmark-black.png");
    /*    background-image: url("https://getglance.ai/img/bookmark2.png");*/
    }

    #archive-share-button {
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/share-black.png");
    }

    #archive-next-button {
    /*    margin-left: 3vw;*/
        background-color: var(--white);
        border: 1px solid var(--black);
        background-image: url("https://getglance.ai/img/right.png");
    }

    #trash-button {
    /*    background-color: var(--red);*/
    /*    background-color: var(--white);*/
        background-image: url("https://getglance.ai/img/dislike-blue.png");
    }

    #bookmark-button {
    /*    background-color: var(--blue);*/
    /*    background-color: var(--white);*/
        background-image: url("https://getglance.ai/img/bookmark-blue.png");
    }

    #archive-button {
    /*    background-color: var(--turquoise);*/
    /*    background-color: var(--white);*/
        background-image: url("https://getglance.ai/img/like-blue.png");
    }

    #share-button {
        background-size: 75%;
    /*    background-color: var(--white);*/
        background-image: url("https://getglance.ai/img/share-blue.png");
    }

    #undo-button {
    /*    background-color: var(--white);*/
        background-image: url("https://getglance.ai/img/undo-blue.png");
    }

    .option-button img {
        height: 100%;
        width: 100%;
        padding: 8%;
        object-fit: cover;
    }

    .nav-item {
        flex: 1;  /* equally distribute width */
        text-align: center; /* center the image and text */
    }

    .nav-item img {
        width: 6vw;  /* or whatever width you prefer */
        height: auto;
    }

    .nav-item span {
        color: var(--white);
        font-size: min(calc(6px + 1.5vw), 8px);
        display: block;  /* makes it occupy the entire line */
    }


    /* The Modal (background) */
    .modal {
        display: flex;
        justify-content: center; /* Center the modal content vertically in the viewport */
        align-items: center; /* Center the modal content horizontally */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
        background-color: var(--white);
        padding: 20px;
        border: 2px solid var(--black);
        border-radius: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional for a drop shadow effect */
        width: 80%; /* Could be more or less, depending on screen size */
        display: flex; /* Use flexbox for modal content */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center children horizontally */
    }

    .button-container {
        display: flex;
        justify-content: space-between; /* Space buttons apart */
        width: 100%; /* Full width of the modal content */
        margin-top: 20px; /* Space between text and buttons */
    }

    .modal-content button {
        border: 2px solid var(--black);
        border-radius: 5px;
        padding: 10px 20px; /* Padding inside the buttons */
        text-align: center;
        cursor: pointer; /* Change mouse pointer on hover */
        background-color: var(--white); /* Button background color */
        margin: 0 10px; /* Space between buttons */
        flex-grow: 1; /* Buttons take up equal space */
    }

    #confirmTrash {
        background-color: var(--red); /* Red color for the trash button */
        color: var(--white); /* White text color */
        border-color: var(--red); /* Red border color */
    }

    .tooltiptext {
        visibility: hidden;
        opacity: 0;
        background-color: var(--yellow);
        border-style: solid;
        border-color: var(--dark-blue);
        border-width: 1px;
        color: var(--dark-blue);
        font-size: 10px;
        font-weight: normal;
        text-align: center;
        border-radius: 5px;
        padding: 0 5px;
        position: absolute;
        z-index: 999;
        bottom: 38px;
        left: 48px;
        transition: opacity 0.3s;
    }

    .login {
        display: flex;
        flex-direction: row;
    }

    .sign-in-btn {
        display: flex;
        background-color: var(--orange);
        color: var(--dark-blue);
        border-style: none;
        border-radius: 3px;
        padding: 3px 12px;
        cursor: pointer;
    }

    .sign-in-btn:hover {
        font-weight: bold;
    }

    .sign-in-btn:visited {
        font-weight: bolder;
        text-decoration: none;
        color: var(--dark-blue);
    }

    .my-feed-btn {
        display: flex;
        background-color: var(--orange);
        color: var(--dark-blue);
        width: auto;
        align-items: center;
        justify-content: center;
        margin: 8px 0;
        border-radius: 5px;
        padding: 16px 16px;
        cursor: pointer;
    }

    .my-feed-btn:hover {
        font-weight: bold;
    }

    .profile-picture {
        width: 2.1EM; 
        height: 2.1EM; 
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-right: 8px;
        margin-left: 8px;
    }

    .profile-picture img {
        width: 100%;
        height: auto;
        border-radius: 50%;
    }


    .linkedin-login-btn {
        display: inline-block;
        padding: 10px 15px;
        background-color: #0077B5; /* LinkedIn's brand color */
        color: var(--white);
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        margin: 5px;
        text-align: center;
        width: calc(100% - 30px); /* Adjust based on your layout */
    }

    .linkedin-login-btn:hover {
        color: var(--white);
    }

    .continue-as-guest-btn {
        display: inline-block;
        padding: 10px 15px;
        background-color: white;
        color: black;
        text-decoration: underline;
/*        border: 1px solid black;*/
        border-radius: 5px;
        margin: 5px;
        text-align: center;
        width: calc(100% - 30px); /* Adjust based on your layout */
    }


    /*hidden must be last!*/
    .hidden, .desktop-message, .text-menu {
        display: none;
    }

}


















/*------------------- FOLD ----------------------------------*/
@media (orientation: landscape) {
    .option-button-big, .option-button {
        width: 10vh;
        height: 10vh;
    }

    .vote-bar {
        width: 80%;
        margin: 1.5vh 10%;
    }

}


.header-page-link, .header-spacer{
    display: none; /* Hide the landscape menu */
}




/*------------------- BIG SCREEN ----------------------------------*/


@media ((min-width: 768px) or (max-height: 400px)) and (orientation: landscape) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    body {
/*        background-color: var(--light-gray);*/

        display: flex;
        flex-direction: column;
    }

/*    .archive-viewer {
        background-color: var(--white);
    }
*/
    .text-menu {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

/*    .current-page {
        display: flex;
        align-items:center;    
    }
*/
    .card-text {
        height: fit-content;
        flex-direction: column;
        justify-content: center;
    }

    .header-page-link, .header-page-link a {
        display: flex;
        margin: 0 10px;
        font-size: 18px;
        color: var(--dark-blue);
        text-decoration: none;
    }

    .header-page-link:visited, .header-page-link:active, .header-page-link:focus,
    .header-page-link a:visited, .header-page-link a:active, .header-page-link a:focus {
        color: var(--dark-blue); 
        text-decoration: none;
    }

    .header-spacer {
        display: flex;
        flex-grow: 5;
    }

/*    .cards {
        display: flex;
        flex-direction: row;
    }*/

/*    .card-graphic {
        display: flex;
        flex-grow: 1;
        width: auto;
        min-width: 25%;
        max-width: 33%;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }*/
    
    .graphic-block {
        display: flex;
        height: 100%;
        width: 100%;
        flex-grow: 1;
        margin: 5px;
    }

    .headline-block {
        display: flex;
        margin: 0;
        padding: 0 2vw;
    }

    .source-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .date, .source {
        padding: 0.5vh 0;
        font-size: min(calc(12px + 0.5vw), 18px);
    }

    .headline-row {
        font-size: min(calc(16px + 1vw), 20px);
        align-items: flex-start;
        justify-content: flex-start;
        margin: 1vh 0;
    }

    #done-card-text {
        padding: 0 2.5%;
        min-width: 90%;
    }

    .fortune-cookie {
        min-width: 90%;
        max-height: 28vh;
    }

    .summary-block, .special-summary-block {
        display: flex;
        flex-direction: column;
/*        height: 100%;*/
        max-height: 80vh;
        margin: 5px 0;
        padding: 0 2vw;
        flex-grow: 0;
        align-items: flex-start;
        font-size: min(calc(12px + 1.5vw), 18px);
    }

    .special-summary-block {
        max-height: none;
    }

    .form-block {
        justify-content:center;    
    }

    .bottom-bar {
        margin: auto;
        justify-content: space-around;
    }


    .archive-view-options, .scrollable-archive-container {
        width: auto;
        margin: 0 2vw;
    }


    .archive-close-button {
        border: 1px solid var(--black);
        top: 2vh;
        left: 2vh;
        height: 5vh;
        width: 5vh;
    }

    .option-button-big, .option-button {
        max-width: 48px;
        max-height: 48px;
        border-style: solid;
        border-width: 0;
        border-color: var(--dark-blue);
    }

    .vote-bar {
        position: relative;
    }

    #done-undo-row {
        justify-content: flex-start;
    }

    #done-image, #image-lp  {
        min-height: 42vh;
    }

    .input-area {
        max-width: none;
    }

/*    .tooltiptext {
        visibility: hidden;
        opacity: 0;
        background-color: var(--yellow);
        border-style: solid;
        border-color: var(--dark-blue);
        border-width: 1px;
        color: var(--dark-blue);
        font-size: 10px;
        font-weight: normal;
        text-align: center;
        border-radius: 5px;
        padding: 0 5px;
        position: absolute;
        z-index: 999;
        bottom: 38px;
        left: 48px;
        transition: opacity 0.3s;
    }
*/
/*    .search-icon {
        left: 25px;
    }
*/
    footer {
        display: flex;
        align-items: flex-end;
    }

    .hidden, .desktop-message, .menu-icon, .hamburger-menu {
        display: none;
    }

}


/*------------------- MOBILE LANDSCAPE ----------------------------------*/

    /*specific UI for mobile phone in landscape*/
/*    @media only screen and (max-width: 767px) and (orientation: landscape) and (aspect-ratio: more than 13/9) {*/
    @media only screen and (max-height: 479px) and (orientation: landscape) {
/*    @media (max-height : 480px) {*/
        .primary-content {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            padding-bottom: 2vh;
            margin-bottom: 2vh;
        }

        .archive-view-options, .scrollable-archive-container {
            width: 96vw;
            margin: 0 2vw;
        }

        .archive-viewer {
            display: flex;
            flex-direction: row;
            padding-bottom: 2vh;
            margin-bottom: 2vh;
            height: 100%;
        }

        .archive-item {
            display: flex;
            flex-direction: row;
/*            overflow-y: hidden;*/
/*            height: 100%;*/
        }

        .card-container {
            display: flex;
            flex-grow: 9;
            flex-shrink: 1;
            width: 100%;
            height: auto;
/*            margin: 1vh auto;*/
        }

        .cards, #done-card, #finished-share-card {
            display: flex;
            flex-direction: row;
        }

        #done-card-text {
            padding: 1vh 3vw;
            min-width: 30%;
            width: fit-content;
        }

        #signin-text {
            justify-content: center;
        }

        .card-graphic {
            display: flex;
            flex-grow: 1;
            width: auto;
            min-width: 25%;
            max-width: 33%;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .card-text {
            height: -webkit-fill-available;
/*            padding: 5px 0;*/
            overflow-y: auto;
/*            margin: 5px 0;*/
            justify-content: flex-start;
        }

        .headline-block {
/*            height: auto;
            max-height: 25%;*/
/*            height: fit-content;*/
        }

        .summary-block {
            height: auto;
            max-height: 25%;
        }

        .headline-row {
            font-size: min(calc(12px + 2vw), 18px);
        }

        .bottom-bar {
            display: flex;
            flex-shrink: 9;
            flex-grow: 1;
            padding: 2vh 0;
/*            width: 10vw;*/
            height: 100%;
/*            padding: 3vh 0;*/
            flex-direction: column;
            justify-content: space-between;
        }
        
        .source-row {
            margin-top: 8px;
        }

        .source img {
            height: 1.8vw;
            width: 1.8vw;
            margin-left: 3px;
        }


        .fortune-cookie {
            min-width: 33%;
            width: fit-content;
            height: fit-content;
        }

        #done-undo-row {
            justify-content: flex-end;
        }

        .vote-bar {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: 5vh 0;
        }

        .top-bar {
            width: 5vw;
        }

        .viewer-content {
            display: flex;
            flex-grow: 9;
            flex-shrink: 1;
            width: 100%;
            height: auto;
            position: relative;
        }

        #landing-page {
            font-size: min(calc(12px + 0.7vh), 20px);
        }

        .input-line {
            width: 45%;
            margin: 1vh 1vw;
            padding: 0.25vh;
            border-radius: 5px;
            border-style: solid;
            font-size: max(calc(10px + 1vh), 16px);
            background-color: var(--white);
            border-width: 1px;
        }

        .signup-btn {
            width: calc(2*(45% + 1vw));
        }

        .option-button-big, .option-button {
            margin: 0;
        }

        .archive-close-button {
            border: 1px solid var(--dark-blue);
            top: 8px;
            left: 8px;
            max-width: 32px;
            max-height: 32px;
        }

        .top-graphic-block, .center-graphic-block, .bottom-graphic-block {
            display: none;
        }

        #error-graphic {
            min-width: 40vw;
        }

        .user-menu {
            top: 13vh;
        }

        .hidden, footer {
            display: none;
        }
        
    }


    /*    non touchscreen only (i.e. PC)*/
    @media (hover: hover) and (pointer: fine) {
        .header-page-link:hover {
            font-weight: bold;
            text-decoration: none;
            color: var(--dark-blue);
        }

        #trash-button:hover {
            background-color: var(--orange);
        }

        #bookmark-button:hover {
            background-color: var(--blue);
        }      

        #archive-button:hover {
            background-color: var(--turquoise);
        }

        #share-button:hover, #undo-button:hover {
/*            background-color: var(--white);*/
        }

         .article-text:hover, .article-image:hover, .sort-button:hover, .toggle-deleted-items:hover {
            cursor: pointer;
            font-weight: bold;
        }

        .primary-content {
            margin: 2vh 18vw;
        }

        .archive-viewer {
            margin: 2vh 25vw 5vh;
        }

        #done-graphic {
            min-height: 48vh;
            min-width: 30vw;
        }

        #error-graphic {
            min-height: 36vh;
            min-width: 32vw;
        }

        .hidden {
            display: none;
        }

        
    }

}