/* Set global font size */
html {
font-size: 16px; /* You can adjust this value */
}
body {
font-size: 1rem; /* 1rem will inherit the font size from html */
-webkit-user-select: none; /* For Safari and Chrome */
-moz-user-select: none; /* For Firefox */
-ms-user-select: none; /* For Internet Explorer/Edge */
user-select: none; /* Standard property */
}
@media (min-width: 992px) {
.newspaper-style {
column-count: 3; /* Two columns for large screens and above */
column-gap: 20px; /* Gap between columns */
text-align: justify; /* Justify text for newspaper feel */
}
.newspaper-style2 {
column-count: 2; /* Two columns for large screens and above */
column-gap: 20px; /* Gap between columns */
text-align: justify; /* Justify text for newspaper feel */
}
.newspaper-style img, .newspaper-style2 img {
max-width: 100%; /* Ensure images fit within their container */
width: 100%; /* Make sure images scale with their container */
height: auto; /* Maintain aspect ratio */
break-inside: avoid; /* Prevent images from being split across columns */
margin-bottom: 0.4rem; /* Add space below images */
/* opacity: 0.75; 50% transparent */
}
h1 {
font-size: 3rem; /* Increase font size for smaller screens */
text-align: justify;
}
}
@media (max-width: 991px) {
.newspaper-style {
column-count: 2; /* Two columns for large screens and above */
column-gap: 10px; /* Gap between columns */
text-align: justify; /* Justify text for newspaper feel */
font-size: 0.6rem;
}
.newspaper-style2 {
column-count: 1; /* Two columns for large screens and above */
column-gap: 10px; /* Gap between columns */
text-align: justify; /* Justify text for newspaper feel */
}
h1 {
font-size: 1.5rem; /* Increase font size for smaller screens */
text-align: justify;
}
.newspaper-style img, .newspaper-style2 img {
max-width: 100%; /* Ensure images fit within their container */
width: 100%; /* Make sure images scale with their container */
height: auto; /* Maintain aspect ratio */
break-inside: avoid; /* Prevent images from being split across columns */
margin-bottom: 0.4rem; /* Add space below images */
/* opacity: 0.75; 50% transparent */
}
}
.transparent-list-group {
background-color: transparent !important; /* Makes the background transparent */
border: none; /* Remove borders if desired */
}
.old-newspaper-bg {
position: relative; /* Ensure the container is positioned */
/* background-color: #f8f1e7; A light beige color */
/* background-image: url('/newp.png'); Optional: Add a texture image */
/* background-size: cover; Cover the entire element */
color: #333; /* Dark text color for contrast */
font-family: 'Times New Roman', Times, serif; /* Classic serif font for a newspaper feel */
border: 1px solid #ccc; /* Optional: Light border */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Light shadow for depth */
}
.watermark {
position: absolute; /* Position it absolutely */
top: 50%; /* Center it vertically */
left: 50%; /* Center it horizontally */
transform: translate(-50%, -50%); /* Adjust to center it */
color: rgba(107, 102, 102, 0.3); /* Darker color for better visibility */
font-size: 14vw; /* Use viewport width for responsive font size */
font-weight: bold; /* Make the text bold */
white-space: nowrap; /* Prevent wrapping */
pointer-events: none; /* Ensure it doesn't interfere with clicking */
z-index: 0; /* Place it behind other content */
}
/* Optional: To limit the maximum size of the watermark */
@media (min-width: 768px) {
.watermark {
font-size: 10vw; /* Adjust the font size for larger screens */
}
}
@media (min-width: 1200px) {
.watermark {
font-size: 10vw; /* Adjust for extra-large screens */
}
}
/* For screens smaller than 600px (mobile) */
@media screen and (max-width: 600px) {
iframe {
height: 200px; /* Set a smaller height for small screens */
}
}
/* For screens larger than 600px (tablet, desktop) */
@media screen and (min-width: 601px) {
iframe {
height: 400px; /* Set a larger height for larger screens */
}
}
/* For very large screens (desktops with wide screens) */
@media screen and (min-width: 1024px) {
iframe {
height: 500px; /* Set an even larger height for large desktops */
}
}
/* Media Queries */
@media (max-width: 575.98px) {
#ADS_IMAGE_L {
width: 100%; /* Full width on extra small devices */
height: 4rem;
}
#ADS_IMAGE_R {
width: 100%; /* Full width on extra small devices */
height: 4rem;
}
#WEBSITE_LOGO {
width: 87%;
height: 7rem;
}
#DEVELOPER_NAME{
font-size: 0.4rem;
}
#DEVELOPER_MOB{
font-size: 0.4rem;
}
#liveDateTime{
font-size: 0.4rem;
}
#WEBSITE_URL{
font-size: 0.4rem;
}
#WEBSITE_SLOGAN{
font-size: 0.9rem;
}
#REGISTRATION_ID{
font-size: 0.4rem;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
#ADS_IMAGE_L {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
#ADS_IMAGE_R {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
#ADS_IMAGE_L {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
#ADS_IMAGE_R {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
#ADS_IMAGE_L {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
#ADS_IMAGE_R {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
}
@media (min-width: 1200px) {
#ADS_IMAGE_L {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
#ADS_IMAGE_R {
width: 100%; /* Full width on extra small devices */
height: 6rem;
}
}
#loadingSpinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* Ensure it's above other content */
background-color: rgba(255, 255, 255, 0.7); /* Optional: A background overlay */
padding: 20px;
border-radius: 10px;
}
.clickable{ cursor: pointer; };