104 lines
1.9 KiB
CSS
104 lines
1.9 KiB
CSS
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--clr-text: hsl(205, 96%, 9%);
|
||
|
|
--clr-body: hsl(205, 96%, 15%);
|
||
|
|
--clr-background: hsl(203, 94%, 94%);
|
||
|
|
--clr-primary: hsl(205, 94%, 28%);
|
||
|
|
--clr-secondary: hsl(320, 94%, 68%);
|
||
|
|
--clr-accent: hsl(2, 94%, 47%);
|
||
|
|
|
||
|
|
--ff-headings: "Nunito", sans-serif;
|
||
|
|
--ff-body: "PT Sans", sans-serif;
|
||
|
|
|
||
|
|
--fs-300: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
|
||
|
|
--fs-400: clamp(1.35rem, 1.2048rem + 0.7261vi, 1.7675rem);
|
||
|
|
--fs-500: clamp(1.62rem, 1.3142rem + 1.5291vi, 2.4992rem);
|
||
|
|
--fs-600: clamp(1.944rem, 1.391rem + 2.7651vi, 3.5339rem);
|
||
|
|
--fs-700: clamp(2.3328rem, 1.4061rem + 4.6334vi, 4.997rem);
|
||
|
|
--fs-800: clamp(2.7994rem, 1.3154rem + 7.4198vi, 7.0657rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--clr-text: hsl(205, 96%, 91%);
|
||
|
|
--clr-body: hsl(205, 61%, 93%);
|
||
|
|
--clr-background: hsl(203, 94%, 6%);
|
||
|
|
--clr-primary: hsl(205, 94%, 72%);
|
||
|
|
--clr-secondary: hsl(320, 94%, 32%);
|
||
|
|
--clr-accent: hsl(2, 94%, 53%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
color-scheme: light dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
:where(img, svg, video) {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow > * + * {
|
||
|
|
margin-block-start: var(--flow-space, 1em);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: var(--ff-body);
|
||
|
|
color: var(--clr-body);
|
||
|
|
font-size: var(--fs-400);
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3 {
|
||
|
|
font-family: var(--ff-headings);
|
||
|
|
line-height: 1.1;
|
||
|
|
text-wrap: balance;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: var(--fs-700);
|
||
|
|
color: var(--clr-primary);
|
||
|
|
--flow-space: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: var(--fs-600);
|
||
|
|
color: var(--clr-primary);
|
||
|
|
--flow-space: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: var(--fs-500);
|
||
|
|
color: var(--clr-text);
|
||
|
|
--flow-space: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--clr-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover,
|
||
|
|
a:focus {
|
||
|
|
color: var(--clr-accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
::marker {
|
||
|
|
color: var(--clr-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper {
|
||
|
|
width: min(100% - 3rem, 55ch);
|
||
|
|
margin-inline: auto;
|
||
|
|
}
|