keepcoding-html-css-pra/css/common.css at main · marta-vilaseca/keepcoding-html-css-pra · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --text-color: #160d03;
  --header-footer-bg: #2b1805;
  --accent-primary: #daa520;
  --accent-secondary: #8b4513;
  --light: #faebd7;
  --light-accents: #c58659;
  --form-inputs: rgba(205, 133, 63, 0.5);
  --skills-bg: #b8bd6b;
  --skills-texts: #404030;
  --skills-accents: #91973c;
  --quote: #294e50;
  --generic-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: "Merriweather", serif;
  background: url("../assets/img/bg.jpg") top center repeat scroll;
}

body,
html {
  scroll-padding-top: 7rem; /* adjust the pixel amount here for top navigation bar height */
}

h2 {
  font-style: italic;
  font-weight: 700;
  font-size: 2.4rem;
  margin: 1rem auto 3rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

h2::before,
h2::after {
  content: "⁓";
  font-weight: 200;
  font-size: 10rem;
  margin-top: -2rem;
  opacity: 0.7;
}

h2::after {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}