104 lines
2.1 KiB
CSS
104 lines
2.1 KiB
CSS
:root {
|
||
--dark: #1f363dff;
|
||
--mid-dark: #40798cff;
|
||
--mid: #70a9a1ff;
|
||
--mid-light: #9ec1a3ff;
|
||
--light: #cfe0c3ff;
|
||
font-family: Verdana,sans-serif;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center; /* vertical centering */
|
||
justify-content: space-between; /* icon left, spacer right */
|
||
background-color: var(--mid-dark);
|
||
padding: 0 1rem;
|
||
height: 80px;
|
||
}
|
||
|
||
.spacer {
|
||
flex: 0 0 64px; /* or your icon’s width */
|
||
}
|
||
|
||
.header-icon {
|
||
display: block; /* remove inline whitespace */
|
||
flex: 0 0 64px; /* or your icon’s width */
|
||
width: 15vw; /* fill the 64px container */
|
||
height: auto; /* keep aspect ratio */
|
||
max-height: 80px; /* never exceed 80px bar height */
|
||
}
|
||
|
||
.title {
|
||
flex: 1; /* take up all the space between */
|
||
text-align: center; /* center text within that space */
|
||
color: var(--light);
|
||
}
|
||
|
||
.footer {
|
||
background-color: var(--dark);
|
||
display: flex;
|
||
height: 80px;
|
||
}
|
||
|
||
.footer-text {
|
||
display: inherit;
|
||
align-content: center;
|
||
justify-content: center;
|
||
margin: auto;
|
||
background-color: inherit;
|
||
border: none;
|
||
outline: none;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.footer-text a {
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
color: var(--mid-light);
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.footer-text a:hover {
|
||
color: var(--mid);
|
||
}
|
||
|
||
.contact-link {
|
||
cursor: pointer;
|
||
color: var(--mid-dark);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.contact-link a:hover {
|
||
color: var(--mid);
|
||
}
|
||
|
||
.container {
|
||
padding: 20vh 0 calc(80vh - 303px) 0;
|
||
background-image: linear-gradient(
|
||
to bottom right,
|
||
var(--mid-light),
|
||
var(--mid-dark)
|
||
);
|
||
}
|
||
|
||
.content {
|
||
margin: 0 auto;
|
||
width: 90vw; /* takes 90% of viewport (or container) width */
|
||
max-width: 800px; /* but never wider than 800px */
|
||
padding: 1.5rem; /* give it some breathing room inside */
|
||
background: white;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.content h3 {
|
||
text-align: center;
|
||
}
|
||
|
||
.content p {
|
||
text-align: center;
|
||
} |