<style type="text/css">
	/* Para toda a página */
::-webkit-scrollbar {
  width: 15px; /* Largura da barra de rolagem */
}

/* Cor de fundo da trilha (a parte por onde o "polegar" desliza) */
::-webkit-scrollbar-track {
  background: #003171;
}

/* Cor e estilo do "polegar" (a parte que você arrasta) */
::-webkit-scrollbar-thumb {
  background: #00224c; /* Cor do polegar */
}

/* Cor do polegar ao passar o mouse */
::-webkit-scrollbar-thumb:hover {
  background: #001939;
}
	* {
    box-sizing: border-box; /* Garante que padding e border sejam contados DENTRO da largura */
}
	
body {
	overflow-x: hidden;
	font-family: Google Sans Flex, Google Sans, Helvetica Neue, sans-serif;
	
	letter-spacing: 0.4px;
	font-size: 20px;
	color: #F2f2f2;
	
	background: #003171 url('bg6.png') center center no-repeat fixed;
    background-size: cover;

	
	min-height: 100%;
	
	margin: 0;
	padding: 0px;
	width: 100%;
 	display: flex;
    flex-direction: column; /* um abaixo do outro */
    align-items: center;  
}

	#Logo {
    width:100%;
    height: 200px;
	min-height: 200px;
	max-height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; /* centraliza conteúdo interno */
    align-items: center;
    font-size: 32px;
    font-family: Arial, sans-serif;
    color: white;
		margin: 0px;
		padding: 0px;
    margin-top: 0px; /* espaço do topo */
	background-image:  url('logo.png');
	background-repeat: no-repeat;
	background-size: contain;
  }
#Menu 
{
    width: 100%;
    max-height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
	padding-bottom: 5px;
	margin: 0px;
    gap: 10px; /* espaçamento entre os botões */
	
	color: #D7D7D7;
	text-shadow: 0px 0px 3.5px #000000;
  }

  /* divs que funcionam como botões */
 .botao 
{
    min-width: 50px;
    height: 45px;
    background-color: #4CAF50;
	display: flex;
    justify-content: center;
    align-items: center;
	
	text-shadow:
    -1.3px -1.3px 1.1px #000,  /* Canto superior esquerdo */
     1.3px -1.3px 1.1px #000,  /* Canto superior direito */
    -1.3px  1.3px 1.1px #000,  /* Canto inferior esquerdo */
     1.3px  1.3px 1.1px #000;  /* Canto inferior direito */
    
    color: var(--gem-sys-color--on-surface);
    font-family: Google Sans Flex, Google Sans, Helvetica Neue, sans-serif;
    font-size: 22px;
	font-weight: bold;
	letter-spacing: 1.4px;
	
    cursor: pointer;
	
    border-radius: 4px;
    transition: background 0.3s;
	
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	
  }

  .botao:hover 
	{
    background-color: #FF5C00;
  }
#Pagina 
{
	overflow: hidden;
	box-sizing: border-box;
    width: 1024px;
    min-height: 150px;
	
    display: flex !important;
  	flex-direction: column !important; /* força coluna */
  	align-items: center;  
    justify-content: center;
    padding: 5px;
    gap: 10px; /* espaçamento entre os botões */
	
	color: #D7D7D7;
	text-shadow: 1px 1px 2px black;
  }
	
	#Pagina ul
	{
		font-weight: bold;
		min-width: 79%;
		border: 1px solid #252525;
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.2);
		font-size: 24px;
		line-height: 30px;
		text-shadow: 0px 0px 3.5px black;
		
		
	}
	#Pagina li
	{
		font-weight: 350;
		font-size: 20px;
	}
	#Pagina a
	{
		color: aliceblue;
		text-decoration: none;
	}
	#Pagina a:visited
	{
		color: aliceblue;
		text-decoration: none;
	}
	#Pagina a:hover
	{
		color: aqua;
		text-decoration: none;
	}
	#Pagina table
	{
		border: 1px solid #111111;
		padding:  0px;
		margin:  0px;
		border-spacing:  1px;
		width: 80%;
	}
	#Pagina td
	{
		background-color: rgba(0, 0, 0, 0.5);
		padding:  0px;
		padding-left: 5px;
		font-size:  20px;
	}
	#post
	{
		
		text-align: center;
		border-radius: 6px;
		margin: 0px auto;
		min-width: 80%;
		max-width: 80%;
	}
	#post i
	{
		font-size: 10px;
		line-height: 14px;
	}
	#post ul {
		margin: 0px auto;
		padding: 2px;
		list-style-type: none;
		spacing: 5px;
		min-width: 80%;
		max-width: 80%;
		border: 0px;
	}
	#post li {
		padding-left: 10px;
		padding-right: 10px;
		background-color: rgba(0, 0, 0, 0.2);
		margin: 2px;
		border: 0px solid #000;
		border-radius:  4px;
		text-align: left;
		font-size: 18px;
	}
	#post h2
	{
		line-height: 30px;
    	margin: 0px auto;
    	margin-top: 10px;
		margin-bottom: 6px;
    	background-color: rgba(0, 0, 0, 0.2);
    	min-width: 50%;
		max-width: 80%;
		border-radius: 4px;
	}
	#post h3 
	{
		background-color: rgba(0, 0, 0, 0.2);
		height: 22px;
		margin: 0px auto;
		padding:  0px;
		font-size: 20px;
		line-height: 22px;
		margin-top: 10px;
	}
	#post iframe
	{
		background-color: rgba(0, 0, 0, 0.5);
		display: block;
	}
	#rodape
	{
	width: 100%;
	height: 32px;
	background: rgba(0,0,0, 0.45);
	border-top: 1px solid #000;
	line-height: 32px;
	text-align: center;
	position: fixed;
	top: 100%;
	margin-top: -32px;
	font-size: 16px;
	font-style:  italic;
	color: #f2f2f2;
	}
</style>