:root {
    --blue: #0073ad;
    --violet: #753680;
    --orange: #eb9130;
    --green: #009648;
    --yellow: #faf9d9;
}

@font-face {
    font-family: Frente;
    src: url(fonts/frente.otf) format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: Cherolina;
    src: url(fonts/cherolina.otf) format('opentype');
    font-weight: 400;
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.blue {
    color: var(--blue);
}
.violet {
    color: var(--violet);
}
.orange {
    color: var(--orange);
}
.green {
    color: var(--green);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#logo {
    text-align: center;
    margin: 40px 0 20px;
}

#logo img {
    height: 200px;
}

h1 {
    font-family: Frente, sans-serif;
    font-size: 2.em;
    margin: 15px 40px;
}

#services {
    font-family: Frente, sans-serif;
    font-size: 2em;
    background-color: var(--yellow);
    display: flex;
    margin: 40px 0;;
}

#services ul {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

#services li:not(:last-child) {
    margin-bottom: 30px;
}

h2 {
    font-family: Cherolina, sans-serif;
    font-size: 3em;
    margin: 0;
    font-weight: normal;
}

#contacts {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0 20px;
    font-weight: 300;
}

#contacts li {
    margin-bottom: 20px;
}

#contacts a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-style: wavy;
    text-underline-offset: 5px;
}

#contacts a:hover, #contacts a:focus {
    text-decoration-style: solid;
}