/* wrapper */

#log-wrapper {

   --logSize: 6rem;
   --logMargin: 2rem;
   --logBox: calc(var(--logMargin) + var(--logSize));

   display: grid;
   place-items: center;
}

#log-wrapper::after {
   content: '';
   position: absolute;
   border: var(--brd);
   border-radius: 1rem;

   z-index: -1;
   width: calc(100% + 4em);
   height: 40%;

   background-color: var(--vdg);
   box-shadow: 0 0 1em .75em var(--dg) inset, var(--shd);
}



#log-wrapper::before {
   z-index: 1;
}

#log-wrapper[data-folder]::before {
   content: attr(data-folder);
}

/* selection screen */

#log-select {
   display: flex;

   height: 100%;
   width: 100%;
   overflow-y: auto;

   align-self: baseline;
   justify-self: start;

   padding: 2rem;
   gap: 2rem;
   flex-wrap: wrap;
   overflow: auto;
}

.log-icon,
.folder-icon {
   display: grid;
   height: 6rem;
   width: 6rem;
   place-items: center;
   text-align: center;

   font-style: normal;
}

.log-icon svg,
.folder-icon svg {
   height: 4rem;
   width: 4rem;
}

.log-icon.read,
.folder-icon.read {
   opacity: .6;
}

.log-icon:hover,
.folder-icon:hover {
   text-decoration: underline;
   filter: drop-shadow(0 0 .3rem var(--sc));
}


/* reader window */

#log-reader {
   position: absolute;

   height: calc(100% - 2em);
   width: calc(100% - 2em);
   scale: 0;
   opacity: 0;
   transition: .5s ease-in-out;
}

#log-reader.open {
   scale: 1;
   background-color: var(--tbl);
   opacity: 1;
   border: var(--brd);
   border-radius: 1.5em;
   z-index: 4;
}

#reader-body {
   padding: 2rem;
   font-size: 1.1rem;
   line-height: 1.75rem;
   height: 100%;
   overflow: auto;

   scrollbar-width: none;
}

#log-close {
   position: absolute;
   top: .65rem;
   right: .65rem;
   font-size: 1.3rem;
   border: 0;
   padding: 0;
}

#log-close:hover {
   filter: drop-shadow(0 0 .2rem var(--sc));
}