* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }
      
      hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2rem 0;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;     
      background-color:#000000;
      background: url('abstract3c.webp') repeat;
      background-size: cover;
      font-family: system-ui, sans-serif;
      color: #E0E0E0;
    }  
    
    a {
      color: #d0F0d0;
    }         
    a:visited {
     color: #b388ff;
    }

    /* Top bar */
    header {
      background: rgba(0, 0, 0, 0.75);
      color: white;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }


    main {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 1.5rem;          
      flex-direction: column;    
      align-items:center;
    }

    .content {
      background: rgba(8, 8, 8, 0.98);
      padding: 2rem;
      border-radius: 12px;
      width: 100%;
      max-width: 1100px; 
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    } 
    
    .socialicon {
      max-width:32px;
    }   
    
    .navlink {
      color:#eeeeee;
      font-weight:bold; 
      text-decoration:none;    
     padding: 0 1rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;

     align-items:center;
     justify-content:center;  
     background-color:rgba(0, 0, 0, 0);    
     height:66%; 
     
     float:right;
     display: flex; 
     flex-wrap:nowrap;
    }                      
    
    .navlink:hover {
      background-color:rgba(100, 100, 100, 0.25); 
      transition: all 0.2s ease;
    } 
    
    .navlink a {
      text-decoration:none;
      color:#eeeeee;
      font-weight:bold;
    }   
    
    h1 a {
      color:#eeeeee;     
      text-decoration:none;
    }                                
    
    .related {
      color:#eeeeee;
      text-decoration:none;
    }
    
    .related a {
      color: #cccfcc;
      
      font-weight:500;   /* 400=normal, 700=bold*/
    }
    
    .blogpost_container {
      border: 1px solid;
      border-color:rgba(200, 225, 200, 0.25); 
      padding: 4px;
      border-radius: 8px;   
       transition: all 0.5s ease;
    }  
    
    .blogpost_container:hover {
      background-color:rgba(100, 100, 100, 0.25);
    }
    
    .blogpost {
      color:#eeeeee;
      text-decoration:none;
          
    }
    
    .blogpost_meta {
      /*color:#a0c0a0;*/
      color:rgba(150, 170, 150, 0.5);
    }                   
    
    p {
      margin-bottom: 0.5rem;
    }

    /* Footer */
    footer {
      background: rgba(0, 0, 0, 0.75);
      color: #A3A3A3;
      text-align: center;
      padding: 1rem;
      flex-shrink: 0;
      font-size: 0.9rem;
    }

    @media (max-width: 480px) {
      .content {
        padding: 1.25rem;
        border-radius: 8px;
      }
      header, footer {
        padding: 0.85rem 1rem;
      }
    }