/* ------------------------------
   EDITABLE SETTINGS
--------------------------------*/

:root {

/* Slideshow timing */
--slide-duration: 5s;
--fade-duration: 1s;

/* Photo overlay (color + translucency) */
--photo-overlay-color: rgba(255,255,255,0.35);

/* Center box settings */
--centerbox-color: rgba(50,50,50,0.8);
--centerbox-area: 20vw;
--centerbox-aspect: 1.0;

/* Logo size */
--logo-size: 70%;

}

/* ------------------------------ */

html, body {
margin:0;
height:100%;
overflow:hidden;
font-family:Arial, sans-serif;
}

#slideshow {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

.slide {
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity var(--fade-duration) linear;
}

.slide.active {
opacity:1;
}

#photoOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--photo-overlay-color);
pointer-events:none;
}

#centerBox{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:calc(var(--centerbox-area));
height:calc(var(--centerbox-area) * var(--centerbox-aspect));

background:var(--centerbox-color);

display:flex;
align-items:center;
justify-content:center;

border-radius:8px;
}

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

#copyright{
position:fixed;
bottom:10px;
width:100%;
text-align:center;
font-size:14px;
color:#333;
}