/* Useful Font Colors */
.f-bold,
.f-bold>* {
    font-weight: bold;
}

.f-yellow,
.f-yellow>* {
    color: var(--color-yellow);
}

.f-pink,
.f-pink>* {
    color: var(--color-pink);
}

.f-red,
.f-red>* {
    color: var(--color-red);
}

.f-green,
.f-green>* {
    color: var(--color-green);
}

.f-big,
.f-big>* {
    font-size: 1.2rem;
}

/* Poppins */
@font-face {
    font-family: 'Poppins';
    src: URL('/assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Poppins';
    src: URL('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: bolder;
}

@font-face {
    font-family: 'Poppins';
    src: URL('/assets/fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: URL('/assets/fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: lighter;
}

@font-face {
    font-family: 'Poppins';
    src: URL('/assets/fonts/Poppins-Regular.ttf') format('truetype');
}

/* Inter */
@font-face {
    font-family: 'Inter';
    src: URL('/assets/fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Inter';
    src: URL('/assets/fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: bolder;
}

@font-face {
    font-family: 'Inter';
    src: URL('/assets/fonts/Inter-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Inter';
    src: URL('/assets/fonts/Inter-ExtraLight.ttf') format('truetype');
    font-weight: lighter;
}

@font-face {
    font-family: 'Inter';
    src: URL('/assets/fonts/Inter-Regular.ttf') format('truetype');
}

* {
    color: white;
    font-family: 'Poppins';
    font-weight: 300;
    line-height: 1.2rem;
}

a {
    text-decoration: none;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Background Setup */

@media screen and (max-width:1200px) {
    body {
        background-position-y: -40rem;
        background-position-x: calc(-100rem + 100vw) !important;
    }
}

body {
    background-image: url('/assets/img/bg.jpg');
    /*background-position-y: calc(70rem - 30vw);*/
    background-position-y: -40rem;
    background-position-x: calc(-50rem + 30vw);
}

h1,
h1 * {
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
}


section {
    margin-left: 12%;
    margin-right: 12%;
}

@media screen and (max-width: 400px) {
    section {
        margin-left: 6%;
        margin-right: 6%;
    }
}

article.broken {
    display: flex;
    flex-wrap: wrap;

    max-width: 1024px;
}

article.broken>p.broken {
    flex: 1 1 100px;
    min-width: 200px;
    width: 500%;
    max-width: 700px;
    margin: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}