:root {
  --primary-color: #2563eb;   
  --text-dark: #1f2937;      
  --bg-light: #f9fafb;    
  --white: #ffffff;
  --font-main: 'Cambria', serif;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
}

nav, main {
  max-width: 750px;
  margin-left: auto; 
  margin-right: auto;
}

img {
  border-radius: 4px;
}

nav {
  display: flex;            
  justify-content: space-between; 
  align-items: center;       
  position: fixed;
  top: 0;
  left: 0;                  
  right: 0;                 
  padding: 0.1rem 2rem;  
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box; 
  
  background-color: var(--white); 
  background-repeat: no-repeat;   
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
                    url("../static/yash0.png");
  
  background-size: cover;
  background-position: center;
}

nav a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

main {
  padding: 20px;  
}

section {
  padding-top: 90px; 
  border-bottom: 10px solid #eee;
}

section#hjem img {
    float: right;        
    margin: 0 0 10px 15px; 
    width: 250px;        
    height: auto;
}

section#tjenester img {
    float: right;        
    margin: 0 0 10px 15px; 
    height: auto;
}

.hamburger {
  display: none; 
  flex-direction: column;
  cursor: pointer;
  background: none;
  border: none;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #333;
}

@media (max-width: 568px) {
  .hamburger {
    display: flex;
  }

  nav ul {
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: white;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }

  nav ul.active {
    display: flex;
  }
  
}

.bottom-grid {
  display: flex;
  flex-direction: row; 
  gap: 2rem;           
  margin-top: 3rem;    
  align-items: flex-start;
}

@media (max-width: 600px) {
  .bottom-grid {
    flex-direction: column; 
  }
}

#kontakt, #hurtiglink {
  flex: 1; 
}

#kontakt a, #hurtiglink a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
}

.team-matrix {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #333;
}

.team-matrix th, 
.team-matrix td {
    border: 1px solid #333;
    padding: 8px;
    text-align: center;
    height: 25px;
}

.team-matrix thead th {
    background-color: #ffffff;
    font-weight: normal;
}

.team-matrix td:first-child {
    text-align: left;
    width: 120px;
}

.total-cell {
    font-weight: normal;
}

.highlight-yellow {
    background-color: #ffcc00; 
    background-color: rgba(255, 210, 142, 0.6);
}

.highlight-red {
    background-color: rgba(255, 0, 0, 0.6);
    color: white;
}