@font-face {
    font-family: 'Wulkan Display';
    src: local('Wulkan Display Bold'), local('Wulkan-Display-Bold'),
    url('fonts/WulkanDisplay/WulkanDisplayBold.woff2') format('woff2'),
    url('fonts/WulkanDisplay/WulkanDisplayBold.woff') format('woff'),
    url('fonts/WulkanDisplay/WulkanDisplayBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 Thin'), local('Brother-1816-Thin'),
    url('fonts/Brother1816/thin/Brother1816-Thin.woff2') format('woff2'),
    url('fonts/Brother1816/thin/Brother1816-Thin.woff') format('woff'),
    url('fonts/Brother1816/thin/Brother1816-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 Light'), local('Brother-1816-Light'),
    url('fonts/Brother1816/light/Brother1816-Light.woff2') format('woff2'),
    url('fonts/Brother1816/light/Brother1816-Light.woff') format('woff'),
    url('fonts/Brother1816/light/Brother1816-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 Regular'), local('Brother-1816-Regular'),
    url('fonts/Brother1816/regular/Brother1816-Regular.woff2') format('woff2'),
    url('fonts/Brother1816/regular/Brother1816-Regular.woff') format('woff'),
    url('fonts/Brother1816/regular/Brother1816-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 Medium'), local('Brother-1816-Medium'),
    url('fonts/Brother1816/medium/Brother1816-Medium.woff2') format('woff2'),
    url('fonts/Brother1816/medium/Brother1816-Medium.woff') format('woff'),
    url('fonts/Brother1816/medium/Brother1816-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 Bold'), local('Brother-1816-Bold'),
    url('fonts/Brother1816/bold/Brother1816-Bold.woff2') format('woff2'),
    url('fonts/Brother1816/bold/Brother1816-Bold.woff') format('woff'),
    url('fonts/Brother1816/bold/Brother1816-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Brother 1816';
    src: local('Brother 1816 ExtraBold'), local('Brother-1816-ExtraBold'),
    url('fonts/Brother1816/extraBold/Brother1816-ExtraBold.woff2') format('woff2'),
    url('fonts/Brother1816/extraBold/Brother1816-ExtraBold.woff') format('woff'),
    url('fonts/Brother1816/extraBold/Brother1816-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Brisa';
    src: local('Brisa Regular'), local('Brisa-Regular'),
    url('fonts/Brisa/Brisa Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --bg-grey: #f0f0f0;
    --light-grey-color: #c8c8c8;
    --dark-grey-color: #6A6A6A;
    --active-menu-color: #dadada;
    --facebook-color: #4267B2;
    --instagram-color: #833AB4;
    --twitter-color: #1DA1F2;
    --linkedin-color: #0E76A8;
}

* {
    font-family: 'Brother 1816', Arial, serif;
}

body {
    margin: 0;
    position: relative;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.article-main-container {
    display: flex;
    flex-direction: column;
}

.article-page-container {
    padding: 0;
    max-width: 500px;
    margin: auto;
    z-index: 2;
    position: relative;
}

.article-page-container h1 {
    font-size: 2rem;
    font-weight: 300;
    margin: 30px 0 0 0;
    padding-left: 20px;
}

.ending-img {
    width: 100%;
    height: auto;
}

@media (min-width: 1050px) {
    .article-main-container {
        display: flex;
        flex-direction: column;
    }

    .article-page-container {
        padding: 20px;
        max-width: 900px;
        margin: auto;
        z-index: 2;
        position: relative;
    }

    .article-page-container h1 {
        font-size: 3rem;
        font-weight: 300;
        margin: 0 0 50px 0;
        padding-left: 40px;
    }
}