/* CSS Document */
/* Center everything */
/* Center everything in the page */

[plasmo-csui] {
    display: none !important;
}

.text-content {
font
	font-family: Verdana, Geneva, sans-serif;
	font-size: 75px;
	background-color: #FFF;
}




body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 700px; /* Set to 700px */
	margin: 0;
	text-align: center;
	background-color: #E9E8E2;
}

.body2 {
    display: flex;
    flex-wrap: wrap; /* ✅ Allows tables to break into new rows */
    justify-content: center; /* ✅ Keeps tables centered */
    align-items: flex-start; /* ✅ Aligns tables at the top */
    gap: 10px; /* ✅ Adds spacing between tables */
    margin-top: 20px; /* ✅ Keeps spacing from other elements */
    max-width: 80%; /* ✅ Optional: Ensures tables don't spread too wide */
}
.body3 {
font
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	background-color: #FFF;
}


/* Keep tables inline */
.inline-table {
    text-align: left;
    border-collapse: collapse;
    border: 1px solid black; /* Optional: Add a border for better visibility */
}

table {
	border: 5px solid #060;  /* ✅ Border only around the table */
	border-collapse: separate; /* ✅ Prevents inside borders */
	border-spacing: 0px;  /* ✅ No space inside the table */
	background-color: #E9E8E2;
}

td, th {
    border: none; /* ✅ Removes inside cell borders */
}
.tdRed {
	border: none; /* ✅ Removes inside cell borders */
	color: #F00;
	font-weight: lighter;
	font-size: 12px;
}

.invisible {
	border: none;
	font-weight: lighter;
	font-size: 48px;
	color: #E9E8E2;
}

.tdGreen {
	border: none; /* ✅ Removes inside cell borders */
	color: #060;
	font-size: 12px;
}

.thRed {
	border: none; /* ✅ Removes inside cell borders */
	color: #F00;
}

.siteTitle {
	border: none; /* ✅ Removes inside cell borders */
	color: #F00;
	font-weight: lighter;
	font-size: 36px;
}



/* Ensure the lesson image scales properly */
.lesson-image {
    max-width: 90%;  /* Image adapts to screen */
    height: auto;
}


/* Navigation Button Container */
.button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Increased space between buttons */
}

/* Navigation Buttons */
.button-container img {
    width: 64px; /* Fixed button size */
    height: 64px;
}

/* Lesson Button Container */
.lesson-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Space between lessons */
}

/* Lesson Buttons */
.lesson-container img {
    width: 80px; /* Lesson buttons slightly bigger */
    height: 80px;
}

/* copyright  */
	.copyright {
	font-size: 12px;
}


@media screen and (min-width: 600px) {
    body {
        width: 375px;  /* Fixed width like an Android phone */
        height: 700px; /* Adjust the height as needed */
        margin: 0 auto;  /* Center the page */
/*        border: 5px solid black;  /* Add a border */
        background-color: #f8f8f8; /* Optional: light gray background */
        overflow: hidden; /* Prevent scrolling */
    }
}
.copyright_bis {
	font-size: 10px;
}