* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;      
      font-family: system-ui, -apple-system, sans-serif;
    }
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #333;
      padding: 10px;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropbtn {
      border: none;
      padding: 10px 14px;
      cursor: pointer;
      color: white;
      font-weight: bold;
      font-size: 14px;
      border-radius: 4px;
      background: #922b21; /* Default; override inline */
    }
    .dropbtn:hover {
      opacity: 0.8;
    }
    .dropbtn a {
      color: white;
      text-decoration: none;
    }
    .dropdown-content-small {
      display: none;
      position: absolute;
      background: white;
      min-width: 250px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      z-index: 1001;
      border-radius: 4px;
      padding: 10px;
      top: 100%;
      left: 0;
    }
    .dropdown:hover .dropdown-content-small {
      display: block;
    }
    .dropdown-content-small a {
      color: #333;
      padding: 8px 12px;
      text-decoration: none;
      display: block;
    }
    .dropdown-content-small a:hover {
      background: #f0f0f0;
    }
    .iframe-container {
      position: fixed;
      top: 70px; /* Navbar height + padding */
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      gap: 2px;
      padding: 2px;
      height: calc(100vh - 70px);
    }
    iframe {
      flex: 1;
      border: none;
      background: white;
      overflow: hidden;
    }
    /* Mobile: Stack iframes */
    @media (max-width: 768px) {
      .navbar {
        flex-direction: column;
        gap: 2px;
      }
      .dropbtn {
        width: 100%;
        text-align: left;
      }
      .dropdown-content-small {
        position: static;
        min-width: auto;
        box-shadow: none;
      }
      .iframe-container {
        flex-direction: column;
        top: 150px; /* Taller navbar on mobile */
        height: calc(100vh - 150px);
        overflow: hidden;
      }
      iframe:first-child {
        height: 50%;
      }
      iframe:last-child {
        height: 50%;
      }
    }

@viewport 	{width: device-width; zoom: 1.0;}


    /* Reset some defaults */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

	p { margin-bottom: 10px; }

header, footer {
      text-align: center;
      padding: 12px;
      background: #f2f2f2;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    .card {
      background: #ffffff;
      padding: 12px;
      margin: 8px 0;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Images scale on small screens */
    img {
      max-width: 100%; /* [web:5] */
      height: auto;
      display: block;
    }

    /* Responsive layout example */
    .grid {
      display: flex;
      flex-wrap: wrap; /* [web:5] */
      gap: 8px;
    }

    .grid-item {
      flex: 1 1 calc(50% - 8px); /* 2 columns on larger phones */
      min-width: 140px;
      background: #e8f0fe;
      padding: 8px;
      border-radius: 4px;
      text-align: center;
    }

    /* Adjust for very small screens */
    @media (max-width: 480px) { /* [web:2] */
      body {
        padding: 8px;
      }
      .grid-item {
        flex: 1 1 100%;
      }
    }


tr:hover	{ }

       body		{text-align: justify; text-justify: inter-word;	height: 100vh; margin: 50; font-family: Arial, sans-serif; line-height: 1.3;}

        h1 {
            color: white;
			background-color:green;
            text-align: left;
            font-size: 2em;
            left-margin: 20px 0;
        }

        h3 {
            color: #333;
            text-align: center;
            font-size: 1.2em;
            margin: 10px 0;
        }

		table {
			width: 100%; 
			text-align: left; 
			border: 1px solid #ddd; 
			width: auto; 
			table-layout: auto;
			border-collapse: collapse;
            border: 1px solid #ccc;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center-left;
            width: fit-content;
        }
		td:hover 	{background-color: #2222}
        th {background-color: #f2f2f2;  text-align: center;	}
		td.header {color: white; background-color:green; text-align: left; font-size: 1.3em; left-margin: 20px 0;}
		tr.header	{font-size: 1.4em; background-color:black; color: white; text-align: left; margin-left:100px; height:40px;}
		
img     	{float: right; margin-right:100px; }

.image-container img { overflow: hidden; display: block; transition: transform 0.3s ease-in-out; }
.image-container img:hover { transform: scale(2.0);}