body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin-left: 170px;
    margin-right: 150px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    cursor: default; /* Makes cells clickable */
}

option {
    padding: 10px;
    font-size: 16px;
    background-color: #f9f9f9;
    color: #333;
}

.week-buttons{
    overflow : auto;
}
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 8px;
    padding-right: 25px;
    padding-bottom: 1px;
    padding-left: 20px;
    z-index: 100;
    background-color: bisque;
    display: none; /* Initially hidden */
    height: 95px;
    overflow-x: auto; 
    overflow-y: auto;
}
#theme{
    height: 20px;
    margin-top: -3px;
}
.common-period-name{
    height: 20px;
    margin-right: 8px;
}
#status{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns layout */
    height: 16px;
    font-size: 20px;
}
.sign-out-btn {
    background-color: #737feb;
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    outline: none;
    margin-bottom: 8px;
    margin-left: 8px;
}

/* Hover state */
.sign-out-btn:hover {
    background-color: #2d40eb; 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.2);
}

/* Active state (while clicking) */
.sign-out-btn:active {
    background-color: #4953a7; 
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#first-time-sign-in {
    margin: 100px auto; /* centers horizontally with some top space */
    padding: 30px;
    border-radius: 15px;
    background-color: #8bebe6;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    display: none;
  }

#first-time-sign-in p {
    font-size: 40px;
    margin-bottom: 20px;
}

#first-time-sign-in button {
    padding: 8px;
    font-size: 32px;
    background-color: #4285F4; /* Google Blue */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#first-time-sign-in button:hover {
    background-color: #0b4aaf;
}
#first-time {
    background-color: #ebe7e7; /* Light gray background for a clean look */
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: 0px 40px 40px 40px; /* Center it horizontally with margin */
    text-align: center; /* Center the text */
    display: none; /* Initially hidden */
}

/* Styling for the h2 element */
#first-time h2 {
    font-size: 24px;
    color: #333333; /* Dark gray text for better readability */
    margin-bottom: 20px; /* Space between heading and file input */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

/* Styling for the h3 element */
#first-time h3 {
    font-size: 18px;
    color: #666666; /* Lighter gray text */
    margin-top: 20px; /* Space between paragraph and button */
    font-family: 'Arial', sans-serif;
}

/* Parent container for alignment and spacing */
#most_important {
    display: none; /* Aligns elements in a single row */
    gap: 20px; /* Adds space between elements */
    align-items: center; /* Ensures vertical centering */
    justify-content: flex-start; /* Keeps items aligned to the left */
    margin-top: 20px; /* Space from the top */
}
#lets-do-it{
    margin-top: 0px;
    display: none;
}
#add-week-btn {
    background-color: #FF8C00; /* Orange background color */
    color: white; /* White text for readability */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Spacing for a substantial button */
    font-size: 20px; /* Clear font size */
    font-weight: bold; /* Bold for prominence */
    border-radius: 5px; /* Rounded corners for a modern look */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover and shadow transitions */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: inline-block; /* Makes button behave like a standard button */
    position: relative; /* Positioning for potential dropdowns or menus */
}

#add-week-btn:hover {
    transform: scale(0.97);  /* Slightly scales down on active press */
    background-color: #FF7F00; /* Slightly darker orange on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

#add-week-btn:active {
    background-color: #FF6A00; /* Even darker orange when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduced shadow on click */
}

/* Theme Dropdown */
#themeDropdown {
    width: fit-content;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #FFD700; /* Yellow accent */
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3); /* Subtle glow */
}

/* Dropdown Hover */
#themeDropdown:hover {
    border-color: #FFC107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); /* Stronger glow */
}

/* Dropdown Focus */
#themeDropdown:focus {
    border-color: #FFB300;
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.6);
    outline: none;
}

/* Theme Buttons */
.themeclass {
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-radius: 8px;
    background-color: #FFD700;
    border: 3px solid #FFC107;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

/* Button Hover */
.themeclass:hover {
    background-color: #FFC107;
    border-color: #FFB300;
    box-shadow: 0 6px 12px rgba(255, 193, 7, 0.6);
    transform: scale(1.08);
}

/* Button Active */
.themeclass:active {
    background-color: #FFB300;
    border-color: #FFA000;
    box-shadow: 0 4px 10px rgba(255, 179, 0, 0.8);
    transform: scale(0.95);
}

/* Button Focus */
.themeclass:focus {
    background-color: #FFB300;
    border-color: #FFA000;
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.8);
    outline: none;
}

/* Smooth animation */
.themeclass, #themeDropdown {
    transition: all 0.25s ease-in-out;
}

/* File input styling */
.file_inputs {
    background-color: #1fe0e0; /* Light cyan-blue background */
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 20px; /* Space between input and other content */
    font-family: 'Arial', sans-serif;
    display: inline-block; /* Makes it behave like a button */
    font-size: x-large;
}

.file_inputs:hover {
    background-color: #0fbcbc; /* Slightly darker cyan-blue on hover */
    transform: scale(1.05);
}

#first-time-date {
    font-family: Arial, sans-serif;
    max-width: 450px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: none;
    margin-top: 10px;
    margin-bottom: 12.5px;
}
#first-time-date p {
    margin-top: -20px;
}
/* Style for the heading */
#first-time-date h2 {
    font-size: 24px;
    color: #333;
}

/* Style for the submit button */
#first-time-date button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#first-time-date button:hover {
    background-color: #0056b3;
}

#first-time-date button:active {
    background-color: #004080;
}
/* Style for the date input field */
#start-date {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Style for the date input field when invalid */
#start-date:invalid {
    border-color: #ff4d4d;
}

/* Style for the date input field when valid */
#start-date:valid {
    border-color: #28a745;
}

#start-date:focus {
    border-color: #007bff;
}

/* Style for the date input field when hovered */
#start-date:hover {
    border-color: #007bff;
}

#period-container {
    margin-top: 20px;
    padding: 20px;
    border: 2px solid #FF6347;  /* Tomato Red border for vibrancy */
    background-color: #d6f9b6;  /* Lavender background for a soft, relaxing feel */
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns layout */
    gap: 20px; /* Larger spacing between input boxes */
    border-radius: 15px;  /* Rounded corners for smooth edges */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 98.85%; /* Full width of the container */
}

#period-container h3 {
    grid-column: span 4; /* Make the title span all columns */
    font-size: 26px;
    font-weight: bold;
    color: #4B0082;  /* Indigo color for the title */
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* Text shadow for more depth */
}

#period-container input {
    padding: 15px;
    font-size: 16px;
    width: 100%; /* Fill the column */
    box-sizing: border-box; /* Ensure full width including padding */
    border: 2px solid #FFD700; /* Gold border for input fields */
    border-radius: 8px; /* Rounded input fields */
    background: #4169E1; /* Gradient from light pink to deep pink */
    color: #FFF; /* White text for contrast */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

#period-container input:focus {
    outline: none;
    border-color: #00FA9A; /* Medium spring green on focus */
    box-shadow: 0 0 5px rgba(0, 250, 154, 0.5); /* Glow effect on focus */
}

/* For Hover Background */
#period-container input:hover {
    border-color: #8A2BE2; /* Blue Violet */
    background-color: rgb(220, 196, 112); /* Light Goldenrod Yellow (softer yellow) */
}

#period-container input:valid {
    border-color: #32CD32; /* Lime Green when valid */
}

#period-container input:invalid {
    border-color: #DC143C; /* Crimson border when invalid */
}

#period-container input::placeholder {
    color: #E0FFFF; /* Light cyan for placeholder text */
    font-style: italic; /* Italic style for placeholders */
}
#attendance-btn, #download-btn {
    background-color: #008080; /* Teal base color */
    color: white; /* White text for contrast */
    padding: 10px 20px; /* Add padding for a comfortable click area */
    font-size: 16px; /* Font size for readability */
    border: none; /* No border for a clean look */
    border-radius: 8px; /* Rounded corners for smooth appearance */
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 16px;
    margin-bottom: 5px;
}

#attendance-btn:hover , #download-btn:hover{
    background-color: #006666; /* Darker teal on hover */
    transform: scale(1.05);
}

#attendance-btn:active, #download-btn:active {
    background-color: #004d4d; /* Even darker teal on active click */
    transform: scale(0.98); /* Slightly smaller on click for effect */
}
#saved-btn {
    background-color: #d2691e; /* Warm brown background */
    color: #fff; /* White text for contrast */
    border: 2px solid #8b4513; /* Darker brown border */
    padding: 12px 25px; /* Comfortable padding */
    font-size: 25px;
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.15); /* Gentle shadow */
    display: inline-block;
    margin-top: 20px;
}

/* Hover and active states for interactivity */
#saved-btn:hover {
    background-color: #cd853f; /* Slightly lighter brown on hover */
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.25); /* Enhanced shadow */
    transform: scale(1.05); /* Subtle enlargement */
}

#saved-btn:active {
    background-color: #8b4513; /* Darker shade on active */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Reduced shadow on active */
    transform: scale(1); /* Return to original size */
}

.container {
    max-width: 800px;
    margin-left: 170px;
    padding: 20px;
}

.period{
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
.Present { background-color: rgb(79, 221, 112); }
.Absent { background-color: rgb(243, 94, 107); }
.no-class { background-color: rgb(124, 126, 130); }

/* Styling for each tbody section */
.table-section {
    display: table;
}

/* Header styling */
.table-header {
    background-color: #f2f2f2;
}

button.all-btn {
    background-color: #FFEB3B; /* Bright yellow */
    color: white;
    font-size: 18px;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

button.all-btn:hover {
    background-color: #FFD700; /* Golden shade on hover */
}
button.all-btn:active{
    transform: scale(0.9);  /* Slightly scales down on active press */
}

/* Delete Button */
button.del-btn {
    background-color: #888888; /* Gray color */
    color: white;
    font-size: 18px; /* Larger font size */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button.del-btn:hover {
    background-color: #666666; /* Darker gray for hover */
}
button.del-btn:active{
    transform: scale(0.92);  /* Slightly scales down on active press */
}
.week-buttons {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: -136px;
    max-width: 132px;
}

.all-week-btn {
    padding: 10px 16px;
    background-color: #6A0DAD; /* Deep purple for normal state */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
}

.all-week-btn:hover {
    background-color: #7D3C98; /* Softer purple on hover */
}

.all-week-btn:active {
    background-color: #9370DB; /* Soft lavender for active state */
    transform: scale(0.94); /* Slight shrink effect */
}

.delete-week-btn {
    padding: 10px 16px;
    background-color: #888888;  /* Neutral gray for Delete button */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
}
.delete-week-btn:hover {
    background-color: #777777;  /* Darker gray on hover for Delete button */
}
/* Active styles for pressing down the button */
.delete-week-btn:active {
    transform: scale(0.94);  /* Slightly scales down on active press */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);  /* Reduced shadow on active press */
}

#attendance-display-section {
    padding: 30px; /* More padding for spacious design */
    background-color: #ffffff; /* White background for a clean look */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    font-family: 'Arial', sans-serif; /* Clean and legible font */
    margin: 20px auto; /* Center the section with margin */
    max-width: 1200px; /* Limit max width for large screens */
    border: 2px solid rgb(160, 160, 160); /* Light gray border for subtle outlining */
    display: none;
}

.attendance-container {
    padding: 10px;
    border: 2px solid #171717;
    margin-bottom: 20px;
}

/* Subject attendance styling */
/* General styling for the subject-attendance section */
.subject-attendance {
    background-color: #f9f9f9;  /* Light background for readability */
    border-radius: 8px;         /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 20px;        /* Space between attendance sections */
    padding: 20px;              /* Adequate padding for spacing */
    transition: all 0.3s ease;  /* Smooth transition for hover effects */
}
.subject-attendance li{
    font-size: larger;
    font-weight: bold;
    margin-bottom: 5px;
}

/* CSS for the Change Periods button */
.change-periods-btn {
    background-color: #b392bd; /* Purplish background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding for size */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    white-space: pre-line; /* Allow line breaks in text */
    text-align: center; /* Center the text */
}

/* Hover effect */
.change-periods-btn:hover {
    background-color: #9f7aa7; /* Slightly darker purplish shade on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Active (click) effect */
.change-periods-btn:active {
    background-color: #8b6a94; /* Even darker purplish shade when clicked */
    transform: scale(0.98); /* Slightly shrink on click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow */
}

.popup-container {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    padding: 20px;
    background: white;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    display: none; /* Initially hidden */
    z-index: 1000;
}

.popup-content {
    position: relative;
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 20px;
    cursor: pointer;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    background: white;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    text-align: left; /* Ensures text inside is left-aligned */
    max-height: 80%;
    overflow-y: scroll;
}

#content-popup p {
    display: inline-block; /* Makes <p> tags align side by side */
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: #e3e3e3; /* Alternating gray for distinction */
    border-radius: 5px;
    padding: 8px;
    width: 98%;
    margin-left: 2px;
}

/* Content Styling */
#content-popup h2,#content-popup h3,#content-popup h4 {
    margin-bottom: 10px;
    color: #333; /* Dark text for contrast */
}

#content-popup h3 {
    font-size: 16px;
    font-weight: bolder;
    color: #666;
}

#content-popup h4 {
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

/* Restore Button */
#restore-deleted {
    background-color: #76b947; /* Soft leaf-green shade */
    border: 2px solid #5e9c35; /* Slightly darker border */
    color: white;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#restore-deleted:hover {
    background-color: #5e9c35; /* Darker shade on hover */
    border-color: #4a812a;
    transform: scale(1.05); /* Slight zoom */
}

#restore-deleted:active {
    background-color: #4a812a; /* Pressed effect */
    border-color: #3b6521;
    transform: scale(0.95);
}

/* Popup Animation */
#popup {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

#close-popup{
    position: absolute; 
    top: 10px; 
    right: 15px; 
    font-size: 20px; 
    cursor: pointer;
}

#popup-overlay{
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Base styling for all three buttons */
.set-latest-btn, 
.copy-day-wise, 
.paste-day-wise {
    background-color: #40E0D0; /* Turquoise */
    color: white;
    border: 2px solid #2CB1A3;
    border-radius: 6px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 13.1px;
    transition: all 0.3s ease-in-out;
    font-weight: bolder;
}

/* Hover effect */
.set-latest-btn:hover, 
.copy-day-wise:hover, 
.paste-day-wise:hover {
    background-color: #2CB1A3; /* Darker turquoise */
}

/* Active effect (on click) */
.set-latest-btn:active, 
.copy-day-wise:active, 
.paste-day-wise:active {
    background-color: #1D8B86; /* Even deeper turquoise */
    transform: scale(0.95); /* Slight shrink effect */
}

/* Styling for Show, Copy, and Paste buttons */
.week-btn-beside {
    background-color: #9060a3; /* Muted purple */
    color: white;
    border: 2px solid #734b80; /* Slightly darker shade */
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-left: 10px; /* Space between buttons */
}

/* Hover effect */
.week-btn-beside:hover {
    background-color: #734b80; /* Deeper muted purple */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Active effect (on click) */
.week-btn-beside:active {
    background-color: #5b3a65; /* Even darker tone */
    transform: scale(0.95); /* Subtle shrink effect */
}

#popup-btn{
    background-color: rgb(252, 190, 74); 
    color: white;
    border: 4px solid rgb(245, 196, 106); /* Slightly darker shade */
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bolder;
}
#popup-btn:hover {
    background-color: rgb(240, 170, 50); /* Darker shade for hover */
    border-color: rgb(230, 160, 40); /* Adjusted border */
    transform: scale(1.05); /* Slight zoom effect */
}

#popup-btn:active {
    background-color: rgb(220, 150, 30); /* Even darker shade for active */
    border-color: rgb(210, 140, 20);
    transform: scale(0.95); /* Slight press effect */
}

#themes-section{
    display: flex; 
    gap: 16px; 
    margin-top: 14px; 
    margin-bottom: 14px;
}

#latest-timetable{
    display: none; 
}
#latest-timetable td {
    font-weight: bold; /* Normal font weight for table cells */
}
#latest_timetable_heading {
    margin-top: 10px; /* Space above the heading */
    display: none;
}
footer{
    text-align: center; 
    padding-top: 2.5px;
    padding-bottom: 5px;
    color: #666666;
    font-weight: bold;
    background-color: papayawhip; /* Light background for contrast */
    margin-left: -170px;
    margin-right: -150px;
}
footer p {
    font-size: 15px; 
    margin-top: 2px; /* No top margin for the paragraph */
    margin-bottom: 2px; /* No bottom margin for the paragraph */
}
footer img {
    height: 50px;
    border-radius: 50%; 
    object-fit: cover; 
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
}

footer a {
  color: #3366cc;
  text-decoration: none;
  transition: text-decoration 0.2s;
}

footer a:hover {
  text-decoration: underline;
}

.warning{
    color: #cc0000;
    font-weight: bold;
}

#js-disabled{
    font-size: 20px;
    text-align: center;
    margin-left: -170px;
    margin-right: -150px;
}