/* Estilos gerais */
body, html {
width: 100%;
    padding: 0;
    background-color: #f5f5f5;
    margin: 0;
    background-image: url('/imagens/background.jpg');  
    background-repeat: no-repeat;
    background-size: cover; /* Garante que a imagem cubra 100% da largura e altura */
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: Arial, sans-serif;
    text-align: center;
    overflow: hidden;
}







html, body {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

/* Estilos para o menu horizontal */
#menu {
list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  height: 8%;
  width: 101%;
  background: linear-gradient(90deg, #d8ffc1, #4e5b3d, #eae72e);
  user-select: none;
  top: -15px;
  position: relative;
}


.MenuTopo {
border: 1px solid #b4ffdb;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  color: #dbd9d2;
  text-decoration: none;
  font-size: 7px;
  width: 10%;
  height: 56%;
  background: linear-gradient(180deg, #7ec17e, #3b4d28, #e3ab00);
  transition: background 0.2s ease-in-out;
  margin-right: 6px;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  margin-top: 8px;
  left: 81px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}



.MenuTopo:hover {
    color: #d5ba5d;
    transform: scale(1.05);
    font-size: 10px;
    background: linear-gradient(180deg, #ddc336, #1a2013, #afd7b1);
}

.price {
    font-weight: bold;
}

/* Estilos para a div de detalhes da pizza */
#pizza-details {
    display: none;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

#content {
    text-align: left;
    margin-top: 20px;
}

.imagem {
width: 8%;
  height: 75%;
  position: absolute;
  top: 7px;
  left: 1%;
}

footer {

 background: linear-gradient(90deg, #40642c, #82c432, #9d7f7f);
  color: #fff;
  text-align: center;
  padding: 4px;
  height: 7%;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



#main {width: 65%;text-align: center;border: 1px solid #ccc;border-radius: 10px;background: linear-gradient(45deg, #34402e, #eee, #68680d);height: 70.6%;z-index: 1;position: absolute;top: 9%;font-size: 10px;left: 16%;margin-top: 0%;}

/* Restante do seu código CSS permanece o mesmo */
		
#status_On_off{
width: 206px;
  height: 22px;
  font-size: 9px;
}
		
		
#status-label{
font-size: 6px;
  position: relative;
  top: -11px;
  left: 8px;
}
		
		
		
		
		
#DivStatus {
margin-top: 17px;
  left: 32px;
  position: relative;
  width: 188px;
  top: -5px;
	}	
	
	
	
	
	
	/* * Section Header */

.section-header {
	text-align: center;
}
.section-header h3 {/* font-family: 'Yellowtail', cursive; */color: #1a0f10;font-family: 'Yellowtail', cursive;font-size: 22px;letter-spacing: 0.8px;margin-bottom: -166px;margin-top: 0;top: 69px;left: 37%;position: absolute;}
.section-header h5 {
	color: #222;
	font-size: 22px;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.88px;
	margin-bottom: -65px;
	text-transform: uppercase;
}
.section-header p {color: #36481b;font-size: 15px;position: relative;width: 100%;top: -30px;display: grid;align-content: space-evenly;align-items: end;}


.modal-content {
background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  height: 115px;
  width: 421px;
  z-index: 2;
  position: absolute;
  left: -11%;
  font-family: 'Lucida Handwriting', 'Comic Sans MS', cursive;
}

.close {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 146px;
  font-size: 15px;
  background-color: #c6c6c1;
  height: 34px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 5px 15px #353535;
  border-radius: 8px;
}