@font-face {
    font-family: 'Inter';
    src: url('font.ttf') format('truetype');
}

* {
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}


/* ========================     */
/* STYLED IDs                   */
/* ========================     */

#slideshow-layout {
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


#background-image {
    filter: blur(20px);
    -webkit-filter: blur(20px);
    height: 125vh;
    width: 100%;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    z-index: 1;
}

#slideshow-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* This makes sure the image maintains its aspect ratio */
    z-index: 2;
}

#hide-current-image {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: transparent;
    height: 25px;
    cursor: pointer;
    visibility: hidden;

    filter: drop-shadow(0px 0px 1px #FFFFFF);
    z-index: 2;
}

/* ========================     */
/* STYLE CLASSES                */
/* ========================     */

.label {
    position: absolute;
    bottom: 3vh;
    left: 3vh;
    color: #FFFFFF;
    font-family: "Inter", serif;
    background: transparent;
    font-size: 30px;
    text-align: left;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: 2;
}

.weather {
    position: absolute;
    bottom: 3vh;
    right: 3vh;
    text-align: right;
    background: transparent;
    z-index: 2;
}

.weather-label {
    text-align: right;
    color: #FFFFFF;
    font-family: "Inter", serif;
    background: transparent;
    font-size: 30px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    flex-grow: 0;
    z-index: 2;
}

.weather > * {
    background: transparent;
}

/* ========================     */
/* FADE IN ANIMATION            */
/* ========================     */

.fade-in {
    animation: fadeIn ease 500ms forwards;
    -webkit-animation: fadeIn ease 500ms forwards;
    -moz-animation: fadeIn ease 500ms forwards;
    -o-animation: fadeIn ease 500ms forwards;
    -ms-animation: fadeIn ease 500ms forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ========================     */
/* FADE OUT ANIMATION           */
/* ========================     */

.fade-out {
    animation: fadeOut ease 500ms forwards;
    -webkit-animation: fadeOut ease 500ms forwards;
    -moz-animation: fadeOut ease 500ms forwards;
    -o-animation: fadeOut ease 500ms forwards;
    -ms-animation: fadeOut ease 500ms forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#control-panel {
    position: absolute;
    bottom: 50px;
    top: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 3vh;
    z-index: 3;
}

#control-panel div {
    flex: 1;
    height: 100%;
    opacity: 0; /* Make the zones invisible */
    cursor: pointer;
}