:root {
    --wist-shadow-color: 220deg 30% 70%;
    --wist-shadow-elevation-low:
      0px 0.4px 0.5px hsl(var(--wist-shadow-color) / 0.21),
      0px 0.7px 0.8px -1px hsl(var(--wist-shadow-color) / 0.23),
      0px 1.5px 1.8px -2.1px hsl(var(--wist-shadow-color) / 0.26);
    --wist-shadow-elevation-medium:
      0px 0.4px 0.5px hsl(var(--wist-shadow-color) / 0.22),
      0px 1.4px 1.7px -0.7px hsl(var(--wist-shadow-color) / 0.24),
      0px 3.1px 3.7px -1.4px hsl(var(--wist-shadow-color) / 0.26),
      0px 7.4px 8.8px -2.1px hsl(var(--wist-shadow-color) / 0.28);
    --wist-shadow-elevation-high:
      0px 0.4px 0.5px hsl(var(--wist-shadow-color) / 0.2),
      0px 2.1px 2.5px -0.3px hsl(var(--wist-shadow-color) / 0.21),
      0px 3.9px 4.6px -0.6px hsl(var(--wist-shadow-color) / 0.22),
      0px 6.1px 7.2px -0.9px hsl(var(--wist-shadow-color) / 0.23),
      0px 9.4px 11.1px -1.2px hsl(var(--wist-shadow-color) / 0.24),
      -0.1px 14.3px 16.9px -1.5px hsl(var(--wist-shadow-color) / 0.25),
      -0.1px 21.3px 25.2px -1.8px hsl(var(--wist-shadow-color) / 0.26),
      -0.1px 31px 36.7px -2.1px hsl(var(--wist-shadow-color) / 0.27);
  }
body{
    font-family: "Inter", var(--bs-font-sans-serif);
    background-color: hsl(235 5% 95% / 1);
}
h1, h2, h3, h4, h5{
    font-weight: 700;
}
.display-1, .display-2, .display-3, .display-4, .display-5{
    font-weight: 700;
}
.align-top-auto{
    top: auto;
}

.bento .bg-blur{
    backdrop-filter: blur(20px) saturate(1.5) brightness(0.8);
}
/* TODO: Review border offsetting */
.bento{
    overflow: hidden;
    border-radius: 2rem;
    border-width: 0.01rem;
    border-color: rgba(0,0,0,0.11);
}
.bento .display-1,
.bento .display-2,
.bento .display-3,
.bento .display-4,
.bento .display-5{
    font-weight: 400;
}

.bento .card-img-top,
.bento .card-img-bottom{
    max-height: 40rem;
}

.section-height-min-20{
    min-height: 20rem;
}

.bento-praise{
    /* min-height: 20rem; */
}
.list-emoji-item .emoji{
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
}

.bento-praise .card-title{
    font-family: 'Playfair Display', serif;
    font-style: italic;
    /* color: blue; */
}
/* gradient text for modern browsers */
@supports (background-clip: text){
    .bento-praise .card-title {
        background-image: linear-gradient(20deg, #122ade, #00abff);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}
@supports (-webkit-background-clip: text){
    .bento-praise .card-title {
        background-image: linear-gradient(19deg, #231eac, #00abff);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}

.bento-grid-margin>.col{
    margin-top: calc(var(--bs-gutter-x) * .5);
    margin-bottom: calc(var(--bs-gutter-x) * .5);
}

.bento-support .card-img-top,
.bento-support .card-img-bottom{
    height: 8rem;
}

.bento-press{
    height: 6rem;
}
.bento-press img {
    /* fill:wheat; */
    filter: brightness(0) sepia(1) saturate(10000%) hue-rotate(0deg);
    opacity: 0.24;
    height: 6rem;
    object-fit: contain;
}
.bento-praise .card-title{
    letter-spacing: -0.1rem;
}

.elevation-sm{
    box-shadow: var(--wist-shadow-elevation-low);
}
.elevation-md{
    box-shadow: var(--wist-shadow-elevation-medium);
}
.elevation-lg{
    box-shadow: var(--wist-shadow-elevation-high);
}

.img-rounded{
    border-radius: 2rem;
}

.header-icon,
.header-icon-sm{
    height: 2.6rem;
    width: 2.6rem;
    border-radius: 0.85rem;
}

.btn-mute{
    height: 3rem;
    width: 3rem;
    border-radius: 3rem;
    backdrop-filter: blur(12px);
    background: hsl(0deg 0% 20% / 50%);
    border: none;
    top: auto;
    left: auto;
    right: 1rem;
    bottom: 1rem;
}
.material-icon.spot-fix{
    margin-top: -4px;
}

.material-icon.color-black-to-white{
    filter: grayscale(1) invert(0.8);
}

.card .card-text-lg{
    font-size: calc(1.275rem + .3vw);
}

.nav-pills{

    background-color: rgba(255, 255, 255, 0.888)!important;
}

.nav-legal.nav{
    border-radius: 1.4rem;
}
.nav-legal .nav-item>.nav-link.active{
    border-radius: 1rem;
}

.card-shim{
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, hsla(218, 20%, 92%, 0.98), hsla(218, 10%, 95%, 0.65), transparent, transparent, transparent);
}

/* 
.nav-pills .nav-link.active{

} */

/* body {
    font-family: "Poppins", var(--bs-font-sans-serif);
    background: hsl(0deg 0% 94%);
    overflow-x: hidden;
}

h1.display-3{
    font-weight: 700;
}
h1, h2, h3, h4{
    font-weight: 700;
}
h3>small.small{
    font-size: 0.775em;
    position: relative;
    top: -2px;
}
.material-icon{
    margin-top: -4px;
}
.bg-primary{
    background: #427CFF !important;
}
.bg-secondary{
    background: #E2E3E6 !important;
}

.bg-mix h3{
    color: #fff;
    text-shadow: 0 8px 40px rgba(0,0,0,.75);
}
.bg-mix .badge.bg-secondary{
    background: rgb(226 227 230 / 75%) !important;
    backdrop-filter: blur(4px) saturate(150%);
}

.min-height {
    min-height: 700px;
}

.min-height-sm {
    min-height: 400px;
}

.img-contain{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

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

.img-rounded{
    border-radius: 16px;
}

.header-icon-lg{
    height: 64px;
    width: 64px;
    margin-top: 104px;
    margin-bottom: 16px;
}

.header-icon{
    height: 38px;
    width: 38px;
    border-radius: 8px;
}

.ratio-1x2 {
    --bs-aspect-ratio: 200%;
}

.ratio-9x16 {
    --bs-aspect-ratio: calc(16 / 9 * 100%);
}

.my-6{
    margin-top: 7rem!important;
    margin-bottom: 7rem!important;
}



.memory-container{
    transform: scale(.6);
    height: 232px;
}
@media (min-width: 578px){
    .memory-container{
        transform: scale(1);
        height: auto;
    }
}

.memory {
    width: 180px;
    transform-style: preserve-3d;
    z-index: 1;
    margin: 0 32px;
}


.memory.memory-right {
    margin-left: auto;
}
.memory .memory-preview{
    z-index: 2;
}
.memory .memory-preview img,
.memory .memory-preview div {
    background: #E2E3E6;
    border-radius: 16px;
    overflow: hidden;
    width: 180px;
    height: 300px;
    transform: translateZ(0px);
    box-shadow: 0 8px 16px rgba(13, 52, 140, .24);
    z-index: 3;
}
.memory .memory-preview video,
.memory .memory-preview img{
    object-fit: cover;
    z-index: 5;
}
.memory .memory-label {
    background: #427CFF;
    color: white;
    padding: 10px 16px;
    border-radius: 24px;
    text-align: center;
    width: 220px;
    margin-left: -20px;
    margin-top: -40px;
    transform: translateZ(2px);
    transform-style: preserve-3d;
    box-shadow: 0 8px 16px rgba(13, 52, 140, .24);
    z-index: 10;
}

.memory .memory-label .memory-title {
    opacity: 0.9;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 0px;
    display: block;
    transform: translateZ(1px);
    z-index: 20;
}
.memory .memory-label .memory-date {
    opacity: 0.5;
    font-weight: 800;
    font-size: 70%;
    margin-bottom: 0;
    display: block;
    transform: translateZ(1px);
    z-index: 15;
}
.memory:hover .memory-label,
.memory:hover .memory-label .memory-title{
    transform: translateZ(10px);
}
.memory:hover .memory-label .memory-date{
    transform: translateZ(5px);
}

.opacity-90{
    opacity: 90%;
}
.opacity-80{
    opacity: 80%;
}
.opacity-70{
    opacity: 70%;
}
.opacity-60{
    opacity: 60%;
}
.opacity-50{
    opacity: 50%;
}
.opacity-40{
    opacity: 40%;
}
.opacity-30{
    opacity: 30%;
}
.opacity-20{
    opacity: 20%;
}
.opacity-10{
    opacity: 10%;
}
.opacity-00{
    opacity: 0%;
}

.bg-mix{
    background-image: url("/media/website-end.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
} */





/* .img-cover {
    object-fit: cover;
    width: 132%;
    height: 100%;
    margin-right: -380px;
    max-height: 400px;
} */
/* .memories-outer {
    overflow-y: clip;
    overflow-x: visible;
} */

/* .memories-inner {
    width: 100%;
} */



/* .memory {
    transform-style: preserve-3d;
    z-index: 1;
    margin: auto 8px;
}
.memory .memory-preview img,
.memory .memory-preview div {
    
    border-radius: 16px;
    overflow: hidden;
    transform: translateZ(0px);
    box-shadow: 0 8px 16px rgba(13, 52, 140, .24);
    width: 100px;
    height: 200px;
    margin: auto 24px;
}

.memory .memory-preview video,
.memory .memory-preview img{
    object-fit: cover;
    
}
.memory .memory-label {
    background: #427CFF;
    color: white;
    padding: 10px 16px;
    border-radius: 24px;
    text-align: center;
    margin-top: -40px;
    transform: translateZ(15px);
    transform-style: preserve-3d;
    box-shadow: 0 8px 16px rgba(13, 52, 140, .24);
    position: relative;
}
.memory .memory-label .memory-title {
    opacity: 0.9;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 70%;
    display: block;
    transform: translateZ(10px);
}
.memory .memory-label .memory-date {
    opacity: 0.5;
    font-weight: 700;
    font-size: 70%;
    margin-bottom: 0;
    display: block;
    transform: translateZ(6px);
}

@media (min-width: 720px){
    .memory{
        margin: auto 8px;
    }
    .memory .memory-preview img,
    .memory .memory-preview div{
        width: 196px;
        height: 300px;
    }
    .memory .memory-label {
        margin: -40px 0px 0;
    }
    .memory .memory-label .memory-title {
        font-size: 100%;
    }
} */