:root {
            --primary-color: #0080ff;
            --secondary-color: #ff6d6d;
            --accent-color: #e74c3c;
            --light-bg: #e5e6e3;
            --card-bg: #fff;
            --text-color: #333333;
            --border-radius: 8px;
            --box-shadow: 2px 4px 6px rgba(46, 94, 252, 0.5);
        }
        
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f7fa;
      margin: 0 auto;
      max-width: 1024px;
    }

    h1  {
  font-size: 1.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: gray;
  margin: 1px 0;
  padding: 4px 4%;
}

    h2  {
  font-size: 1.1em;
  color: #fff;
  border-left: 5px solid #f71f1f;
  padding: 3px;
  background-color: #ff4141;
  margin: 0;
  text-align: center;
}

    h3  {
  font-size: 1em;
  color: #626060;
  margin: 2px 4%;
  padding: 2px;
} 

    h4  {
  font-size: 1.1em;
  color: #059341;
  padding: 10px 0 5px 4%;
  background-color: #fbf5ea;
}        
        header  {
  color: white;

}
        

p {
  color: gray;
}             
header p {
    margin: 0;
}        

ul, ol {
  padding: 1em 4%;
  background-color: wheat;
  border: 1px inset wheat;
  border-radius: 4px;
  color: #645002;
  list-style-type: myanmar;
}

a {
  text-decoration: none;
}        
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 10px;
            margin-bottom: 1em;
        }
        
        .requirements {
            background-color: #f8f9fa;
            border-left: 4px solid var(--accent-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }
        
        .concept-card {
            background-color: #e8f4fc;
            padding: 15px;
            border-radius: var(--border-radius);
            margin: 10px 0;
            border-left: 3px groove #ff4848;
        }
        
        .step {
            margin: 1em;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            padding: 0px 4%;
            background-color: #b5ffd2;
        }
        
        .step-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            /*! background-color: wheat; */
        }
        
        .step-content {
            display: none;
            padding-top: 15px;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .btn {
            color: #ff3838;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
            background: none;
        }
        
        .btn:hover {
            background: none;
            color: green;
        }
        
        .solution {
            background-color: #f0fff0;
            padding: 1em;
            border-radius: var(--border-radius);
            border-left: 3px solid #2ecc71;
            margin: 2em;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        table, th, td {
            border: 1px solid #b3b0b0;
        }
        
        th, td {
            padding: 7px 4%;
            text-align: left;
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
        }
        
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .network-icon {
            font-size: 1.2em;
            margin-right: 5px;
        }
        
        .diagram {
            text-align: center;
            margin: 10px 0;
            background-color: #ffcece;
            padding: 15px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .diagram pre  {
          background-color: #eaeaea;
          padding: 15px;
          border-radius: var(--border-radius);
          overflow-x: auto;
          font-family: 'Courier New', monospace;
          color: red;
        }
        
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .card, .step {
                padding: 15px;
            }
        }

        pre {
              background-color: #333439;
              padding: 1em 4%;
              overflow-x: auto;
              font-family: 'Courier New', monospace;
              color: white;
              border: 1px inset black;
              border-radius: 1em;
        }
        .command {
          color: #fff09d;
          font-weight: bold;
        }