:root {
    --color-primary: #20DE1B;
    --color-secondary: #C7F6C0;
    --color-black: #000;
    --color-button: #DD1C1A;
    --color-button-secondary: #F7C6C6;
    --color-bg: #FFFEF7;

    --font-size-xxxs: 0.75rem;
    --font-size-xxs: 1.125rem;
    --font-size-xs: 1.25rem;
    --font-size-s: 1.5rem;
    --font-size-ssm: 2rem;
    --font-size-sm: 2.8125rem;
    --font-size-m: 3.25rem;
    --font-size-l: 4.5rem;
    --font-size-xl: 5.625rem;
    --font-size-xxl: 12.5rem;
    --font-size-xxxl: 18.75rem;
    --font-size-xxxxl: 25rem;

    --line-height: 1.2;
    --line-height-l: 1.4;

    --spacing-xxs: 0.375rem;
    --spacing-xs: 0.75rem;
    --spacing-s: 1rem;
    --spacing-m: 1.5rem;
    --spacing-l: 2.5rem;
    --spacing-lxl: 3rem;
    --spacing-xl: 3.125rem;
    --spacing-xxl: 6.25rem;

    --mask-arm: -100px;
    --opacity: 100%;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

li,
a {
    list-style-type: none;
    text-decoration: none;
    color: var(--color-black);
}

/* ------- FONTS -------*/
body {
    font-family: forma-djr-text, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size-xs);
    line-height: var(--line-height);
}

.section__title,
.menu__title,
label,
.form__field > p,
.intro__title--veneer,
.conclusion>p,
.chefkok__name,
.cta__text,
.test__title,
.progression,
.chosen p,
.saving_card>p,
.timer,
.review__name,
.review__function,
.review__stars,
.doctor__function,
.intro-blood__title,
.start__content>h2,
.opening-hours__name,
.question--2__value,
.head__title {
    font-family: veneer-three, sans-serif;
    font-size: var(--font-size-xxl);
}

.section__title>span,
.contact-info__number,
.intro__title--chandler,
.menu__price,
.cta__text>span,
.aside,
.test__instruction,
.location__name,
.opening-hours__subname {
    font-family: chandler-42-regular, sans-serif;

    font-weight: 500;
    font-size: var(--font-size-xl);
}

.form__field--filter, .button__link--button {
    font-family: forma-djr-text, sans-serif;
    font-size: var(--font-size-xs);
}

/* ------- Algemeen -------*/
body {
    max-width: 94.5rem;
    margin: 0 auto;
    background-color: var(--color-bg);
    overflow: hidden scroll;
}

.container {
    margin: 0 var(--spacing-xxl);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.content__text > span {
    background-color: var(--color-primary);
}

/* ------- Header -------*/
.black {
    background-color: var(--color-black);
}

.green {
    background-color: var(--color-primary);
}

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

    z-index:100;
}

.header__nav {
    display: flex;
    gap: var(--spacing-l);

    background-color: var(--color-black);
    padding: var(--spacing-s) var(--spacing-m);
}

.nav__link {
    color: var(--color-bg);
    font-weight: 600;
    font-size: var(--font-size-xxs);

    transition: all 0.3s ease-out;
}

.nav__link--active {
    color: var(--color-primary);
}

/* ------- Titles -------*/
.section__title {
    text-transform: uppercase;
}

.section__title>span {
    text-transform: lowercase;
}

/*titles*/
.aside {
    color: var(--color-bg);
    background-color: var(--color-black);
    font-size: var(--font-size-xxs);
    padding: var(--spacing-xs) var(--font-size-xxs);
}

/* --- header --- */
.head {
    background-color: var(--color-black);
    display: grid;

    justify-items: center;
    align-items: center;

    padding-bottom: var(--spacing-xxl);
    padding-top: calc(var(--spacing-s));
}

.head__title {
    color: var(--color-primary);
    font-size: 23.30rem;
    line-height: 90%;

    text-transform: uppercase;
}

.head__title>span {
    font-size: 29.66rem;
    margin-top: calc(-1*var(--spacing-xxl));
}

.head__content,
.head__img {
    grid-row: 1;
    grid-column: 1;
}

.head__img {
    display: grid;

    animation: rotate 2s infinite alternate ease-in-out;
}

.head__img img, .head__img a{
    grid-row: 1;
    grid-column: 1;

    transition: all 0.5s ease-out;
}

.head__img a {
    opacity: 0;

    transition: all 0.5s ease-out;
}

.head__img:hover a {
    opacity: 100;
}

.head__content {
    display: grid;

    justify-items: end;
    align-items: end;
}

.head__title,
.head__text {
    grid-row: 1;
    grid-column: 1;
}

.head__text {
    margin-bottom: var(--spacing-xl);

    display: grid;
    justify-items: start;
}

.head__text p {
    color: var(--color-primary);
    font-size: var(--font-size-s);
}

@keyframes rotate {
    from {
            transform: rotate(-10deg);
        }
    
    
        to {
            transform: rotate(10deg);
        }
}

/*intro*/
.intro {
    background: var(--color-primary);
    position: relative;
}

.intro::before {
    content: url('../assets/intro_before.svg');
    position: absolute;
    top: -2rem;
}

.intro::after {
    content: url('../assets/intro_after.svg');
    position: absolute;
    bottom: -3rem;
}

.intro_part1 {
    padding-top: var(--spacing-xl);
    margin-right: var(--spacing-l);

    display: flex;
    justify-content: flex-end;

    position: relative;

    z-index: 100;
}

.kannibalism__img {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 10rem;
}

.intro__title {
    transform: rotate(-1.102deg);

    display: grid;
    justify-content: end;
    grid-template-rows: max-content;
}

.intro__title--chandler {
    font-size: var(--font-size-m);
    padding: var(--spacing-xs) 0;
}

.intro__title--chandler>span {
    font-weight: 400;
}

.intro__title--veneer {
    color: var(--color-bg);
    background-color: var(--color-black);
    padding: var(--font-size-xs) var(--spacing-xl);
}

.intro__img {
    margin-top: calc(-1.1*var(--spacing-xxl));
    text-align: right;
}

.kannibalism__def {
    margin-top: calc(-1*var(--spacing-xl));
    text-align: end;
}

.intro_part2 {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-rows: 1fr 1fr;
    justify-items: end;
    margin-top: calc(-1*var(--spacing-xxl));

    z-index: 200;
}

.blood__img {
    grid-column: 2;
    grid-row: 1 / 3;

    margin-top: var(--spacing-l);
}

.vegetarian {
    display: grid;
    justify-content: end;
    justify-items: start;
    grid-template-columns: max-content;
    grid-template-rows: min-content min-content min-content min-content;
    margin-left: var(--spacing-xl);

    font-family: chandler-42-regular, sans-serif;
}

.vegetarian__def+p {
    font-size: 7.5rem;
    font-weight: 500;
    text-transform: uppercase;
}

.vegetarian__def+p+p {
    font-size: var(--font-size-s);
    font-weight: 300;

    justify-self: end;
}

.vegetarian__def+p+p>span {
    font-weight: 500;
}

.vegetarian__def+p+p+p {
    font-size: var(--font-size-xxxs);
    justify-self: end;
}

.conclusion {
    display: flex;
    gap: var(--spacing-xl);
    margin-top: calc(-2.5*var(--spacing-xxl));
}

.conclusion::before {
    content: url('../assets/conclusion_arrow.svg');
}

.conclusion>p {
    font-size: 7.5rem;

    color: var(--color-bg);
    padding: var(--spacing-m);
    padding-right: 7.5rem;
    padding-left: var(--spacing-xl);
    background-color: var(--color-black);

    text-align: end;

    text-transform: uppercase;
}

/* --- content --- */
/* --- gedoneerd bloed --- */
.content__intro {
    font-weight: 700;
}

.content__intro+.content__text,
.content__intro+.content__ul,
.content__ul+.content__text {
    margin-top: var(--spacing-m);
}

.content__text+.content__text {
    margin-top: var(--spacing-xs);
}

.gedoneerd_bloed {
    margin-top: calc(var(--spacing-xxl));
}

.blood>.section__title {
    display: flex;
    flex-direction: column;
    text-align: end;
}

.blood>.section__title>span {
    text-align: start;
}

.blood>.section__content {
    margin-top: var(--spacing-m);
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-rows: min-content auto;
    gap: var(--spacing-l);
}

.section__img--blood {
    order: -1;
    margin-left: calc(-1*var(--spacing-xxl));
    margin-top: calc((-2.2*var(--spacing-xxl)));
}

/*Menu*/
.menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    align-items: start;
}

.container-menu_img {
    grid-row: 2;
    grid-column: 1;
    padding-bottom: calc(3*var(--spacing-xl));
}

.menu__content {
    grid-row: 1 / 3;
}

.menu__intro {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-rows: max-content min-content;

    justify-content: start;
    align-items: end;
    justify-items: start;
}

.menu__intro>aside {
    grid-column: 1 / 3;
}

.menu__price {
    font-size: var(--font-size-xxs);
    font-weight: 400;

    justify-self: end;

    display: flex;
    flex-direction: column;
    align-items: end;

    margin-bottom: var(--spacing-l);
}

.menu__price>span {
    font-weight: 500;
}

.menu__content {
    background-image: url('../assets/frame.png');
    background-repeat: no-repeat;
    background-position: center;

    padding: 10rem 0;
    transform: rotate(15deg);

    margin-right: -12rem;
}

.content__gang {
    display: grid;
    grid-template-columns: 22rem;
    grid-template-rows: min-content 27rem min-content;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.menu__title {
    text-transform: uppercase;
    margin-top: 3rem;
    font-size: var(--font-size-l);
}

.menu__item {
    font-size: var(--font-size-s);
    line-height: var(--line-height-l);

    color: var(--color-bg);
    background-color: var(--color-black);

    padding: var(--spacing-xs);
}

.menu__item+.menu__item {
    margin-top: 5.4rem;

    position: relative;
}

.menu__item+.menu__item::before {
    content: url('../assets/asterix.svg');
    position: absolute;

    top: -4rem;
    left: 9rem;
}

.container-menu_img {
    margin-left: calc(-1*var(--spacing-xxl));
    display: grid;
    grid-template-columns: max-content 1fr 1fr 1fr;
    grid-template-rows: auto max-content;

    align-items: end;
}

.menu__img--hover {
    opacity: 0;
}

.img__dessert {
    grid-column: 1;
    grid-row: 1;

    margin-left: 1rem;
    margin-bottom: -2rem;

    z-index: 100;
}

.img__drank {
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}

.img__hoofdgerecht {
    grid-row: 1 / 3;
    grid-column: 3;
    margin-left: -5rem;
}

.img__voorgerecht {
    grid-row: 1 / 3;
    grid-column: 4;
    margin-left: -8rem;
    z-index: 100;
}

.img__hoofdgerecht,
.img__voorgerecht {
    margin-bottom: var(--spacing-xl);
}

.img__bord {
    grid-column: 1 / 3;
    grid-row: 2;

    margin-left: -6.5rem;
}

/*chefkok*/
.chefkok {
    margin-top: var(--spacing-xl);
    display: flex;
    background-color: var(--color-primary);
    justify-content: space-between;
    justify-content: flex-end;

    background-image: url('../assets/chef.png');
    background-repeat: no-repeat;
    background-size: 685 926;
}

.chefkok__intro {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content max-content;

    align-items: center;
    justify-content: center;
    justify-items: center;

    align-self: end;

    margin-top: var(--spacing-m);
}

.chefkok__intro>.section__title {
    grid-row: 1;
    grid-column: 1;
}

.chefkok__name {
    transform: rotate(3.958deg);
    font-size: var(--font-size-s);

    grid-row: 1;
    grid-column: 1;

    background-color: var(--color-primary);
    padding: var(--spacing-xs);

    justify-self: end;
    margin-right: var(--spacing-xxl);
}

.chefkok__list {
    display: grid;
    justify-items: center;
    justify-content: center;
    gap: var(--spacing-xl);

    order: -1;

    margin-top: var(--spacing-xl);
}

.chefkok__content {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: var(--spacing-l);
    margin-right: var(--spacing-xl);
    padding-top: var(--spacing-xl);
}

.img__chef {
    grid-row: 1;
    grid-column: 1;
}

.chefkok__list-item--1 {
    transform: rotate(6.77deg);
}

.chefkok__list-item--2 {
    transform: rotate(-2.29deg);
}

.chefkok__list-item--3 {
    transform: rotate(3deg);
}

/*CTA*/
.cta {
    text-align: center;
    color: var(--color-bg);
    padding: var(--spacing-xxl);
}

.cta__content {
    background-image: url('../assets/cta_background.svg');
}

.cta__text {
    display: flex;
    flex-direction: column;

    font-size: var(--font-size-xxxl);
    text-transform: uppercase;
}

.cta__text>span {
    font-size: var(--font-size-sm);
    text-transform: lowercase;

    margin-top: -3rem;
    /* nog var van maken? */
}

/*reviews*/
.section__reviews {
    background-color: var(--color-primary);
    padding-bottom: var(--spacing-l);
}

.section__reviews>.container {
    display: grid;
    justify-items: start
}

.filter-form {
    display: flex;
    gap: var(--spacing-s);
}

.filter-form>div {
    display: flex;
    border: solid 2px var(--color-button);
    background-color: var(--color-bg);
}

.form__field--filter {
    padding: var(--spacing-xs);
}

.filter-form {
    margin: var(--spacing-m) 0;
}

.reviews {
    overflow-x: scroll;


    display: flex;
    gap: var(--spacing-xl);

    padding: var(--spacing-m) var(--spacing-xl);
    margin: var(--spacing-l) 0;
}

.review {
    background-image: url('../assets/paper_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    /*min-width: 25rem;*/

    display: grid;
    grid-template-columns: 15rem 10rem;
    grid-template-rows: min-content 1fr min-content;
    justify-content: center;
    row-gap: var(--spacing-s);

    align-items: end;

    padding: var(--spacing-l);
}

.review__name {
    font-size: var(--font-size-m);
    text-transform: capitalize;

    margin-left: var(--spacing-s);
}

.review__function {
    color: var(--color-bg);
    font-size: var(--font-size-xs);
    background-color: var(--color-black);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.03375rem;
    padding: 0 var(--spacing-xxs);
}

.review__stars {
    grid-row: 3;
    grid-column: 2;
    font-size: var(--font-size-l);
    justify-self: end;
    padding-top: var(--spacing-m);
    transform: rotate(-6.027deg);
}

.review__stars > span {
    color: var(--color-bg);
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: var(--color-black);
}

.review__content {
    grid-row: 2;
    grid-column: 1 / 3;

    /*padding-top: var(--spacing-l);*/
    align-self: center;

    margin-left: var(--spacing-s);
}

/* --- location --- */
.contact {
    margin-top: var(--spacing-xl);
}

.location__name {
    font-size: var(--font-size-s);
}

.location__adress,
.opening-hours__hours,
.opening-hours__day {
    font-size: var(--font-size-xxs);
}

.location__adress+.location__name {
    margin-top: var(--spacing-m);
}

.opening-hours__subname {
    background-color: var(--color-black);
    font-size: var(--font-size-xxs);
    transform: rotate(2.5deg);

    margin-top: calc(-1*var(--spacing-s));
}

.opening-hours__name {
    background-color: var(--color-black);
    font-size: var(--font-size-ssm);
}

.opening-hours__name,
.opening-hours__subname {
    background-color: var(--color-black);
    padding: var(--spacing-xs);
}

.opening-hours__hours {
    font-weight: 600;
}

.opening-hours__table {
    color: var(--color-bg);
    background-color: var(--color-black);

    display: grid;
    padding: var(--spacing-m);

    margin-top: calc(-1*var(--spacing-s));
}

.opening-hours__table--donor {
    grid-template-columns: repeat(3, 1fr);

}

.opening-hours__table--restaurant {
    grid-template-columns: repeat(2, 1fr);
}

.opening-hours__day,
.opening-hours__hours {
    padding: var(--spacing-xxs) 0;
}

.opening-hours__hours {
    padding-left: var(--spacing-l);
}

.opening-hours__day,
.opening-hours__hours {
    border-bottom: var(--color-bg) solid 1px;
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-template-rows: min-content 1fr;
    justify-items: start;
}

.location dl {
    background-color: var(--color-bg);
    border: solid 1px var(--color-black);
    padding: var(--spacing-l);

    margin-top: calc(-1*var(--spacing-xxl));
    transform: rotate(-2.769deg);
}

.location {
    grid-column: 1;
    grid-row: 1 / 3;

    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: min-content min-content;
    justify-items: start;
}

.contact-info__number {
    grid-column: 2;
    grid-row: 1;
}

.opening-hours {
    margin-top: var(--spacing-xl);

    grid-column: 2;
    grid-row: 2;

    display: flex;
}

.opening-hours__donor>div,
.opening-hours__restaurant>div {
    color: var(--color-bg);

    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: min-content min-content;
}

.opening-hours__restaurant {
    display: flex;
    margin-left: calc(-1*var(--spacing-xl));
}

.opening-hours__restaurant>div {
    margin-top: calc(-1*var(--spacing-s));
    margin-right: calc(-1*var(--spacing-s));
}

.opening-hours__donor {
    margin-top: var(--spacing-m);
}

/* --- footer --- */
footer {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl) 0;
    background-color: var(--color-black);
    color: var(--color-bg);
}

.footer__nav {
    display: grid;
    gap: var(--spacing-s);
    justify-content: end;
}

.nav__link--footer {
    font-weight: 400;
}

.nav__link:hover {
    color: var(--color-primary);
}


/* buttons */
.button__link--button {
    border:none;
    background-color: transparent;
    font-size: var(--font-size-s);
}

.button {
    font-size: var(--font-size-s);
    padding: var(--spacing-xs);
    margin: var(--font-size-s) 0;
    display: inline-block;

    color: var(--color-bg);
    background-image: url('../assets/button-primary.svg');
    background-size: cover;
    border: none;

    position: relative;

    transition: all 0.3s ease-out;
}

.button__link {
    color: var(--color-bg);

    transition: all 0.3s ease-out;
}

.button__link.next::after {
    content: url('../assets/arrow.svg');
    margin-left: var(--spacing-s);

    transition: all 0.5s ease-out;
}

.button__link.back::before {
    content: url('../assets/arrow__back-primary.png');
    margin-right: var(--spacing-s);

    transition: all 0.5s ease-out;
}

/* buttons hover */
.button:hover, .button--secondary {
    background-image: url('../assets/button-secondary.svg');
    border-right: solid 2px var(--color-button);
}

.button:hover>.button__link, .button--secondary >.button__link {
    color: var(--color-button);
}

.button:hover>.next::after {
    content: url('../assets/arrow-secondary.svg');
}

.button:hover>.back::before, .button--secondary>.back::before {
    content: url('../assets/arrow_back-secondary.svg');
}

/*button secundary hovers*/
.button--secondary:hover {
    background-image: url('../assets/button-primary.svg');
    border-right: solid 2px var(--color-button);
}

.button--secondary:hover>.button__link {
    color: var(--color-bg);
}

.button--secondary:hover>.back::before {
    content: url('../assets/arrow__back-primary.png');
}

/* crazy buttons */
.button--timer {
}

.button--timer>.button__link::after {
    content: none;
}

.button--timer:hover>.button__link::after {
    content: none;
}

.button__cta {
    margin: var(--spacing-xl);
}

/*js*/
.has-js .form-submit {
    display: none;
}