html, body, #landing-page-root, #recipe-page-root, .recipe-overview, .container {
    height: 100%;
}

* {
    font-family: 'ABC Simon';
}

/* Font at assets/ABC-Simon-regular.otf */
@font-face {
    font-family: 'ABC Simon';
    src: url('ABC-Simon-Regular.otf') format('opentype');
}

/* Font at assets/ABC-Simon-bold.otf */
@font-face {
    font-family: 'ABC Simon Bold';
    src: url('ABC-Simon-Bold.otf') format('opentype');
}

/* Font at assets/Aeonik Pro.otf */
@font-face {
    font-family: 'Aeonik Pro';
    src: url('Aeonik Pro.otf') format('opentype');
}

.my-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
}

.statistics {
    height: 80%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20%;
}

.recipes {
    display: flex;
    /* make space-between */
    justify-content: space-between;
    padding: 20px;
}

.recipe {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.recipe-text {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
}

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

.recipe-image {
    position: relative;
    height: 130px;
    width: 130px;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.stat {
    font-family: 'ABC Simon';
    font-size: 9px;
}

.stat-number {
    font-family: 'Aeonik Pro';
    font-size: 9px;
    display: inline-flex;
    text-align: right;
}