body, html {
font-family: Arial, sans-serif;
/* background-color: #f0e6d2; */
background: url(/tools/numlife.webp);
color: #4a0e0e;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
img {
width:200;
float:left;
/*margin-top: -40px;*/
margin-bottom: 20px;
margin-right: 10px;
}
h1, h2 {
color: #8B4513;
text-align: center;
margin-bottom: 1rem;
}
.form-container {
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
form {
background-color: #fff;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 45%;
}
label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
input, select {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #8B4513;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #e42424;
color: white;
border: none;
padding: 0.75rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
width: 48%;
margin-left: 26%;
}
hr.new4 {
border: 1px solid #8B4513;
}
button:hover {
background-color: #860606cc;
}
#results {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.result-column {
width: 45%;
background-color: #fff;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background-color: #8B4513;
width: 280px;
margin: 1rem auto;
}
.grid-cell {
background-color: #fff;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
position: relative;
padding: 5px;
font-size: 1.9em;
line-height: 1.2;
}
.grid-cell::after {
content: attr(data-extra);
position: absolute;
top: 2px;
right: 2px;
font-size: 0.6em;
color: #DAA520;
}
.grid-cell .missing {
color: red;
font-size: 0.7em;
position: absolute;
bottom: 2px;
right: 2px;
}
.grid-label {
text-align: center;
font-weight: bold;
margin-bottom: 0.5rem;
}
footer {
text-align: left;
padding: 1rem;
background-color: #DAA520;
color: white;
}
footer a {
color: white;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
#modeSelector {
margin-bottom: 1rem;
text-align: center;
display: flex;
/*flex-direction: column;*/
align-items: center;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
margin-top: 8px;
}
#modeSelector label {
display: inline-flex;
align-items: center;
background-color: #fff;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
#modeSelector label:hover {
background-color: #f0f0f0;
}
#modeSelector input[type="radio"] {
margin-right: 8px;
width: auto;
}
#modeSelector input[type="radio"]:checked + span {
font-weight: bold;
color: #DAA520;
}
.missing-numbers-note {
font-weight: bold;
color: red;
}
.comparison-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.comparison-column {
width: 45%;
background-color: #fff;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}
@media print {
body {
background-color: white;
}
.container, .result-column, .comparison-column {
box-shadow: none;
}
button#printBtn {
display: none;
width: 2px;
}
}
/* Existing Media Query Adjustments for Better Responsiveness */
@media (max-width: 768px) {
.form-container, #results, .comparison-container {
flex-direction: column;
align-items: center;
}
form, .result-column, .comparison-column {
width: 90%; /* Ensures better readability on smaller screens */
margin: 10px 0;
}
h1 img {
width: 150px; /* Resize logo for smaller screens */
}
.home-icon img {
width: 25px; /* Reduce home icon size */
height: 25px;
}
#modeSelector label {
padding: 8px 10px; /* Reduce padding for smaller devices */
font-size: 14px; /* Adjust font size */
}
button {
font-size: 0.9rem; /* Adjust button font size */
padding: 0.6rem; /* Reduce button padding */
}
}
/* Existing Media Query Adjustments for Better Responsiveness */
@media (max-width: 768px) {
.form-container, #results, .comparison-container {
flex-direction: column;
align-items: center;
}
form, .result-column, .comparison-column {
width: 90%; /* Ensures better readability on smaller screens */
margin: 10px 0;
}
h1 img {
width: 150px; /* Resize logo for smaller screens */
}
.home-icon img {
width: 25px; /* Reduce home icon size */
height: 25px;
}
#modeSelector label {
padding: 8px 10px; /* Reduce padding for smaller devices */
font-size: 14px; /* Adjust font size */
}
button {
font-size: 0.9rem; /* Adjust button font size */
padding: 0.6rem; /* Reduce button padding */
}
}
/* Additional Styles for Ultra-Small Screens */
@media (max-width: 480px) {
body, html {
font-size: 14px; /* Reduce base font size */
}
h1, h2 {
font-size: 1.2rem; /* Adjust heading sizes */
}
.footer {
font-size: 12px; /* Smaller footer text */
padding: 8px;
}
/* PRINT & GRID STYLES */
@media print {
/* hide forms and nav or any element you don't want in PDF */
#numerologyForm1, #numerologyForm2, #modeSelector, header, nav, footer, .no-print {
display: none !important;
}
body {
margin: 12mm;
-webkit-print-color-adjust: exact;
color-adjust: exact;
font-size: 12pt;
}
/* ensure results area uses full printable width and fixed layout */
#results, .result-column, .comparison-column {
width: 100% !important;
box-sizing: border-box;
}
/* grid as fixed 3x3 table for consistent printing */
.grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
width: 220px; /* fixed physical size to keep layout stable */
margin: 0 0 12px 0;
page-break-inside: avoid;
align-items: stretch;
}
.grid-cell {
border: 1px solid #222 !important;
min-height: 56px;
padding: 6px;
text-align: center;
font-size: 14pt;
line-height: 1.1;
position: relative;
background: #fff;
color: #000;
}
.cell-extra {
position: absolute;
top: 4px;
right: 6px;
color: goldenrod;
font-weight: 700;
font-size: 10pt;
}
.missing {
color: #c00;
font-weight: 700;
display: block;
margin-top: 6px;
}
/* make headings and lists printable & nicely spaced */
h2, h3, h4, p { color: #000; }
ul { margin: 6px 0 12px 20px; }
li { margin-bottom: 4px; }
/* avoid breaking a significance/remedies block across pages */
h3 + p, h3 + .significance-block, .remedies-block {
page-break-inside: avoid;
}
}
/* Non-print (screen) small tweaks for stability */
.grid { max-width: 320px; }
}