:root{
    --image-width : 10rem;
    --image-height: 100%;
    --overview-gap: 2.5rem;
}

/* *{
    border: 2px solid red;
} */


body{
    padding: 10%;
    background-image:url("../image/backgrounds/mooning.png");
    background-color: rgb(39, 35, 35);
    display: flex;
    flex-flow: column nowrap;

    overflow: hidden;
}

header{
    margin: auto;
    text-align: center;
}

footer{
    color: rgba(255, 255, 255, 0.856);
    margin-top: 10%;
}

/* --------------------------- Movie Theater ------------------------------- */

#movie-theater {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-image: url("movie-theater.png");
    
    background-repeat: no-repeat;
    background-size: 65rem;
    background-position: center;
}

#movie-theater::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-image: url("movie-theater.png");
    
    background-repeat: no-repeat;
    background-size: 65rem;
    background-position: center;
    z-index: 3;
    pointer-events: none;     /* Let's mouse input through*/
}

#movie-display {
    position: absolute;
    top: 47%;
    left: 50%;
    min-width: 41rem;
    min-height: 23rem;
    max-width: 41rem;
    max-height: 23rem;

    background-color: rgb(14, 14, 14);

    transform: translate(-50%, -75%);
    z-index: 2;
}

#movie-display p {
    padding: 1rem;
}

/* --------------------------- Overview of reading items ------------------------------- */

.overview-layout{
    position: fixed;
    top: 72vh;
    bottom: 0;
    left: 0%;

    width: 100vw;
    height: 30vh;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding-left: calc(10vw - var(--image-width)); 
    align-items: center;
    gap:var(--overview-gap);
    
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-behavior: smooth;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;

    border: 2px solid rgba(109, 109, 109, 0.4);
}

.item{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transition: all ease-in .2s;

    height: 100%;
    width: min(var(--image-width), calc(100vw - 2rem));
    flex: 0 0 min(var(--image-width), calc(100vw - 2rem));

    background-color: transparent;
    border: none;
}

.item img{
    width: var(--image-width);
    max-width: min(var(--image-width), calc(100vw - 2rem)); /* Prevents overflow */
    height: var(--image-height);
    max-height: calc(25vh);

    object-fit: contain;
    box-sizing: border-box;
}

.item .item-desc{
    position: absolute;
    max-width: 20px;
    max-height: 100%;

    text-align: center;

    background-color: rgba(37, 37, 37, 0.35);
    color: aliceblue;

    font-family: monospace;
    font-weight: bold;

    display: hidden;
    overflow: hidden;
    visibility: hidden;

}

.item:hover{
    transition-delay: 50ms;
    translate: 0 -10px;
    scale: 1.05;

    .item-desc{
        visibility: visible;
        min-width: calc(var(--image-width) / 2 + calc(var(--overview-gap) * 2));
    }
}

/* --------------------------- Extra  ------------------------------- */

  
.sentence {
	position:absolute;
	z-index:99;
	color:darkcyan;
	font-style:italic;
	letter-spacing:4px;
	font-size:20px;
    text-shadow: 1px 1px 4px black; 
	line-height:18px;
	width:100px;
	height:auto;
	bottom:10px;
	right:150px;
	text-align:right;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.vignette {
    top: 0;
    left: 0;
	background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
	position: fixed;
	width: 100%;
	height: 200%;
    pointer-events: none;
}

@media screen and (max-width: 1240px) {
    :root {
        --image-width: 18rem;
        --image-height: 27em;
    }
}

@media screen and (max-width: 1040px) {
    :root {
        --image-width: 13.5rem;
        --image-height: 22em;
    }
}

@media screen and (max-width: 840px) {
    :root {
        --image-width: 9.8rem;
        --image-height: 17em;
    }
}