108 lines
2.2 KiB
CSS
108 lines
2.2 KiB
CSS
body {
|
|
background-color: #1d1d1d;
|
|
border: none;
|
|
color: #444;
|
|
font-family: "Inter",sans-serif;
|
|
font-size: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn {
|
|
background: #333;
|
|
padding: 20px; /* Increase Button Height */
|
|
font-size: 1.2em; /* Increase button font size */
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #567730;
|
|
}
|
|
|
|
.header-inner {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.site-title {
|
|
font-size: 2.75em;
|
|
font-family: "Gloock",cursive; /* Updated to Gloock font */
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,.25);
|
|
}
|
|
|
|
.site-title a {
|
|
color: #fff;
|
|
}
|
|
|
|
.site-title a:hover {
|
|
color: #567730;
|
|
}
|
|
|
|
.site-description {
|
|
color: #999;
|
|
font-size: 1.1em;
|
|
font-family: "Inter", sans-serif;
|
|
font-weight: 400;
|
|
line-height: 110%;
|
|
margin: 20px 0 0;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 1px rgba(0,0,0,.25);
|
|
}
|
|
|
|
.image-border {
|
|
border: 10px solid #567730;
|
|
box-sizing: border-box;
|
|
}
|
|
.section-header {
|
|
color: #fff;
|
|
font-size: 2em;
|
|
font-family: "Gloock", cursive; /* Updated to Gloock font */
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
border: 1px solid #fff; /* Add a thin white border */
|
|
padding: 10px; /* Add some padding */
|
|
box-sizing: border-box; /* Include border and padding in the element's total width and height */
|
|
}
|
|
.figure img {
|
|
height: 400px; /* Set a maximum height for the images */
|
|
max-width: 100%;
|
|
object-fit: cover; /* Resize the images to cover the entire area while maintaining the aspect ratio */
|
|
}
|
|
.figure figcaption {
|
|
text-align: center; /* Center the caption */
|
|
color: #fff; /* Set the text color to white */
|
|
font-family: "Inter",sans-serif; /* Match the font with the rest of the webpage */
|
|
font-size: 1em; /* Set the font size */
|
|
}
|
|
/* Media query for screens smaller than 600px */
|
|
@media (max-width: 600px) {
|
|
body {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 15px;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
/* Media query for screens smaller than 400px */
|
|
@media (max-width: 400px) {
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px;
|
|
font-size: 0.8em;
|
|
}
|
|
} |