@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 500;
    font-stretch: 100%;
    src: url(/fonts/OpenSans-Medium.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(/fonts/OpenSans-Bold.woff2) format('woff2');
}

body {
    font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 18px;
    margin: 0;
    color: #444;
}

.root {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

.main-header {
    display: flex;
    justify-content: center;

    background-image: url(/images/crowd.webp), url(/images/flag.png);
    background-position: center bottom, center center;
    background-size: 1000px auto, cover;
    background-color: #008ed0;
    background-repeat: no-repeat;

    padding: 40px 0 310px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);

    .title {
        font-size: 0;
        width: 360px;
        height: 360px;
        background: url(/images/logo.webp) center center no-repeat;
        background-size: contain;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
        border-radius: 12px;
    }
}

.main-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;

    .intro-text {
        margin-bottom: 50px;
        font-size: 20px;
    }

    .join-fb-text {
        margin-bottom: 50px;

        .link {
            font-size: 22px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: #008ed0;

            .fb-logo {
                margin-inline-end: 10px;
                display: inline-block;
                width: 30px;
                height: 30px;
                background: url(/images/fb-logo.png) center center no-repeat;
                background-size: contain;
            }
        }
    }
}

.other-socials {
    display: flex;
    justify-content: center;
    align-items: center;

    .sub-title {
        margin: 0;
        font-weight: bold;
        font-size: 18px;
        margin-inline-end: 20px;
    }

    @media (max-width: 500px) {
        flex-direction: column;

        .sub-title {
            margin-bottom: 5px;
        }
    }

    .social-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 18px;

        .item {
            margin-inline-end: 20px;
            padding-left: 28px;
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 20px;

            .link {
                text-decoration: none;
                color: #008ed0;
            }
        }

        .item:last-child {
            margin-inline-end: 0;
        }

        .item.item-tiktok {
            background-image: url(/images/tt-logo.png);
        }

        .item.item-instagram {
            background-image: url(/images/ig-logo.png);
        }
    }
}

.car-photo {
    max-width: 900px;
    margin: 0 auto;
    font-size: 0;
    position: relative;

    @media (max-width: 500px) {
        margin: 0 -20px;
    }

    .fig-image {
        max-width: 100%;
        max-height: 100%;
        mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 67%);
        mask-repeat: no-repeat;
        mask-size: cover;

        opacity: 1;
        transition-duration: 1s;
        transition-property: opacity;
        transition-timing-function: ease-in-out;
    }

    .image-fader {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;

        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 67%);
        mask-repeat: no-repeat;
        mask-size: cover;

        opacity: 0;
        transition-duration: 1s;
        transition-property: opacity;
        transition-timing-function: ease-in-out;
    }
}

.main-footer {
    margin-bottom: 50px;

    .activity-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        .item {
            margin: 0 20px;
        }

        @media (max-width: 500px) {
            font-size: 16px;

            .item {
                margin: 0 10px;
            }
        }
    }
}