@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sigmar&display=swap');

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #FFFFF0;
    position: relative;
}

.lcontainer {
    display: flex;
    justify-content: center;
    margin: 0 2vw 2vh 2vw;
    border-bottom: solid 5px #d26936;
}

.lcontainer img {
    width: 50vw;
    height: auto;
    padding-bottom: 1vh;
}

nav {
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: Oswald, Arial, sans-serif;
    font-size: 1.3em;
    margin-left: -2.2vw;
}

nav li {
    margin: 0 13px;
}

nav a {
    text-decoration: none;
    color: #d26936;
    padding: 5px 5px;
}

nav a:hover {
    opacity: 50%;
}


.icontainer {
    width: auto;
    height: auto;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.8);
    border: solid black 5px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 2vh;
    margin-bottom: 6vh;

}

.icontainer img {
    max-width: 60vw;
    max-height: 60vh;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    border: solid 6px #d26936;
    border-radius: 8px;
    object-fit: contain;
}

.capcontainer {
    position: absolute;
    bottom: 4vh;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.0);
    color: antiquewhite;
    text-align: center;
    text-justify: inter-word;
    padding: 0 2% .5% 2%;
    opacity: 1;
    transition: opacity 0.3s ease;
    font-family: "Permanent Marker", Oswald, Helvetica, serif;
    text-shadow:
        1px 1px 0 #000000,
        2px 2px 0 #111111,
        3px 3px 0 #333333,
        -1px -1px 0 #000000;
    box-sizing: border-box;
}

.icontainer:hover .capcontainer {
    opacity: 0;
}

.cookie {
    margin: 2vh 10vw;
    font-family: Sigmar, Arial, sans-serif;
    font-size: .9em;
    color: #d26936;
    justify-content: center;
    text-align: justify;
    padding: 1% 2% 1% 2%;
    border: solid 5px #d26936;
    background-color: antiquewhite;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
    border-radius: 8px;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s, transform 0.2s;
    outline: none; /* Prevents the faint outline */
    box-shadow: none; /* Ensures no additional shadow */
}

.nav-btn:focus {
    outline: none; /* Removes the default focus outline */
    box-shadow: none; /* Removes any unwanted shadow */
}

#prevBtn {
    left: 5px;
    opacity: 0%;
}

#nextBtn {
    right: 5px;
    opacity: 0%;
}

#prevBtn:hover {
    left: 5px;
    opacity: 85%;
}

#nextBtn:hover {
    right: 5px;
    opacity: 85%;
}

.icontainer:hover #prevBtn,
.icontainer:hover #nextBtn {
    opacity: 85%;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.nav-btn:active {
    transform: translateY(-50%) scale(0.9); /* Button press effect */
}


@media screen and (max-width: 600px) {
    .caption {
        font-size: 1.3em;
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .caption {
        font-size: 1.6em;
    }
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
    .caption {
        font-size: 1.9em;
    }
}

@media screen and (min-width: 1201px) {
    .lcontainer img {
        width: 40vw;
    }

    .caption {
        font-size: 2.2em;
    }
}

@media screen and (max-width: 1201px) {
    nav ul {
        flex-direction: row;
        align-items: center;
    }

    nav li {
        margin: 0;
    }
}