:root {
    --bg: #867e6dbf;
    --bg_wrapper: #183b1c;
    --bg_header: #701212;
    --bg_underline: #1a1313;
    --bg_content: #baccc7;
    --bg_color_button_hover: #a67b00;
    --bg_color_button: green;
    --bg_color_submit: #378e41;
    --bg_color_input: #4d433e;
    --bg_footer: #701212;
    --submit_form: #214d26;
    --off: red;
    --on: green;
    --txtnormal: #2b2b2b;
    --linkcolor: #26888a;
    --phone_number: #61dd6c;
    --color_header_h1: #58927e;
    --color_resto_title: #ffc071;
    --color_disclaimer: #e34f4f;
    --color_text_menu: #f8f8f8;
    --color_link: #bebcb7;
    --color_h1: #fce1b4;
    --color_text_shadow_h1: #ececec;
    --color_h3: #ae5050;
    --color_menu_title: #45d256;
    --color_menu_date: #ffd451;
    --color_menu_today: #e47575;
    --color_menu_price: #cec289;
    --color_label: #ffc071;
    --color_input_text: #ebebeb;
    --color_submit: #FFFFFF;
    --color_box_shadow_header: #7d7575;
    --color_box_shadow_underline: #7d7575;
    --color_box_shadow_a: #cdb67d91;
    --color_border_menu_container: #4a4a4a6b;
    --color_border_input: #747474;
    --color_border_underline: #794300;
    --small_screen: 1250px;
}

* {
    box-sizing: border-box;
    line-height: 1.2;
    font-size: 1rem;
}

html, body {
    width: 100%;
    min-height: 100dvh; /* Dynamic viewport height for toolbar resizing */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    font-family: Helvetica, sans-serif;
    color: #FCFFFB;
    text-align: center;
}

pre {
    text-align: left;
    font-family: Helvetica, sans-serif;
    margin-left: 400px;
    font-size: 1.1rem;
}

h1, h2, h3, h4, h5, h6, a, p, div {
    font-weight: normal;
    width: 100%;
    margin: 0;
    padding: 0;
}

h2, h3, h4, h5, h6 {
    margin-top: 0.5rem;
}

#lenap {
    position: absolute;
    top: 1rem;
    text-align: left;
    display: block;
    width: 20vw;
    padding: 1rem;
    background: transparent;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

#wrapper {
	width: 100%;
    max-width: 1100px;
    min-height: 90vh;
    margin: 1rem auto 0;
    background-color: #a38686;
    color: #bebcb7;
    box-sizing: border-box;
    box-shadow: 5px 4px 7px 1px #434846;
}

#header, #underline {
    display: inline-block;
    width: 100%;
    margin: 0;
}

#underline {
	padding: 10px;
    text-align: left;
    border-bottom: 3px solid #000000;
    background-color: #397967eb;
}

#header {
    /* min-height: 10rem; */
	background:transparent;
}

#content {
    width: 100%;
    display: inline-block;
    background-color: var(--bg_content);
    padding: 1rem;
    min-height: 70vh;
	border-bottom: 3px solid #000000;
}

#footer {
    display: inline-block;
    width: 100%;
    background:transparent;
	width: 600px;
    margin-bottom: 2rem;
    margin-top: 3rem;
    left: 3rem;
}

#banner-top{
min-width:200px;
max-width:360px;
display:block;
float:right;	
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
    display: inline-block;
}

@font-face {
    /* font-family: Comic; */
    /* src: url(comicbd.woff); */
}

p, a {
    font-size: 1.1rem;
    font-weight: normal;
}

p {
    display: block;
    color: var(--txtnormal);
	font-size: 1.1rem;
    margin-top: 0.5rem;
	/* text-indent:10px; */
}


a {
	display: inline-block;
    line-height: 1.15;
    text-decoration: none;
    padding: 0.3rem;
    color: var(--linkcolor);
    box-shadow: 3px 3px 5px 0px #3e3e3e;
    font-weight: bold;
    width: auto;
    border-radius: 6px;
}

ul,li
{
  margin:0;
  /* padding:0; */
}


.nav-menu,
.submenu {
  /* list-style: "\2794"; */
  list-style:none;
  margin:0;
  padding:0;
}

.main-nav {
  font-family: Arial, sans-serif;
  font-size:1rem;
  font-weight:bold;
}

.nav-menu {
  display: flex;
}

.nav-menu > li {
  position: relative; /* Important: for absolute positioning of submenus */
  display: block;
  padding: 5px 10px;
  color: white;
  text-decoration: none; 
  cursor:pointer;
  font-size:1.3rem;
}

.nav-menu > li:hover {
	background-color: #00af7d;
    color: #FFFFFF;
}

.nav-menu > li > a {
  display: block;
  padding: 5px 10px;
  color: white;
  text-decoration: none;  
}

.nav-menu > li > a:hover {
	background-color: #c23a3a;
    color: #FFFFFF;
}

.dropdown > .submenu {
  display: none;                    /* Hidden by default */
  position: absolute;
  top: 100%;                        /* Directly below the parent */
  left: 0;
  background: #844646;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;
}

.dropdown:hover > .submenu {
  display: block;                   /* Show on hover */
}

/* Submenu items */
.submenu li {
  position: relative;               /* For second-level positioning */
}

.submenu a {
	display: block;
    padding: 13px 1px 5px 8px;
    color: #ddd;
    text-decoration: none;
    box-shadow: none;
    border-bottom: 2px solid #350f0f;
    border-radius: unset;
}

/* .submenu a:hover { */
  /* background: #555; */
  /* color: white; */
/* } */

/* === Second Level Dropdown (To the Right) === */
.dropdown-submenu > .submenu.level2 {
  display: none;
  position: absolute;
  top: 0;                           /* Align with parent item */
  left: 100%;                       /* To the right of parent */
  min-width: 160px;
}

.dropdown-submenu:hover > .submenu.level2 {
  display: block;
}

#lenap a {
    display: block;
    font-size: 1rem;
    line-height: 1.1;
    margin-bottom: 0.4rem;
    max-width: 90%;
}

a:hover 
{
	background-color: #e82525;
    color: #FFFFFF;
}

h1 
{
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--color_header_h1);
    font-size: 2rem;
    line-height: 1;
    vertical-align: top;
	font-weight:600;
}

h2 {
    margin-bottom: 8px;
    padding-top: 8px;
    font-size: 2rem;
}

h3 {
    color: var(--color_h3);
    font-size: 1.4rem;
	font-weight:bold;
}

h4 {
    font-weight: bold;
    font-size: 1.3rem;
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0.5rem;
}

h5 {
    font-size: 1.6rem;
    font-weight: bold;
    padding-top: 1.5rem;
    border-top: 3px solid #224a22;
    border-right: 3px solid #276127;
    text-shadow: -5px 6px 9px #000000;
}

img 
{
    display: inline-block;
}



.topic.tile
{
    font-size: 1rem;
    text-align: left;
    max-width: 300px;
    display: inline-block;
    box-shadow: 2px 3px 9px 0px #2c2822;
    margin: 1rem;
    padding: 5px;
    border-radius: 5px;
	vertical-align:top;
}

.topic.username
{
	font-size:0.8rem;
	font-style: italic;
	text-align:right;
	font-weight:bold;
}

.topic.duration
{
	font-size:0.9rem;
	font-style: normal;
	text-align:left;
	font-weight:bold;
}

.topic.time
{
	font-size:0.8rem;
	font-style: italic;
	text-align:right;
}

.list.tile
{
    font-size: 1rem;
    text-align: left;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    box-shadow: 2px 3px 9px 0px #2c2822;
    margin: 1rem;
    padding: 5px;
    border-radius: 5px;
	vertical-align:top;
}


table, tr 
{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #323e33;
}

tr {
    height: 3rem;
}

td {
    text-align: left;
    max-width: 25%;
    font-size: 1.1rem;
    white-space: collapse;
    vertical-align: middle;
    border-collapse: collapse;
    border: 1px solid #323e33;
}

fieldset 
{
    background-color: #d9d9d9;
    border: none;
    margin-top: 10%;
    margin-bottom: 2%;
    width: 96%;
}

input, textarea, select, input[type=submit]
{
	color: #585858;
    background-color: #c7d6d1;
    border: #9b9b9b00 2px solid;
    font-size: 1.0rem;
    text-align: left;
    font-weight: bolder;
    display: block;
    max-width: 80%;
    margin: 0.2rem;
    padding: 0.2rem;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    line-height: 1;
    box-shadow: 5px 8px 9px #737b79;
}

select {
    background-color: #f4b3b3;
}

label {
    display: block;
    border: none;
    color: #939393;
    font-size: 0.8rem;
    text-align: left;
    padding-left: 0.5rem;
    margin-top: 1.2rem;
}

input[type=submit] {
    display: block;
    float: right;
    width: 7rem;
}

input[type=submit]:hover {
    cursor: pointer;
    background-color: #c23a3a;
    color: var(--color_submit);
}

#footer fieldset 
{
    margin-top: 5rem;
    max-width: 98%;
}

@media only screen and (max-width: 1250px) 
{
    * {
        line-height: 2;
		font-size: 1rem;
        margin: 0;
        padding: 0;
        text-align: center;
        max-width: 100%;
    }
	
    h2, h3, h4, h5, h6, p, a, .menu_div, .menu_title 
	{
        font-size: 1.05rem;
        font-weight: normal;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
	
    #header, #wrapper, #underline, #content, #footer 
	{
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
	
	#content
	{
		padding:2rem;
	}
	
	#lenap,#banner-top,#banner-bottom
	{
		display:none;	
	}
	
    #header 
	{
        margin-top: 1rem;
		/* overflow:hidden; */
		height:6vh;
    }
	
	a 
	{
        margin-bottom: 2px;
        line-height: 2;
    }
	
    #lenap a 
	{
        font-size: 3rem;
    }
}

@media only screen and (max-width: 410px) {
    html, body, #header, #wrapper, #underline, #content, #footer {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin-left: 0;
        margin-right: 0;
        left: 0;
    }
	
	#lenap{
	display:none;	
	}
	
	#banner-top,#banner-bottom{
	display:none;	
	}
	
	#logo{
	margin-right: 0vw;
	top: -7rem;
	}
}