99 lines
2.6 KiB
CSS
99 lines
2.6 KiB
CSS
/* Reset some default styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
background-color: #f9f9f9; /* Light background for contrast */
|
|
color: #333; /* Darker text for readability */
|
|
padding: 20px;
|
|
display: flex; /* Use flexbox for centering */
|
|
justify-content: center; /* Center horizontally */
|
|
align-items: center; /* Center vertically */
|
|
min-height: 100vh; /* Full viewport height */
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px; /* Limit the width of the content */
|
|
width: 100%; /* Full width up to max-width */
|
|
padding: 20px; /* Padding inside the container */
|
|
background-color: white; /* White background for the content */
|
|
border-radius: 8px; /* Rounded corners */
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
|
|
}
|
|
|
|
h1, h2, h4 {
|
|
color: #2c3e50; /* Darker shade for headings */
|
|
margin-bottom: 10px;
|
|
text-align: center; /* Center headings */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5em; /* Larger font size for main title */
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em; /* Slightly smaller for subheadings */
|
|
margin-top: 20px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px; /* Space between paragraphs */
|
|
text-align: center; /* Center paragraphs */
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none; /* Remove bullet points */
|
|
padding-left: 0; /* Remove default padding */
|
|
}
|
|
|
|
ul li {
|
|
margin-bottom: 10px; /* Space between list items */
|
|
text-align: center; /* Center list items */
|
|
}
|
|
|
|
table {
|
|
width: 100%; /* Full width for tables */
|
|
border-collapse: collapse; /* Remove space between borders */
|
|
margin: 20px 0; /* Space above and below tables */
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ddd; /* Light border for table cells */
|
|
padding: 10px; /* Padding inside cells */
|
|
text-align: left; /* Align text to the left */
|
|
}
|
|
|
|
th {
|
|
background-color: #2c3e50; /* Dark background for headers */
|
|
color: white; /* White text for headers */
|
|
}
|
|
|
|
img {
|
|
max-width: 100%; /* Responsive images */
|
|
height: auto; /* Maintain aspect ratio */
|
|
margin: 20px 0; /* Space above and below images */
|
|
}
|
|
|
|
code {
|
|
background-color: #eaeaea; /* Light background for code */
|
|
padding: 2px 4px; /* Padding around code */
|
|
border-radius: 4px; /* Rounded corners */
|
|
}
|
|
|
|
.info-block {
|
|
background-color: #e7f3fe; /* Light blue background */
|
|
border-left: 6px solid #2196F3; /* Blue left border */
|
|
padding: 10px 15px; /* Padding inside the block */
|
|
margin: 20px 0; /* Space above and below the block */
|
|
border-radius: 4px; /* Rounded corners */
|
|
color: #333; /* Dark text color */
|
|
text-align: center; /* Center text */
|
|
}
|
|
|