.hero-image { 
    height: 335px; 
    background-image: url("image/heroimage.jpg"); 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: rgb(255, 255, 255); 
    border: 2px solid rgb(0, 0, 0); 
} 


.main-layout { 
    border: 2px solid rgb(0, 0, 0); 
    display: flex; 
    flex-direction: row; 
    gap: 20px; 
} 

.navigation-add { 
    border: 2px solid rgb(105, 105, 105); 
    width: 20%; 
} 

.navigation-view { 
    border: 2px solid purple; 
    width: 20%; 
} 

.content { 
    border: 2px solid rgb(255, 255, 255); 
    width: 60%; 
    order: 2; 
    padding: 20px; 
    background-color: rgb(255, 255, 255); 
    border-radius: 10px; 
} 


.navigation-add nav, 
.navigation-view nav { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
} 


.navigation-add a { 
    display: inline-block; 
    width: 50%; 
    background-color: #ffffff; 
    color: rgb(255, 255, 255); 
    text-decoration: none; 
    padding: 10px; 
    border-radius: 8px; 
    text-align: center;   
} 

.navigation-add a:hover { 
    background-color: #5aec0b;    
} 


input, 
select, 
textarea { 
    padding: 10px; 
    width: 80%; 
    border: 1px solid gray; 
    border-radius: 6px; 
} 


table { 
    width: 100%; 
    border-collapse: collapse; 
    background-color: white; 
} 
    
th { 
    background-color: #000000; 
    color: rgb(255, 255, 255); 
} 
    
th, td { 
    border: 1px solid rgb(255, 255, 255); 
    padding: 10px; 
    text-align: left; 
}



footer {
  background-color: #ffffff;
  padding: 10px;
  text-align: center;
  color: rgb(255, 255, 255);
}

:root{
    --bg: #21262b;          
    --panel: #171718;        
    --text: #000000;        
    --muted: #494c52;        
    --primary: #2b3031;      
    --primary-600: #1a1a1a;  
    --accent: #161817;      
    --accent-600: #eef1ef;  
    --warn: #bbbab8;        
    --border: #5e6166;      
    --surface: #2a2b2c;      
    --white: #d6cdcd;
  }
  
  
  * { box-sizing: border-box; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: linear-gradient(160deg, var(--bg), #e1e2e6 60%, #212224);
    color: var(--text);
    line-height: 1.5;
  }
  
  .hero-image h1,
  .hero-image p { margin: 0.25rem 0; text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5); }
  
  
  .main-layout{
    display: grid;
    grid-template-columns: 1fr;          
    gap: 20px;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  
  @media (min-width: 900px){
    .main-layout{
      grid-template-columns: 1fr 2fr 1fr;
      align-items: start;
    }
  }
  
  .navigation-add,
  .navigation-view,
  .content{
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  }
  
  
  .content{
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    padding: 24px;
  }
  
  
  .navigation-add h2,
  .navigation-view h2,
  .content h2{
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: 0.2px;
  }
  
  
  .navigation-add nav,
  .navigation-view nav{
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  
  
  .navigation-add a,
  .navigation-view a{
    display: inline-block;
    width: 100%;
    background-color: transparent;
    color: var(--text);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: left;
    border: 1px solid var(--border);
    transition: all 160ms ease-in-out;
  }
  .navigation-add a:hover,
  .navigation-view a:hover{
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 0 0 3px rgba(66, 68, 68, 0.25) inset;
  }
  .navigation-add a:is(:focus-visible),
  .navigation-view a:is(:focus-visible){
    outline: 3px solid rgba(54, 57, 58, 0.5);
    outline-offset: 2px;
  }
  
  
  .navigation-add a{ background: rgba(6,182,212,0.08); }
  .navigation-view a{ background: rgba(34,197,94,0.08); }
  .navigation-view a:hover{ box-shadow: 0 0 0 3px rgba(106, 107, 107, 0.25) inset; border-color: var(--accent); }
  
  
  input,
  select,
  textarea{
    padding: 12px 14px;
    width: 100%;
    max-width: 620px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  input::placeholder,
  textarea::placeholder{ color: var(--muted); }
  
  input:focus,
  select:focus,
  textarea:focus{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(240, 253, 255, 0.18);
  }
  
  
  input[type="submit"],
  .button-primary{
    display: inline-block;
    background-color: var(--primary);
    color: #001018;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 80ms ease, background-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 6px 14px rgba(40, 46, 48, 0.25);
  }
  input[type="submit"]:hover,
  .button-primary:hover{
    background-color: var(--primary-600);
    transform: translateY(-1px);
  }
  input[type="submit"]:active,
  .button-primary:active{
    transform: translateY(0);
  }
  
  
  table{
    width: 100%;
    border-collapse: collapse;
    background-color: #333435;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  thead th{
    background: linear-gradient(180deg, rgba(246, 254, 255, 0.25), rgba(255, 255, 255, 0.12));
    color: var(--white);
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  th, td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  tbody tr:nth-child(even){
    background: rgba(255,255,255,0.025);
  }
  tbody tr:hover{
    background: rgba(6,182,212,0.06);
  }
  
  
  .content .stack{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }
  
  
  @media (max-width: 899px){
    .navigation-add, .navigation-view{ order: 0; }
    .content{ order: 1; }
  }
  
  
  .button-accent{
    background: var(--accent);
    color: #161616;
  }
  .button-accent:hover{
    background: var(--accent-600);
  }
  .tag{
    display:inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
  }