* {
    box-sizing: border-box;
}

/* Calculations below for color originally from: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/ */

@media (prefers-color-scheme: dark) {
    :root {
        --background-red: 22;
        --background-green: 22;
        --background-blue: 22;
        --background-color: rgb(var(--background-red), var(--background-green), var(--background-blue));
        --foreground-brightness: ((var(--background-red) * 299) + ( var(--background-green) * 587) + ( var(--background-blue) * 114)) / 1000;
        --foreground-component-color: calc((var(--foreground-brightness) - 128) * -1000);
        --foreground-color: rgb(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color));
        --foreground-secondary-color: rgb(190, 180, 190);
    }

    a:link {
        color: dodgerblue;
    }

    a:visited {
        color: cornflowerblue;
    }

    a:hover {
        color: deepskyblue;
    }

    core-links-item a:visited {
        color: dodgerblue;
    }

    .info-box {
        box-shadow: 0px 0px 0px 1px rgb(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color));
    }

    .info-block {
        box-shadow: 0px 0px 0px 1px rgb(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color));
        overflow: auto;
    }

    pre:has(code) {
        border-radius: .5rem;
        box-shadow: 0px 0px 0px 1px rgb(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color));
        padding: .5rem .5rem;
        white-space: pre-wrap;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background-red: 255;
        --background-green: 255;
        --background-blue: 255;
        --background-color: rgb(var(--background-red), var(--background-green), var(--background-blue));
        --foreground-brightness: ((var(--background-red) * 299) + ( var(--background-green) * 587) + ( var(--background-blue) * 114)) / 1000;
        --foreground-component-color: calc((var(--foreground-brightness) - 128) * -1000);
        --foreground-color: rgb(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color));
        --foreground-secondary-color: rgb(110, 110, 110);
    }

    core-links-item a:link {
        color: blue;
    }

    core-links-item a:visited {
        color: blue;
    }

    .info-box {
        box-shadow: 0 1px 3px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.12), 0 0 2px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.24);
    }

    .info-block {
        box-shadow: 0 1px 3px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.12), 0 0 2px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.24);
        overflow: auto;
    }

    pre:has(code) {
        border-radius: .5rem;
        box-shadow: 0 1px 3px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.12), 0 0 2px rgba(var(--foreground-component-color), var(--foreground-component-color), var(--foreground-component-color), 0.24);
        padding: .5rem .5rem;
        white-space: pre-wrap;
    }
}

html {
    background: var(--background-color);
    color: var(--foreground-color);
}

body {
    font-family: charter, Cambria, Georgia, Times, "Times New Roman", serif;
    font-size: 16px;
}

.wait-cursor {
    cursor: wait;
}

.enable-after-loading {
    opacity: .2;
    pointer-events: none;
}

.single-photo-body {
    color: var(--foreground-secondary-color);
    margin-top: 0;
}

.single-photo-container {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    text-align: center;
}

.single-photo {
    height: auto;
    max-height: 98vh;
    width: 100%;
}

.single-photo-body .single-photo {
    cursor: zoom-in;
}

/* This is for the PhotoSwipe Toolbar - in full screen the 'x' collides with the visual search button edge adds. */
.pswp__top-bar {
    padding-right: 24px;
}

.single-photo-caption {
    caption-side: bottom;
    color: var(--foreground-secondary-color);
    display: table-caption;
    line-height: calc(1ex / 0.32);
    margin-bottom: .3rem;
    margin-top: .2rem;
    text-align: center;
}

.map-figure-title-caption {
    display: block;
    margin-top: .2rem;
    text-align: center;
}

.awesome-marker {
    opacity: .7;
}

.file-embed-caption {
    display: block;
    margin-top: .2rem;
    text-align: center;
}

.single-image-body {
    color: var(--foreground-secondary-color);
    font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    margin-top: 0;
}

.single-image-container {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    text-align: center;
}

.single-image {
    height: auto;
    max-height: 98vh;
    width: 100%;
}

.single-image-caption {
    caption-side: bottom;
    color: var(--foreground-secondary-color);
    display: table-caption;
    line-height: calc(1ex / 0.32);
    margin-bottom: .3rem;
    margin-top: .2rem;
    text-align: center;
}

.image-source-notes-content {
    margin: 2.5rem;
    text-align: center;
}

.line-elevation-chart-container {
    margin: auto;
    max-width: 800px;
}

.point-text-info-container {
    display: flex;
    justify-content: center;
}

.point-content-map {
    height: 60vh;
}

.point-map-label {
    color: rgb(51, 136, 255);
    font-size: 1rem;
    font-weight: bold;
    height: auto !important;
    width: max-content !important;
}

.info-list-container {
    align-items: center;
    color: var(--foreground-secondary-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
}

.info-box {
    border-radius: 4px;
    margin: 3px;
    text-align: center;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.info-block {
    border-radius: 4px;
    margin: 3px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.point-detail-info-container {
    margin: 0 1rem;
}

a.info-list-link-item:visited {
    display: block;
    text-decoration: none;
}

a.info-list-link-item:hover {
    display: block;
    text-decoration: underline;
}

a.info-list-link-item:active {
    display: block;
    text-decoration: none;
}

a.info-list-link-item {
    color: var(--foreground-secondary-color);
    display: block;
    margin: .5rem 1.5rem;
    text-decoration: none;
}

.info-list-text-item {
    color: var(--foreground-secondary-color);
    display: block;
    margin: .5rem 1.5rem;
    text-decoration: none;
}

.info-list-label {
    margin-bottom: .6rem;
    margin-right: 0.4rem;
    margin-top: 1rem;
    text-align: center;
    width: 100vw;
}

.footer-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.footer-site-link-content {
    color: var(--foreground-color);
}

.footer-content-lists-container {
    margin-top: 2rem;
}

.footer-site-email {
    color: var(--foreground-secondary-color);
}

.footer-site-link-content {
    margin-top: 1rem;
}

.footer-content-list {
    display: inline-block;
    margin-left: 1rem;
    margin-right: 1rem;
}

.footer-camera-roll-link {
    margin-left: 1rem;
    margin-right: 1rem;
}

.footer-site-about {
    margin-left: 1rem;
    margin-right: 1rem;
}

.site-header-container {
    display: block;
    margin: 1rem;
}

.site-header-title {
    font-size: 2.4rem;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

.site-header-icon {
    height: 1.8rem; /* Slightly smaller than the font size */
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

a.site-header-title-link {
    color: var(--foreground-color);
    text-decoration: none;
}

    a.site-header-title-link:visited {
        color: var(--foreground-color);
        text-decoration: none;
    }

    a.site-header-title-link:hover {
        color: var(--foreground-color);
        text-decoration: underline;
    }

    a.site-header-title-link:active {
        color: var(--foreground-color);
        text-decoration: none;
    }

.note-title-content {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: .6rem;
    text-align: center;
}

.site-header-subtitle {
    color: var(--foreground-secondary-color);
    font-size: 1.1rem;
    font-weight: normal;
    margin: .3rem;
    text-align: center;
}

.title-link-content, .title-content {
    color: var(--foreground-color);
    font-size: 1.7rem;
    font-weight: normal;
    line-height: calc(1ex / 0.42);
    margin-bottom: 0;
    text-align: center;
    text-decoration: none;
}

    .title-link-content a {
        color: var(--foreground-color);
        text-decoration: none;
    }

        .title-link-content a:visited {
            color: var(--foreground-color);
            text-decoration: none;
        }

        .title-link-content a:hover {
            color: var(--foreground-color);
            text-decoration: underline;
        }

        .title-link-content a:active {
            color: var(--foreground-color);
            text-decoration: none;
        }

.post-title-area-created-and-updated-content {
    color: var(--foreground-secondary-color);
    font-weight: normal;
    margin-top: .5rem;
    text-align: center;
}

.core-links-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: .3rem .3rem .6rem .3rem;
}

.core-links-item {
    line-height: 0;
    margin: 2px 12px;
}

.post-body-container {
    margin-bottom: 1.8rem;
    margin-top: 2rem;
}

.post-body-content p:not(.info-list-text-item):not(div.leaflet-container *) {
    line-height: calc(1ex / 0.32);
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
}

.post-body-content ul, .post-body-content ol {
    line-height: calc(1ex / 0.32);
    margin-bottom: 1.5rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: .5rem;
}

.post-body-content h1, .post-body-content h2, .post-body-content h3, .post-body-content h4, .post-body-content h5, .post-body-content h6, .post-body-content pre {
    line-height: calc(1ex / 0.32);
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
}

pre code.hljs {
    border-radius: .5rem;
}

/* 
    This class is intended for 'direct use' in content
    so that any content can be constrained with the
    .post-body-content CSS - changing/refactoring this
    name may require search contents for this class
*/

.post-body-content-block {
    line-height: calc(1ex / 0.32);
    margin-bottom: 2rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
}

.post-body-content blockquote {
    border-left: 2px solid #aaa;
    margin-bottom: 2rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
    padding: 0.5em 10px;
}

.update-notes-title, .update-notes-content p, .update-notes-content ul {
    color: var(--foreground-secondary-color);
    line-height: 1rem;
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1rem;
}

.file-download-container {
    margin: 1rem;
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    flex-wrap: wrap;
    row-gap: .5rem;
}

.file-embed-container {
    margin: 1rem 10%;
    text-align: center;
}

.file-embed {
    height: 80vh;
    width: 100%;
}

.video-embed {
    max-height: 80vh;
    width: 100%;
}

.created-and-updated-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
}

.compact-content-container {
    border-radius: 4px;
    display: flex;
    margin: 3px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    width: 316px;
}

.compact-content-list-label {
    margin-bottom: .6rem;
    margin-right: 0.4rem;
    margin-top: 1rem;
    text-align: center;
    width: 100vw;
}

.compact-content-text-content-title-container {
    font-size: 14px;
    margin: .4rem .2rem .2rem 0;
    text-align: center;
}

.compact-content-text-content-title-link {
    color: var(--foreground-secondary-color);
    display: inline-block;
    max-height: 70px;
    text-decoration: none;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.compact-content-list-container {
    align-items: center;
    border-radius: 4px;
    color: var(--foreground-secondary-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem auto;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.compact-content-image-content-container {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
    margin: 4px;
    min-width: 100px;
    overflow: hidden;
    width: 100px;
}

.compact-content-text-content-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: space-between;
    margin: 4px;
    overflow: hidden;
    width: 100%;
}

.compact-content-text-content-summary {
    color: var(--foreground-secondary-color);
    font-size: 12px;
}

.compact-content-title-summary-container {
    overflow: auto;
}

.compact-content-text-content-date {
    color: var(--foreground-secondary-color);
    font-size: 12px;
    text-align: end;
}

.content-list-item-container {
    border-radius: 4px;
    display: flex;
    margin: 10px 2px;
    min-width: 300px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    width: 300px;
}

.thumb-vertical {
}

.thumb-horizontal {
}

.content-list-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.information-section {
    color: var(--foreground-secondary-color);
}

.daily-photo-gallery-list-container {
    align-items: initial;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2vh;
}

.daily-photo-gallery-photo-container {
    margin-left: auto;
    margin-right: auto;
    width: 96vw;
}

.camera-roll-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 16px;
}

.camera-roll-photo-item-container {
    margin: 2vw;
    width: 120px;
}

.camera-roll-info-item-container {
    margin: 24px auto auto auto;
    text-align: center;
    width: 96vw;
}

.camera-roll-info-date {
    font-weight: bold;
    margin: auto;
    text-align: center;
}

.camera-roll-info-camera {
    font-size: small;
    margin-top: 12px;
}

.camera-roll-info-lens {
    font-size: small;
    margin-top: 6px;
}

.camera-roll-year-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto 12px;
    width: 96vw;
}

.camera-roll-year-list-item {
    margin: .4rem;
}

.camera-roll-year-list-label {
    font-style: italic;
}

.camera-roll-month-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 12px;
    width: 96vw;
}

.camera-roll-month-list-label {
    font-style: italic;
}

.camera-roll-month-list-item {
    margin: .4rem;
}

.camera-roll-nav-current-selection {
    font-weight: bold;
}

.camera-roll-nav-unused-selection {
    opacity: .2;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tag-list-item {
    border-radius: 4px;
    margin: 8px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

a.tag-list-link:visited {
    color: var(--foreground-color);
    display: block;
    margin: 8px;
}

a.tag-list-link:hover {
    color: var(--foreground-color);
    display: block;
    margin: 8px;
    text-decoration: underline;
}

a.tag-list-link:active {
    color: var(--foreground-color);
    display: block;
    margin: 8px;
}

a.tag-list-link {
    color: var(--foreground-color);
    display: block;
    margin: 8px;
}

.standard-rule {
    border-radius: 4px;
    color: var(--foreground-secondary-color);
    margin-bottom: 1rem;
    max-width: 60%;
    opacity: .2;
}

.search-input-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.4rem;
}

.search-input {
    border-radius: 4px;
    padding: 6px 10px;
    width: 300px;
}

.content-list-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.content-list-filter-item {
    margin: 0 .4rem;
}

.link-compact-text-content-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    margin: 4px;
    overflow: hidden;
    width: 100%;
}

.link-compact-text-content-summary {
    color: var(--foreground-secondary-color);
    font-size: 12px;
    overflow: auto;
}

/*
    Content Gallery Start
*/

.content-gallery-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.content-gallery-year-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto 12px;
    width: 96vw;
}

.content-gallery-year-list-item {
    margin: .4rem;
}

.content-gallery-year-list-label {
    font-style: italic;
}

.content-gallery-month-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 12px;
    width: 96vw;
}

.content-gallery-month-list-label {
    font-style: italic;
}

.content-gallery-month-list-item {
    margin: .4rem;
}

.content-gallery-nav-current-selection {
    font-weight: bold;
}

.content-gallery-nav-unused-selection {
    opacity: .2;
}

.content-gallery-info-item-container {
    margin: 24px auto auto auto;
    text-align: center;
    width: 96vw;
}

.content-gallery-info-date {
    font-weight: bold;
    margin: auto;
    text-align: center;
}

.content-gallery-list-label {
    margin-bottom: .6rem;
    margin-right: 0.4rem;
    margin-top: 1rem;
    text-align: center;
    width: 100vw;
}

.cg-card-with-image {
    border-radius: 4px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 10px 2px;
    min-width: 300px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    width: 300px;
    height: 300px;
}

.cg-card-text-only {
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 2px;
    min-width: 300px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    width: 300px;
    height: 300px;
}

.cg-card-image-div {
    align-items: center;
    display: flex;
    height: 140px;
    justify-content: center;
    margin: 5px;
    min-width: 290px;
    overflow: hidden;
    width: 290px;
    grid-row-start: 1;
}

.cg-card-text-div {
    overflow: auto;
    width: 100%;
    grid-row-start: 2;
    max-height: 270px;
}

.cg-card-text-title-div {
    font-size: 14px;
    margin: .4rem .2rem .5rem .2rem;
    text-align: center;
}

.cg-card-text-title-link {
    color: var(--foreground-color);
    text-decoration: none;
    word-wrap: break-word;
}

.cg-card-text {
    color: var(--foreground-secondary-color);
    font-size: 12px;
    margin: .2rem;
}

.cg-card-footer-div {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-row-start: 3;
    margin: .2rem;
}

.cg-card-footer-type {
    color: var(--foreground-secondary-color);
}

.cg-card-footer-date {
    color: var(--foreground-secondary-color);
    margin-left: .3rem;
}

/*
    Content Gallery End
*/

.menu-toggle {
  display: none;
}

@media screen and (max-width: 639px) {
  /* Hide the checkbox but make it accessible */
  .menu-toggle {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  /* Hamburger icon */
  .menu-toggle-label {
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0.5rem auto;
    font-size: 1.5rem;
  }
  
  /* Show icon as hamburger by default */
  .menu-toggle-label:before {
    content: "☰";
  }
  
  /* When checked, show X instead */
  .menu-toggle:checked ~ .menu-toggle-label:before {
    content: "✕";
  }
  
  /* Hide menu by default on mobile */
  .core-links-container {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  /* Show menu when checkbox is checked */
  .menu-toggle:checked ~ .core-links-container {
    display: flex;
  }
  
  /* Full width menu items */
  .core-links-item {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
}

@media screen and (min-width: 640px) {
    .post-body-content p:not(.info-list-text-item):not(div.leaflet-container *) {
        margin-left: 4%;
        margin-right: 4%;
    }

    .post-body-content ul,
    .post-body-content ol,
    .post-body-content h1,
    .post-body-content h2,
    .post-body-content h3,
    .post-body-content h4,
    .post-body-content h5,
    .post-body-content h6,
    .post-body-content pre {
        margin-left: 4%;
        margin-right: 4%;
    }

    /* 
        This class is intended for 'direct use' in content
        so that any content can be constrained with the
        .post-body-content CSS - changing/refactoring this
        name may require search contents for this class
    */
    .post-body-content-block {
        margin-left: 4%;
        margin-right: 4%;
    }

    .post-body-content blockquote {
        margin-left: 4%;
        margin-right: 4%;
    }

    .update-notes-title,
    .update-notes-content p,
    .update-notes-content ul {
        margin-left: 4%;
        margin-right: 4%;
    }

    .tags-container {
        margin-left: 4%;
        margin-right: 4%;
    }

    .daily-photo-gallery-photo-container {
        margin: 1vw;
        width: 46vw;
    }

    .camera-roll-info-item-container {
        margin: auto;
        width: 20vw;
    }

    .camera-roll-month-list-container {
        justify-content: center;
        margin: auto;
        text-align: center;
        width: 20vw;
    }

    .camera-roll-year-list-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: auto 12px;
        width: 96vw;
    }

    .search-input {
        width: 600px;
    }

    .content-list-item-container {
        min-width: 600px;
        width: 600px;
    }
}

@media screen and (min-width: 1200px) {
    .title-link-content, .title-content {
        font-size: 2rem;
        line-height: calc(1ex / 0.42);
    }

    .site-header-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .site-header-title {
        justify-self: flex-end;
    }

    .site-header-subtitle-menu-container {
        align-content: center;
        display: grid;
        grid-column-start: 2;
        justify-self: flex-start;
        margin-left: 2rem;
    }

    .core-links-container {
        margin: 0;
    }

    .site-header-subtitle {
        margin: 0;
    }

    .post-body-content p:not(.info-list-text-item):not(div.leaflet-container *) {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
        width: 60rem;
    }

    .post-body-content ul,
    .post-body-content ol,
    .post-body-content h1,
    .post-body-content h2,
    .post-body-content h3,
    .post-body-content h4,
    .post-body-content h5,
    .post-body-content h6,
    .post-body-content pre {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
        width: 60rem;
    }

    /* 
        This class is intended for 'direct use' in content
        so that any content can be constrained with the
        .post-body-content CSS - changing/refactoring this
        name may require search contents for this class
    */
    .post-body-content-block {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
        width: 60rem;
    }

    .post-body-content blockquote {
        margin-left: auto;
        margin-right: auto;
        max-width: 1080px;
        width: 80ch;
    }

    .update-notes-title,
    .update-notes-content p,
    .update-notes-content ul {
        margin-left: auto;
        margin-right: auto;
        width: 1100px;
        width: 80ch;
    }

    .tags-container {
        margin-left: auto;
        margin-right: auto;
        width: 1100px;
    }

    .daily-photo-gallery-photo-container {
        margin: 12px;
        width: 30vw;
    }

    .camera-roll-photo-item-container {
        margin: 1vw;
        width: 14vw;
    }

    .roll-month-list-container {
        width: 16vw;
    }

    .compact-content-list-container {
        max-width: 1200px;
    }

    .search-input {
        width: 900px;
    }

    .content-list-item-container {
        min-width: 900px;
        width: 900px;
    }
}