@import 'reset.css';

:root {
    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 150%;
    color: #57534e;
    background: #fafaf9;
    cursor: grab;
    overflow-x: scroll;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.memories {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: scroll;
}

.memories__canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10000px;
    min-height: 10000px;
    background-image: radial-gradient(#e7e5e4 10%, transparent 10%);
    background-position: 10px 10px;
    background-size: 20px 20px;
}

.memories__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10rem; /* 160px */
    height: 10rem; /* 160px */
    text-align: center; 
    scroll-margin-block: calc(50vh - 5rem); /* 80px */
    scroll-margin-inline: calc(50vw - 5rem); /* 80px */
    pointer-events: none;
}

.memories__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.memories__subtitle {
    display: flex;
    align-items: center;
    width: max-content;
    padding: .125rem 1rem .125rem .5rem;
    background: white;
    color: #78716c;
    border-radius: 999rem;
    box-shadow: 
        0 0 0 0.0625rem #e7e5e4, /* 1px */
        0 4px 8px -2px #e7e5e4; /* 1px */
}

.memories__subtitle > span:first-child {
    height: 2rem;
    margin-right: -.25rem;
}

.memories__btn {
    z-index: 10;
    position: fixed;
    bottom: 2rem; /* 32px */
    right: 2rem; /* 32px */
    padding: 0.75rem 0.75rem; /* 8px 12px */
    background: linear-gradient(to bottom, #f5f5f499, #f5f5f4);
    backdrop-filter: blur(.5rem);
    box-shadow: 
        0 0 0 0.0625rem rgba(0, 0, 0, 10%), /* 1px */
        0 -.25rem 0.375rem -.125rem #e7e5e4 inset; /* -4px 6px -2px */
    color: #78716c;
    border-radius: 0.375rem; /* 6px */
    text-decoration: none;
    transition: 
        box-shadow 150ms ease-out,
        transform 150ms ease-out;
}

.memories__btn:hover {
    box-shadow: 
        0 0 0 0.0625rem rgba(0, 0, 0, 10%), /* 1px */
        0 -.25rem .125rem -.125rem #e7e5e4 inset; /* -4px 2px -2px */
}

.memories__btn:active {
    transform: scale(.95);
    box-shadow: 
        0 0 0 0.0625rem rgba(0, 0, 0, 10%), /* 1px */
        0 -.25rem .125rem -.25rem #e7e5e4 inset; /* -4px 2px -2px */
}

.memories__img {
    position: absolute;
    height: auto;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 50%);
    transform-origin: center;
}