@property --border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
}

@property --primary-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px;
}

@property --secondary-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
}

@property --background-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #f9f9f9;
}

@property --primary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #474747;
}

@property --secondary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #afafaf;
}

@property --tertiary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #2c2c2c;
}

@property --colorful-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #fdb4b4;
}

@property --transition-time {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.3s;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--primary-color);
    background-color: var(--background-color);
    margin: 0;
    border: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

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

.card {
    border: solid var(--border-width) var(--primary-color);
    border-radius: var(--primary-border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color);
    padding: 20px;
    margin: 20px 0 0 0;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    header {
        display: block;
    }
}

header nav ul.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    nav {
        width: 100%;
        margin: 1em 0;
    }

    header nav ul.nav-links {
        /* flex-direction: column; */
        gap: 10px;
        width: 100%;
        justify-content:flex-start;
    }
}

a.btn-primary {
    background-color: var(--background-color);
    padding: 10px;
    border: solid var(--border-width) var(--primary-color);
    border-radius: var(--secondary-border-radius);
    transition: var(--transition-time);
    display: inline-block;
}

a.btn-primary:hover,
a.btn-primary:focus {
    background-color: var(--colorful-color);
}

@media (max-width: 768px) {
    header a.btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* Hero section */

main .hero {
    text-align: center;
}

/* Services section */

.services {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.service {
    flex: 1 1 350px;
    text-align: center;
}

.service img {
    width: 64px;
}

/* Advertising section */

main section.advertising {
    text-align: center;
}

/* Contact section */

main section.contact {
    text-align: center;
}

footer .footer-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

footer .footer-wrap>* {
    flex: 1 1 250px;
}

@media (max-width: 768px) {
    footer .footer-wrap {
        gap: 0px;
    }
}


footer a:hover,
footer a:focus {
    text-decoration: underline;
}

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

/* Footer bottom area */

.footer-bottom {
    text-align: center;
    border: solid var(--border-width) var(--primary-color);
    border-radius: var(--secondary-border-radius);
    padding: 20px;
}