:root {
  --color-dark: #222222;
  --color-light: #ffffff;
  --color-form: #989898;
  --color-accent: #FF3C3C;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Mulish', sans-serif;
    color: var(--color-light);
    font-weight: 400;
    font-size: 16px;
}

h1, h2, h3, h4, .font-decoration, .font-component{
    font-family: 'Oswald', sans-serif;
}

h3, h2, h4 {
    font-weight: 400;
}

h1, .font-decoration, .font-component {
    font-weight: 300;
}

h1 {
    line-height: 1.14;
    font-size: 56px;
    text-transform: uppercase;

    @media (min-width: 768px) {
        font-size: 68px;
        line-height: 1.18;
    }

    @media (min-width: 1200px) {
        font-size: 116px;
        line-height: 1.14;
    }
}

h2 {
    line-height: 1.25;
    font-size: 32px;
    text-transform: uppercase;
}

h3 {
    line-height: 1.4;
    font-size: 20px;
    text-transform: uppercase;
}

h4, p {
    line-height: 1.5;
}

.font-small {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.34;
}

.font-italic, .font-component {
    line-height: 1.25;
}

.font-decoration {
    font-size: 48px;
    line-height: 1.125;
}

.wrapper {
    margin: 0 auto;
    padding: 0 20px;
}

.big-picture {
    width: 400px;
    height: 534px;
}

.middle-picture {
    width: 280px;
    height: 374px;
}

.small-picture {
    width: 220px;
    height: 220px;
}

.button {
    width: 100%;
    height: 60px;
    background-color: var(--color-dark);
    color: var(--color-light);
}

.button:hover {
    background-color: var(--color-accent);
    color: var(--color-dark);
    cursor: pointer;
}

.no-scroll {
  overflow: hidden;
}