/* General styles for body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Styles for header and footer */
.header-content {
background-color: #a71a01;
color: white;
padding: 20px;
text-align: center;
}
header {
background-color: #801300;
color: white;
padding: 20px;
text-align: center;
position: sticky;
}
.footer-content {
background-color: #801300;;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
footer {
background-color: #801300;;
color: white;
text-align: center;
padding: 10px;
}
/* Basic styles for the navigation menu */
.navbar {
overflow: hidden;
background-color: #333;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
}
.menu li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover, .dropdown:hover .dropbtn {
background-color: #9e3434;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #af7777;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #503636;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Main content styles */
main {
padding: 20px;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
padding: 10px;
}
.category {
background-color:#801300;;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
.category:hover {
background-color: #3e8e41;
}
#pattern {
margin-top: 20px;
white-space: pre;
text-align: left;
font-family: 'Courier New', Courier, monospace;
}
button {
margin-top: 10px;
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#worksheet {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#questions, #answers {
width: 45%;
white-space: pre;
text-align: left;
font-family: 'Courier New', Courier, monospace;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination button {
padding: 10px;
margin: 0 5px;
}
/*=======================================================*/
No comments:
Post a Comment