@font-face {
    font-family: 'Gotham Narrow';
    src: url('../fonts/GothamNarrow-Bold.woff2') format('woff2'),
        url('../fonts/GothamNarrow-Bold.woff') format('woff'),
        url('../fonts/GothamNarrow-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* Reset & base */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body, html {

margin: 0;

padding: 0;

overflow: hidden;

height: 100%;

font-family: "Gotham Narrow", sans-serif;

}



nav {

    position: fixed;

    /* z-index: 5555; */

    bottom: 0;

    left: 0;

    width: 100%;

}

body {
    line-height: 1.5;

    background-color: #f5f5f5;

    color: #222;

    padding: 0px;

}

a {

    color: #1e88e5;

    text-decoration: none;

}

header, footer {

    position: absolute;

    bottom: 0;

    width: 100%;

    z-index: 100;

}

main {

    margin: auto;

    height: 100vh;

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;

}

button, input, select, textarea {

    font: inherit;

    padding: 0.5rem;

    margin-top: 0.5rem;

    width: 100%;
    
    border-radius: 5px;

}

button {

    background-color: #b27a36;

    color: white;

    border: none;

    cursor: pointer;

}

button:hover {

    background-color: #b27a36;

}

.bt_main {
    bottom: 100px;
    position: absolute;
    width: 80%;
    
}



.help-walkthrough {

    width: 100%;

    margin: auto;

    padding: 1rem;

    font-family: sans-serif;
    
    background-image: url(../img/splash.png);
    
    overflow: scroll;
    justify-content: flex-start;
    padding-bottom: 150px;
    padding-top: 25px;

}

.help-walkthrough > img {
    width: 40%;
    mix-blend-mode: darken;
}

.help-walkthrough ol {
    width: 60%;
    margin-top: 40px;
    padding-bottom: 40px;
}

.help-walkthrough li {
    font-family: "Gotham Narrow", sans-serif;
    color: #b27a36;
}



.slide-container {

    position: relative;

    min-height: 150px;

    margin-bottom: 1rem;

}



.slide {

    display: none;

    font-size: 1.2rem;

}



.slide.active {

    display: block;

    animation: fadeIn 0.3s ease-in-out;

}



.slider-controls {

    display: flex;

    justify-content: space-between;

}



.slider-controls button {

    padding: 0.6rem 1.2rem;

    font-size: 1rem;

    cursor: pointer;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}


.splash img, .splash {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}


.collection-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    padding: 1rem;
    overflow: scroll;
    width: 90%;
    overflow-y: overlay;
    padding-bottom: 130px;
}


.collection-item {

    border: 1px solid #ccc;

    border-radius: 6px;

    padding: 1rem;

    width: 100%;
    
    display: flex;
    
    align-items: center;

}



.collection-item img {

    max-width: 100%;

    border-radius: 4px;

}



.login-container {

    max-width: 400px;

    margin: 2rem auto;

    padding: 1rem;

    font-family: sans-serif;

}



form {

    display: flex;

    flex-direction: column;

}



label {

    margin-top: 1rem;

    margin-bottom: 0.5rem;
    
    color: #a94501;

}



input {

    padding: 0.5rem;

    font-size: 1rem;

}



button {

    padding: 0.75rem;

    font-size: 1.3rem;

    cursor: pointer;

}



.error {

    color: red;

    margin-bottom: 1rem;
    
    text-align: center;
    margin-top: 2rem;

}



.marker {

    background-color: red;

    width: 20px;

    height: 20px;

    border-radius: 50%;

}



.mapboxgl-popup-close-button {

    display: none;

}



.mapboxgl-user-location-dot,

.mapboxgl-user-location-accuracy-circle {

    pointer-events: none !important;

}



.menu {

    display: flex;

    justify-content: center;

    margin-bottom: 15px;

    column-gap: 15px;

}

.menu img {
    width: 30px;
}



.menu li {

    display: block;

}



.menu_contrast {

    background: #ffffff91;

    filter: blur(33px);

    width: 12vw;

    height: 70px;

    border-radius: 400px;

    position: absolute;

    bottom: -30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: -2;

}



.button {

    font: inherit;

    padding: 0.75rem;

    margin-top: 0.5rem;

    width: 100%;

    display: block;

    text-align: center;

    background-color: #b27a36;

    color: white;

    border: none;

    border-radius: 4px;

    cursor: pointer;
    
    font-size: 1.3rem;

}

.button:hover {

    background-color: #b27a36;

}



#langSwitcher {

    position: fixed;

    top: 30px;

    left: 5%;

    width: 50px;

    padding: 2px 6px;

    font-size: 1rem;
    
    border: none;

    border-radius: 6px;

    background-color: transparent;

    color: #333;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px;

    transition: border-color 0.3s, box-shadow 0.3s;

}



#langSwitcher:focus {

    outline: none;

    border-color: #007BFF;

    box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);

}



select {

    margin: 0px;

}



#account {

    position: fixed;

    top: 35px;

    right: 5%;

}



.account {

    background: white;

    padding: 20px;

    position: fixed;

    top: 60px;

    right: 20px;

    border-radius: 5px;

    display: flex;

    flex-direction: column;

    display: none;

}



.open {

    display: flex;

}



.som {

    bottom: 20px;
    width: 35px;
    position: absolute;
    left: 5%;
    z-index: 555;

}



.som:hover {

    cursor: pointer;

}

#default-ar-button {
    display: none !important;
}



#debug-info {

    position: fixed;

    top: 10px;

    left: 10px;

    background: rgba(0,0,0,0.7);

    color: white;

    padding: 10px;

    font-family: monospace;

    font-size: 12px;

    z-index: 999;

    border-radius: 5px;

    max-width: 300px;

    display: none;

}

.item_interactions {
    display: flex;
    flex-direction: column;
    width: 90%;
}


.collect {

    width: 100%;

    height: 100%;

    justify-content: center;

    align-items: flex-end;


}



#collect {

    background: #f0bd00;
    
    color: #73440a;

    text-align: center;

    padding: 0.75em;
    
    font-size: 1.3rem;

    border-radius: 5px;

    line-height: 24px;
    
    margin-top: 20px;


    z-index: 3;

}





#collected {

    text-align: center;

    margin-top: 20px;

    border-radius: 5px;

    line-height: 24px;

    z-index: 3;
    
}



#login {

    background: #f0bd00;
    
    color: #73440a;

    text-align: center;

    padding: 0.75em 20px;

    border-radius: 5px;
    
    font-size: 1.3rem;
    
    margin-top: 20px;

    line-height: 24px;

    z-index: 3;

}



#collected a {

    padding: 8px 16px;

    background: #f0bd00;
    
    color: #73440a;

    border-radius: 5px;
    
    font-size: 1.3rem;
    
    line-height: 31px;
    
    width: 100%;
    display: block;
    
    margin-top: 10px;
    
    padding: 0.75rem;

}





#collected a:hover {

    background: lightgray;    

    cursor: pointer;

}

#ar-button {
    z-index: 555;
    width: 100%;
    margin-top: 20px;
}



model-viewer {

 height: 100% !important;
 width: 100% !important;
 padding-bottom: 70px;
}


.overlay {
    transition: 0.7s;
    overflow: scroll;
    overflow-x: hidden;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 100;
    display: flex;
    justify-content: center;
    background-image: url(../../assets/img/splash.png);
}

.overlay > img {
    position: absolute;
    width: 100%;
    object-fit: cover;
    top: 0;
}

.overlay > div {
    margin-top: 155vw;
    width: 90%;
    z-index: 5;
}

.overlay > div > div {
    display: flex;
    justify-content: space-between;
}

.overlay > div > div > img {
    height: 30px;
}

.overlay p {
    text-align: center;
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 20px;
    padding-bottom: 70px;
}

.overlay_login {
    transition: 0.3s;
    overflow: scroll;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-image: url(../../assets/img/splash.png);
    padding-bottom: 100px;
}

.container_login {
    transition: 0.3s;
}

.hide {
    opacity: 0;
    pointer-events: none;
}

.mapboxgl-popup-content h1 {
    text-align: center;
}

model-viewer::part(default-ar-button) {
    display: none;
  }