.light{
    --bg1: #f3e8c1;
    --p: #373636; 
    --titule:#198754;
    --nav: #FFBE3B; 
    --bg2: #FFBE3B; 
    --titule2: #373636; 
    --p2: #373636;
    --bg3: #f3e8c1; 

}
.dark{
    --bg1: #141f07;
    --p: #eeeeee;
    --titule: #ebc640; 
    --nav: #f0dfa2; 
     --bg2:#f0dfa2; 
    --titule2: #198754; 
    --p2: #373636;
     --bg3:#141f07; 

    
}

body{

    background-color: var(--bg1);
}

p{
    color: var(--p);
}
.p-fundo-claro{
    color: var(--p2);
}

.card-text {
    color: #373636 !important;
}

h1 {
    color: var(--titule);
}
h2, h3{
    color: var(--titule2);
}

.h-fundo-escuro{
    color: var(--p);
}

.row {
margin-top: 85px;
margin-left:100px;
margin-right: 100px;
}

.min-vh-100 {
margin-top: 150px;
margin-bottom: -30px;
align-items: center;

}

#contador {
    font-size: 25px;
}

header {
background-color: var(--nav) !important;
width: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

.card-height {
height: 90%;
}

.icon {
    color: var(--p);
}

.st0 {
        fill: var(--bg2);
      }

.st1 {
        fill: var(--bg1);
      }
.st2 {
        fill: var(--bg3);
      }

.st3 {
        fill: var(--bg2);
      }

.ml-n5 {
    margin-left: 30px;
}
.caixa-favorite {
position: relative;
display: inline-block;
 
}
 
.overlay-favorite {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
font-family: Arial, sans-serif;
z-index: 1;
}
 
.overlay-favorite::after {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 5px;
 
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
 
z-index: 2;
}
 
 
.overlay-favorite:hover::after {
opacity: 1;
visibility: visible;
}


.clock {
   align-items: center;
   border: 4px  dotted   var(--titule);
   border-radius: 3%;
   color: var(--p2);
   display: flex;
   font-size: 80px;
   justify-content: center;
   height: 100px;
   width: 350px;
   animation: move 10s linear infinite;
}

.img-desenho  {
max-width: 400px;
animation: vento 5s ease-in-out infinite;

}

.nav-link:hover {
animation: line 3s linear infinite;
}

.buttonCarrinho:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


input, select, textarea{
    border-left-color: rgb(219, 243, 212) !important;
    box-shadow: rgba(251, 183, 141, 0.184) 0px 0px 0px 3.06918px !important;
    border-right-color: rgb(219, 243, 212) !important;
    border-top-color: rgb(219, 243, 212) !important;
    border-bottom-color: rgb(219, 243, 212) !important;

}

input:invalid, select:invalid {
  border-color: #dc3545 !important;
}

@keyframes line {
0% { text-decoration:underline; }
50% { text-decoration: none; }
100% { text-decoration: double;  }
}

@keyframes vento {
0%, 100% { transform: translateX(-8px) rotate(-5deg); }
50%      { transform: translateX(18px)  rotate(10deg); }
  }
  
@keyframes move {
0% { border-radius: 0 0; }
100% { border-radius: 50% 50%; }
 
}




@media (max-width: 768px) {
.row {
        margin: 20px;
        margin-top: 80px;
        align-items: center;
        display: flex;
        justify-content: center;

    }
.overlay-favorite::after {
display: none;
}

img {
    width: 100%;
    height: auto;
}
}