homepage/styling.css

95 lines
1.8 KiB
CSS
Raw Normal View History

2024-05-15 18:48:57 -05:00
/* Basic styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
color: black;
}
/* With dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
/* Apply dark mode styles to other elements as needed */
}
h1 {
text-align: center;
margin-top: 20px;
}
p {
text-align: center;
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #007bff;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1.2rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
margin-top: 0;
margin-bottom: 0;
}
a:hover {
background-color: #ddd;
}
#search-bar {
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
width: 60%;
}
#search-input {
padding: 5px;
border: 1px solid #ccc;
flex: 1;
}
#search-button {
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #007bff;
color: white;
}
/* Media queries for responsiveness */
@media only screen and (max-width: 768px) {
/* Styles for screens smaller than 768px (mobile devices) */
h1 {
font-size: 1.5rem; /* Adjust font size for smaller screens */
}
p {
font-size: 1rem; /* Adjust font size for smaller screens */
}
a {
font-size: 0.8rem; /* Adjust font size for smaller screens */
}
#search-bar {
width: 80%; /* Adjust width for smaller screens */
}
}
@media only screen and (min-width: 768px) {
/* Styles for screens wider than 768px (desktop) */
#search-bar {
width: 40%; /* Adjust width for larger screens */
}
}