body {
background-color: /*#f5f1e2;*/ #edeae2;
color: #1e336d;
font-family: 'Kurale', serif;
margin: 0;
}

a {
text-decoration: none;
color: #ff084c;
}

a:hover {
color: #cd0a54;
}

#topo{
margin: 0;
}

.corpofundo-vtm {
background-color: /*#f5f1e2;*/ #edeae2;
margin: auto;
max-width: 550px;
height: 100%;
padding: 10px;
font-family: 'Kurale', serif;
font-size: 1em;
color: #1e336d;
}

#banner-vtm {
margin-top: 60px;
margin-left: auto;
margin-right: auto;
max-width: 300px;
width: 80%; 
display: block;
z-index: 20;
}

.vtm p {
font-family: 'New Rocker', system-ui;
color: #b30d3a;
text-align: center;
margin-top: 7px;
}

#bolinhas-vtm {
font-size: 1.5em;
color: #1e336d;
}

.divisoria-vtm {
text-align: center; 
margin-bottom: 15px; 
margin-top: 15px;
}

.divisoria-vtm > img {
width: 200px;
}

.link-vtm {
color: #d1056f;
}

.menu {
font-family: 'New Rocker', system-ui;
color: #ff084c;
font-size: 1.3em;
}

.menu:hover {
color: #cd0a54;
}

.link-vtm:hover {
color: #ff559c;
}


.container {
display: flex;
flex-wrap: wrap;  
padding-left: 15px;
padding-right: 15px;
}

.item {
flex: 0 0 12px;
margin: auto;
text-align: center;
font-size: 0.8em;
font-family: 'New Rocker', system-ui;
color: #f87e6c;
}

.dropdown {
position: relative;
}

.dropbtn {
color: #ff084c;
background-color: /*#f5f1e2;*/ #edeae2;
border: none;
cursor: pointer;
font-family: 'New Rocker', system-ui;
font-size: 1em;
border-radius: 4px;
padding: 5px;
}

.dropdown-content {
display: none;
position: absolute;
text-align: left;
min-width: 120px;
background-color: /*#f0ead2;*/ #e3dfd2;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
border-radius: 4px;
font-family: 'New Rocker', system-ui;
font-size: 0.9em;
}

.dropdown-content a {
color: /*#d5404b;*/ #cd0a54;
padding: 5px 5px;
text-decoration: none;
display: block;
font-family: 'New Rocker', system-ui;
font-size: 1em;
}

.dropdown-content a:hover {
background-color: /*#f8f5ed;*/ #f8f7f3;
color: /*#f87e6c;*/ #f64286;
border-radius: 4px;
}

.dropdown:hover .dropdown-content {
display: block;
z-index: 50; 
}

.dropdown:hover .dropbtn {
background-color: /*#f0ead2;*/ #e3dfd2;
color: /*#d5404b;*/ #cd0a54;
padding: 5px;
}

.descricao-vtm p {
font-family: 'PT Serif', serif;
font-size: 0.9em;
text-align: left;
}

.descricao-vtm a {
color: #d5404b;
}

.descricao-vtm a:hover {
color: #f87e6c;
}

.descricao-vtm h3 {
font-family: 'New Rocker', system-ui;
font-size: 1.1em;
text-align: left;
color: #1e336d;
}

.details-vtm {
font-family: 'PT Serif', serif;
text-align: left;
font-size: 1em;
color: #1e336d;
}

.summary-vtm {
font-family: 'PT Serif', serif;
font-size: 0.9em;
color: #d1056f;
}

.summary-vtm:hover {
color: #ff559c;
cursor: pointer;
}

/* VOZES VOZES VOZES VOZES VOZES VOZES VOZES VOZES VOZES */

div.descricao-vtm i.vozes {
color: #af0030;
}

div.descricao-vtm b.ventrue {
color: #9111b1;
}

div.descricao-vtm b.gangrel {
color: #0fa04a;
}

div.descricao-vtm b.giovanni {
color: #7d7c45;
}

div.descricao-vtm h1 {
text-align:center;
margin-top: 15px;
color: #b30d3a;
}

.footer-vtm {  
margin: 0 auto;
padding: 5px 5px;
text-align: center;
font-size: 0.6em;
max-width: 500px;
font-family: 'New Rocker', system-ui;
color: #1e336d;
}

.botao-idioma-vtm {
position: fixed;     
bottom: 10px;        
left: 10px;         
z-index: 1000;       
background-color: #e3dfd2;
color: #1e336d;
border: none;
border-radius: 4px;
padding: 6px 8px;
font-size: 0.8em;
cursor: pointer;
box-shadow: 0 4px 4px rgba(0,0,0,0.2);
font-family: 'Kurale', serif;
font-size: 0.7em;
}

.botao-idioma-vtm:hover {
background-color: #f8f7f3;
color: #1e336d;
}

.botao-idioma-vtm:visited {
color: #1e336d;
}

.botao-topo-vtm {
position: fixed;     
bottom: 10px;        
right: 10px;         
z-index: 1000;       
background-color: #e3dfd2;
color: #1e336d;
border: none;
border-radius: 4px;
padding: 6px 8px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
font-family: 'Kurale', serif;
font-size: 0.7em;
}

.botao-topo-vtm:hover {
background-color: #f8f7f3;
color: #1e336d;
}

.botao-topo-vtm:visited {
color: #1e336d;
}

.vtm-float {
position: relative;
display: inline-block;
color: #bd63d1;
}

.vtm-float .vtm-float-img {
visibility: hidden;
width: 100px;
background-color: #e7dbb5;
border-radius: 10px;
color: white;
text-align: center;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; 
left: 50%;
margin-left: -50px;
opacity: 0;
transition: opacity 0.3s;
}

.vtm-float:hover .vtm-float-img {
visibility: visible;
opacity: 1;
}

.trilha{
text-align: center;
}

.trilha > p {
margin-bottom: 0px;
font-family: 'New Rocker', system-ui;
}

h1 {
font-size: 1.3em;
}