@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}



body{
    background-image: url('../assets/backgrounds/tileBackground.jpeg');
    background-size: contain;
    background-position: center;
    font-family: 'Special Elite', cursive !important;
}

svg {
    width: 2rem;
}


.navbar {
    background-color: white;
    font-family: 'Special Elite', cursive;
    text-transform: uppercase;
    font-size: 1.5rem; /* enlarge font */
    font-weight: bold;
    letter-spacing: 0.05em;
}

.navbar-nav {
    justify-content: center;
    width: 100%;
}

.nav-link {
    color: black !important;
    margin: 0 1rem;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.nav-link:hover {
    border-bottom: 2px solid gray;
}

.nav-link.active {
    border-bottom: 3px solid black;
}

.slogan{
    margin-top: -3rem;
}

.navbar.fixed-top-corner {
    position: fixed;
    top: -3rem; /* Adjust to position the navbar at the top corner */
    left: 0;
    width: 100%;
    z-index: 1050; /* Ensure it stays above other elements */
    background-color: white; /* Adjust background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
    transition: top 0.3s ease; /* Smooth transition for the fixed position */
}

.typography:hover {
    color: gray !important;
    text-decoration: none;
    transform: scale(1.5);
}

.bg-custom{
    background-image: url('../assets/backgrounds/inside.jpeg');
    background-size: contain;}

.menu-board {
    font-family: 'Gloria Hallelujah', cursive;
}

.chalkboard {
    border: 3rem solid transparent;
    border-image: url('../assets/backgrounds/woodTexture.jpeg') 40 round;
    background-image: url("../assets/backgrounds/chalkboard.png");
    border-color: burlywood;
    color: white;
    padding: 2rem;
    font-family: 'Chalkduster', 'Gloria Hallelujah', sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));
}


.menu-title {
    font-size: 2.5rem;
    font-weight: bold;
}

.menu-subtitle {
    font-size: 1rem;
    margin-top: -10px;
}

.menu-lang {
    /*font-size: 1.5rem;*/
    text-decoration: underline;
}

.menu-item {
    font-size: 1rem;
}

.beer-tap{
    background-image: url("../assets/backgrounds/beerTaps.jpeg");
    background-size: cover;
    background-position: center;
    oppacity: 0.8;


}

.table_custom { --bs-table-bg: transparent !important; }

/* Custom styles for the footer */
.note-grid li {
    list-style: none;
}

.note-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.note-grid li a.note-link {
    text-decoration: none;
    color: #000 !important;
    background: #ffc url('../assets/backgrounds/paperTexture.jpeg');
    background-size: cover;
    background-blend-mode: multiply; 
    display: block;
    height: 20em;
    width: 20em;
    padding: 1em;
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    transform: rotate(-6deg);
    transition: transform .15s linear;
}

.note-grid li:nth-child(even) a.note-link {
    transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #cfc url('../assets/backgrounds/paperTexture.jpeg');
    background-size: cover;
}

.note-grid li:nth-child(3n) a.note-link {
    transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #ccf url('../assets/backgrounds/paperTexture.jpeg');
    background-size: cover;
}

.note-grid li:nth-child(5n) a.note-link {
    transform: rotate(5deg);
    position: relative;
    top: -10px;
}

.note-grid li a.note-link:hover,
.note-grid li a.note-link:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}

.note-grid li {
    margin: 1em;
}


.about-us-image {
    background-image: url('../assets/backgrounds/beerTaps.jpeg');
    background-size: cover;
    background-position: center;
    height: 35rem; /* Adjust height as needed */
}

.control-report:hover {
    transform: scale(1.3);
    transition: scale 0.3s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent gray layer */
    z-index: 1;
}


@media (max-width: 768px) {
    .chalkboard {
        border: 1.5rem solid transparent;
        border-image: url('../assets/backgrounds/woodTexture.jpeg') 40 round;
        background-image: url("../assets/backgrounds/chalkboard.png");
        color: white;
        padding: 2rem;
        font-family: 'Gloria Hallelujah', cursive;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));
    }

    .navbar.fixed-top-corner {
        top: 0;
        width: auto;
        background-color: transparent;
    }
}