* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body {
font-family: pennypacker, sans-serif;
line-height: 1.6;
color: #000;
background-color: #ecede7;
overflow-x: hidden;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
} h1 {
font-size: 58px;
color: #000;
line-height: 1.2;
font-weight: 600;
font-family: pennypacker-compressed, sans-serif;
}
h2 {
font-size: 42px;
color: #463b55;
line-height: 1.3;
font-weight: 600;
font-family: pennypacker-compressed, sans-serif;
text-transform: uppercase;
}
h3 {
font-size: 38px;
color: #463b55;
line-height: 1.3;
font-weight: 700;
font-family: pennypacker-compressed, sans-serif;
}
h4 {
font-size: 32px;
color: #463b55;
line-height: 1.4;
font-weight: 700;
font-family: pennypacker, sans-serif;
}
h5 {
font-size: 27px;
color: #000;
line-height: 1.4;
font-weight: 700;
}
p,
a,
li {
font-size: 17px;
color: #463b55;
font-weight: 500;
line-height: 24px;
font-family: pennypacker, sans-serif;
} .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .flex {
display: flex;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
} .grid {
display: grid;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
} .text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.mt-1 {
margin-top: 10px;
}
.mt-2 {
margin-top: 20px;
}
.mt-3 {
margin-top: 30px;
}
.mt-4 {
margin-top: 40px;
}
.mt-5 {
margin-top: 50px;
}
.mb-1 {
margin-bottom: 10px;
}
.mb-2 {
margin-bottom: 20px;
}
.mb-3 {
margin-bottom: 30px;
}
.mb-4 {
margin-bottom: 40px;
}
.mb-5 {
margin-bottom: 50px;
}
.pt-1 {
padding-top: 10px;
}
.pt-2 {
padding-top: 20px;
}
.pt-3 {
padding-top: 30px;
}
.pt-4 {
padding-top: 40px;
}
.pt-5 {
padding-top: 50px;
}
.pb-1 {
padding-bottom: 10px;
}
.pb-2 {
padding-bottom: 20px;
}
.pb-3 {
padding-bottom: 30px;
}
.pb-4 {
padding-bottom: 40px;
}
.pb-5 {
padding-bottom: 50px;
}
@media screen and (max-width: 767px) {
h1 {
font-size: 36px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 35px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 20px;
}
p,
a,
li {
font-size: 16px;
}
}