@font-face {
            font-family: 'Gill Sans';
            src: url('Gill Sans.otf') format('opentype');
        }
        * {
            font-family: 'Gill Sans', sans-serif;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #e3e3e3;
            text-align: center;
        }
        .header {
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            height: 100px;
        }
        
        .logo-group {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .about-link {
            color: rgb(119, 119, 119);
            text-decoration: none;
            font-size: 1.1rem;
            white-space: nowrap;
        }
        
        .header img:first-child {  /* geopostie.png */
            height: 60px;
        }
        
        .header img:last-child {  /* postie.png */
            height: 100px;
            margin-left: auto;
        }
		/* Prevent horizontal scrolling */
        body, html {
            overflow-x: hidden;
        }

        /* Ensure the container doesn't cause overflow */
        .container {
            max-width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }

        /* Ensure the images are responsive */
        .header img {
            max-width: 100%;
            height: auto;
        }

        /* Ensure the QR code image doesn't cause overflow */
        .container img {
            max-width: 100%;
            height: auto;
        }

        /* Remove excessive margin or padding from elements */
        .container, .card {
            margin-left: 0;
            margin-right: 0;
        }
        .header img:first-child {
            height: 60px;
            margin-left: 10px;
        }
        .header a img:first-child {
            height: 60px;        /* Set the desired height */
            margin-left: 10px;    /* Add left margin */
        }
        .header img:last-child {
            height: 100px;
            margin-right: 10px;
            position: relative;
            top: 0px;
        }
        .container {
            background: #e3e3e3;
            padding: 20px;
        }
        .input-box {
            width: calc(100% - 40px);
            height: 200px;
            margin: 10px 0;
            font-size: 16px;
            padding: 10px;
            border: 1px solid #999;
            border-radius: 5px;
            border: none;
        }
        .coord-box {
            display: flex;
            justify-content: flex-start;
            padding-left:20px;
            gap: 10px;
            margin-bottom: 15px;
        }
        .coord-box input {
            width: 80px;
            height: 40px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #999;
            border-radius: 5px;
            border: none;
        }
        .gps-button {
			width: 40px;
			height: 40px;
			border: none;
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}

		.gps-button .icon {
			width: 20px; /* Adjust size of the icon */
			height: 20px; /* Adjust size of the icon */
		}

        /* Remove custom qr-button styling */
        .qr-button {
            width: 80%;
            height: 70px;
            margin-top: 100px;
        }
		.container {
    background-color: white; /* White background for the container */
    padding: 30px; /* Padding inside the container */
    border-radius: 8px; /* Rounded corners */
    margin-top: 20px;
    max-width: 700px; /* Ensure it doesn't stretch too wide */
    margin-left: auto;
    margin-right: auto; /* Center the container horizontally */
}
		
.coord-helper {
    margin-top: 8px;
    text-align: center;
}

		@media (max-width: 576px) {
        .container {
            max-width: 350px; /* Apply max-width of 350px for mobile devices */
            padding: 20px; /* Reduce padding on smaller screens for better spacing */
        }
		}

        @media (max-width: 576px) {
            .header {
                padding: 0 10px;
                height: 80px;
            }
            
            .logo-group {
                gap: 10px;
            }
            
            .header img:first-child {
                height: 50px;
            }
            
            .header img:last-child {
                height: 80px;
            }
            
            .about-link {
                font-size: 1rem;
            }
        }

        .compact-item { padding: 0.4rem 0.6rem !important; }

/* put timestamp + message on one line, wrap nicely if needed */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;           /* small space instead of a dash */
  white-space: normal;    /* collapse template newlines */
  overflow-wrap: anywhere;
}

/* keep user-entered newlines inside the message if you want them */
.meta-line .msg { white-space: pre-wrap; }

/* coords smaller and quieter */
.coords { font-size: 0.85rem; opacity: 0.8; margin-top: 0.15rem; }