@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS reset. I don't remember exactly what it does, but I rememeber having to add it in the past. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* colors from Nano's screenshots */
    --wall-bg: #1E232A;
    --frame-bg: #0c1014;

    /* photo size */
    --photo-base-size: 290px;
    --photo-height-ratio: 1.35;
    --photo-width: var(--photo-base-size);
    --photo-height: calc(var(--photo-base-size) * var(--photo-height-ratio));

    /* various */
    --logo-width: 35%;
    --logo-bottom-margin: -50px;
    --post-margin: 15px;
    --photo-hover-scale: 1.01;
    --photo-frame-border-radius: 10px;
    --photo-border-radius: 10px;

    /* editable in settings for accesibility */
    --font-size-username: 16pt;
    --font-size-caption: 12pt;
}

body {
    min-height: 100vh;
    background-color: var(--wall-bg);
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    color: white;
}

h1, h2, h3 {
    text-align: center;
    padding: 10px;
    letter-spacing: 1px;
    user-select: none;
}

h1 { font-size: 2.4rem; }

h2 { font-size: 1.8rem; }

h3 { font-size: 1.4rem; }

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--logo-bottom-margin);
}

#logo img {
    width: var(--logo-width);
    height: auto;
}

#wall {
    display: flex;
    flex-wrap: wrap;
    /* width: 90%; */
    margin: auto;
    gap: 0;
    padding: 20px var(--post-margin)px; /* at least the same spacing between edges of the screen as between posts */
    justify-content: center;
    align-items: flex-start;
}


/* ---------------- post ------------------------ */
.photo-frame {
    position: relative;
    display: inline-block;
    margin: var(--post-margin);
    transition: transform 0.18s ease, z-index 0s;
    will-change: transform;
    z-index: 1;
}



.photo-frame .mat {
    background: var(--frame-bg);
    padding: 20px 40px;
    border-radius: var(--photo-frame-border-radius);
    height: 650px;
}

.image-stack {
    position: relative;
    width: var(--photo-width);
    height: var(--photo-height);
}

.image-stack:hover {
    /* z-index: 100; */
    filter: brightness(1.06);
    transform: scale(var(--photo-hover-scale));
}

.photo, .overlay-image {
    /* width: var(--photo-width); */
    /* height: var(--photo-height); */
    border-radius: var(--photo-border-radius);

    object-fit: cover;
    object-position: var(--object-fit-x) var(--object-fit-y);
    
    cursor: pointer;

    user-select: none;
    -webkit-user-drag: none;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay-image { z-index: 2; }

.photo { z-index: 1; }

.user-space {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* we need wrapper to zoom and translate */
.user-logo-wrapper {
    height: 40px;
    width: auto;
    border-radius: 100%;
    align-self: center;
    overflow: hidden; /* so that anything past the border gets clipped */
}

.user-logo {
    width: auto;
    height: 100%;
    object-fit: cover; 

    /* todo: we can tweak this a bit */
    transform: scale(1.3) translateX(0);
}

.user-name {
    font-size: 20pt;
    align-self: center;
    line-height: 1;
    color: white;
    object-fit: cover;
}

.ui-icons {
    margin: 3px auto;
}

.ui-icons img {
    width: auto;
    height: 20pt;
    margin: 3px;

    /* Make the icons white. Generated by some website I forgor the name of lol. */
    filter: invert(100%) sepia(27%) saturate(0%) hue-rotate(348deg) brightness(118%) contrast(100%);
}

.photo-frame .caption {
    font-size: var(--font-size-caption);
    color: white;
    padding-top: 0px;
    line-height: 1.2;
    min-height: 20px;
    width: var(--photo-width);
    max-width: 100%;
    max-height: 125px;
    overflow-y: auto;
    /* overflow-y: hidden; */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.photo-frame .caption:hover {
  scrollbar-color: rgba(255,255,255,0.6) transparent; /* thumb color, track color */
}

/* Chrome, Safari, Edge (WebKit-based) */
.photo-frame .caption::-webkit-scrollbar {
  width: 6px;
}

.photo-frame .caption::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
}

.photo-frame .caption:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
}

.photo-frame .caption::-webkit-scrollbar-track {
  background: transparent;
}