69 lines
1.9 KiB
CSS
69 lines
1.9 KiB
CSS
|
html {
|
||
|
|
--color-primary-h: 49;
|
||
|
|
--color-primary-s: 79%;
|
||
|
|
--color-primary-l: 53%;
|
||
|
|
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
|
||
|
|
--color-secondary-h: 27;
|
||
|
|
--color-secondary-s: 96%;
|
||
|
|
--color-secondary-l: 48%;
|
||
|
|
--color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
|
||
|
|
--color-tertiary-h: 191;
|
||
|
|
--color-tertiary-s: 55%;
|
||
|
|
--color-tertiary-l: 53%;
|
||
|
|
--color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
|
||
|
|
--color-quaternary-h: 241;
|
||
|
|
--color-quaternary-s: 48%;
|
||
|
|
--color-quaternary-l: 41%;
|
||
|
|
--color-quaternary: hsl(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l));
|
||
|
|
--color-quinary-h: 237;
|
||
|
|
--color-quinary-s: 97%;
|
||
|
|
--color-quinary-l: 27%;
|
||
|
|
--color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));
|
||
|
|
|
||
|
|
--color-text-h: 0;
|
||
|
|
--color-text-s: 0%;
|
||
|
|
--color-text-l: 0%;
|
||
|
|
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
|
||
|
|
--color-bg-h: 0;
|
||
|
|
--color-bg-s: 0%;
|
||
|
|
--color-bg-l: 100%;
|
||
|
|
--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
|
||
|
|
|
||
|
|
--size-container: 640px;
|
||
|
|
|
||
|
|
background-color: var(--color-bg);
|
||
|
|
color: var(--color-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Reset */
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
line-height: 1.5;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||
|
|
}
|
||
|
|
img, picture, video, canvas, svg {
|
||
|
|
display: block;
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
input, button, textarea, select {
|
||
|
|
font: inherit;
|
||
|
|
}
|
||
|
|
p, h1, h2, h3, h4, h5, h6 {
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|