html		{ }
@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: left;
            width: fit-content;
        }
		td:hover 	{background-color: #2222}
        th {background-color: #f2f2f2;     }
		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;}
