tvl-depot/users/aspen/goodcry-band/index.css

171 lines
2.5 KiB
CSS
Raw Normal View History

@import "./reset.css";
:root {
--gray: #b4ada5;
--black: #2f2715;
--background: #fff9f4;
--blue: #195f9a;
--lavender: #5f6eb2;
}
html {
width: 100%;
}
body {
background-color: var(--background);
color: var(--black);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow-x: hidden;
font-family: "Helvetica", sans-serif;
}
h1,
h2,
subtitle {
font-family: "Playfair Display", serif;
}
header {
display: flex !important;
flex-direction: column;
align-items: center;
font-size: 30px;
display: inline-block;
text-align: center;
max-width: 100%;
overflow-x: hidden;
}
@media (min-width: 800px) {
header {
overflow-x: initial;
}
}
subtitle {
display: block;
padding-top: 0.5rem;
padding-bottom: 2.7rem;
}
hr {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 1px solid var(--gray);
width: 35%;
margin: 1.4rem 0;
}
header hr {
margin-top: 0;
margin-bottom: 2.7rem;
}
.header-image {
width: 75%;
max-width: 75%;
transform: translateX(4%);
margin-top: 1rem;
}
@media (min-width: 600px) {
.header-image {
max-width: 600px;
margin-bottom: 1.2rem;
}
}
h2 {
margin-bottom: 1.4rem;
border-bottom: 1px solid var(--gray);
padding-bottom: 0.5rem;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
a {
color: var(--blue);
text-decoration: none;
}
p {
text-align: center;
max-width: 400px;
padding: 0 1rem;
}
a:active {
text-decoration: underline;
color: var(--lavender);
}
.link-list {
padding: 0 1rem;
list-style: none;
font-size: 1.2em;
text-align: center;
}
@media (min-width: 800px) {
.link-list {
padding: 0;
}
}
.link-list li > * {
display: block;
padding: 0.4rem 0;
}
.social-links {
margin-top: 3rem;
display: flex;
flex-direction: row;
align-items: center;
}
.social-links > * + * {
margin-left: 0.5rem;
}
.social-links svg {
fill: var(--gray);
}
.social-links a {
color: var(--gray);
font-size: 24px;
vertical-align: middle;
}
.social-links a:hover {
color: var(--blue);
}
.social-links a:active {
color: var(--lavender);
text-decoration: none;
}
.social-links a:hover svg {
fill: var(--blue);
}
.social-links a:active svg {
fill: var(--lavender);
}
footer img {
width: 80px;
margin: 3rem 0;
}