.overlay-main {
	/* half-transparent background */
	background-color: rgba(211, 211, 211, 0.8);
	background-blend-mode: lighten;
	/* centerising background image */
    background-position: center center;
	background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

main {
    /* show scrollbar on necessary DOM area */
    overflow: auto;
}

article {
    position: relative;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: space-around;
	-ms-flex-pack: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

section.explain {
    /* font */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 10px;
}
section.explain > section {
    margin-bottom: 10px;
}
section.explain h1 {
    font-size: 4em;
}
section.explain h2 {
    font-size: 3.2em;
}
section.explain h3 {
    font-size: 2.4em;
}
section.explain p {
    font-size: 2em;
}
section.explain li {
    font-size: 1.6em;
    list-style-position: inside;
}

.album {
    position: relative;
    max-width: 50%;
    margin: 10px;
}

.swiper-slide img, .swiper-slide iframe {
    object-fit: contain;  /*contain*/
    align-items: center;
}

.slider-thumb .swiper-slide, .slider-album .swiper-slide {
    display: inline-block;
}

.slider-album .swiper-slide > * {
    width: 100%;
    height: 50vmin;
}

.slider-thumb .swiper-slide {
    width: 100%;
    height: 15vmin;
}

.slider-thumb .swiper-slide img {
    width: 100%;
    height: 100%;
}

.slider-thumb .swiper-slide i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font */
    /* font-family: "Font Awesome 5 Free"; */
    font-weight: 900;
    font-style: normal;
    font-size: 4em;
}

.slider-thumb .swiper-slide .movie {
    height: 100%;
    filter: opacity(50%) contrast(150%);
}

/* dark mode (setting only color or image in this section) */
@media (prefers-color-scheme: dark){
	.overlay-main {
		background-color: rgba(0, 0, 0, 0.8);
		background-blend-mode: darken;
	};
}

/* adjusting to small screen size */
@media screen and (max-width: 480px) {
    article {
        /* Center slide text vertically */
        display: block;
        -webkit-box-pack: inherit;
        -ms-flex-pack: inherit;
        -webkit-justify-content: inherit;
        justify-content: inherit;
        -webkit-box-align: inherit;
        -ms-flex-align: inherit;
        -webkit-align-items: inherit;
        align-items: inherit;
    }

    .album {
        max-width: 100%;
        margin: 20px 0;
    }
    
    .slider-album .swiper-slide > * {
        height: 50vh;
    }
}