:root{
  --bg: #ffe6b3;     
  --card: #fff7e6;    
  --ink: #4d3319;     
  --brand: #86592d;   
  --line: #e6ccb3;    
  --sun: #f6d46b; 
}

body {
  background-color: #ffe6b3;  
  padding-left: 60px;
  padding-right: 60px;
  font-family: sans-serif;    
}

.footer-text {
  color: #4d3319;  
}

h1 {
  color: #fff7e6;          
  text-align: center;     
  border-radius: 15px;     
}

ul {
  background-color: #fff7e6; 
  padding: 30px;
  border: 1px solid #e6ccb3;
  border-radius: 15px;      
}


ul li {
  color: #4d3319 !important;
}

.footer-text{ color: var(--ink); opacity: .9; }

#hero{
  background: var(--brand);
  color: #fff7e6;
  padding: 12px 16px;
  border-radius: 14px;
}

footer p{ margin: 8px 0; }

#page-footer {
  background: var(--brand);       
  color: #fff7e6;                
  text-align: center;    
  padding: 16px 20px;
  border-radius: 16px 16px 0 0;  
  margin-top: 40px;
}

#page-footer a {
  color: #fff7e6;
  text-decoration: none;
  font-weight: bold;
}

#page-footer a:hover {
  color: #ffd96a;
}

header {
  position: relative;  
}

#logo {
  position: absolute;
  top: 4px;
  left: 14px;
  display: block;
  width: 80px;        
  height: auto;
  z-index: 1;  
}

#logo svg circle {
  fill: #4b2e05;      
  stroke: #ffffff;    
  stroke-width: 4px;  
}

#logo svg:hover circle {
  fill: #6b3b0a;      
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#logo svg {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

#logo svg:hover {
  transform: scale(1.05);
  cursor: pointer;
}