* {
    box-sizing: border-box;
}

body {
    font-family: "Courier Prime";
    padding: 0;
    border: 0;
    margin: 0;
    background-color: hsl(154, 21%, 87%);
}

p,
ul,
li,
c1,
h2 {
    margin: 0;
}

p,
li {
    font-size: max(1rem, min(3.5vw, 1.5rem));
}

small {
    font-size: 0.75em;
}

h1 {
    font-size: max(2.2rem, min(8vw, 3.5rem));
}

h2 {
    font-size: max(1.6rem, min(5vw, 2.5rem));
}

.logo {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
}

.above-the-fold {
    height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 0 20vw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.v-stack {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.v-stack.sections {
    row-gap: max(2rem, min(10vw, 5rem));
}

.big {
    row-gap: 100px;
}

footer {
    margin-top: 100px;
    padding: 40px 20vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c1,
.c2,
.c3,
.content img {
    filter: drop-shadow(1px 5px 3px hsla(0, 0%, 8%, 0.3)) drop-shadow(4px 7px 7px hsla(0, 0%, 51%, 0.3));
}

.c1 {
    background-color: hsl(306, 41%, 77%);
}

.c2 {
    background-color: hsl(148, 44%, 65%);
}

.c3 {
    background-color: hsl(206, 36%, 73%);
}

h1 {
    margin: 0;
    margin-top: 100px;
    padding-left: 20vw;
}

section.content {
    padding: 40px 20vw;
}

.bonby {
    max-width: 400px;
    width: 100%;
    margin: auto;
}