/* --- test --- */
.test {
    text-align: center;

    height: 75vh;
    margin: var(--spacing-m) auto;

    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.buttons {
    margin: 0 var(--spacing-xxl);
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    justify-items: start;
}

.test--4~.buttons {
    display: flex;
    justify-content: space-between;
    margin-right: calc(3.5*(var(--spacing-xl)));
}

.buttons>.button {
    margin: 0 0;
}

.answer {
    justify-self: center;
}

.question {
    background-image: url('../assets/bg_test_green.svg');
    background-repeat: no-repeat;
    background-position: top center;
    flex-grow: 2;
    margin: 0 var(--spacing-xxl);
}

.question--white {
    background-image: url('../assets/bg_test_white.svg');
}

.progression {
    order: 1;
    margin-left: var(--spacing-l);
    font-size: var(--font-size-xxs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

.progression__step {
    padding: var(--spacing-xs);
    background-color: var(--color-secondary);
    flex-grow: 1;

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

    border: solid 2px var(--color-secondary);
}

.progression__step--active,
.progression__step:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.progression__step--inactive,
.progression__step--inactive:hover {
    background-color: transparent;
    border-color: var(--color-secondary);
}

.test__question {
    margin: var(--spacing-xs) 0;
}

.test__title {
    font-size: var(--font-size-m);
    margin-bottom: var(--spacing-xxs);
}

.test__instruction {
    font-size: var(--font-size-xxs);
}

/* --- test start --- */
.start>.section__img {
    margin-top: calc(-1*var(--spacing-m));
    margin-left: calc(-6*var(--spacing-xxl));
}

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

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

    margin-top: calc(-2*var(--spacing-xxl));
    margin-right: var(--spacing-m);

}

/* --- test question 4 result --- */
.question--4result>.test__question {
    display: grid;
    justify-content: center;
}

.question--4result>.test__question>.test__title {
    text-transform: uppercase;
    font-size: var(--font-size-xxxxl);
}

.question--4result>div .result__content {
    margin-top: calc(-1*var(--spacing-lxl));
    transform: rotate(-0.88deg);
}

.start__content h2 {
    font-size: var(--font-size-m);
    padding: var(--spacing-s);
    background-color: var(--color-black);
    color: var(--color-bg);
    transform: rotate(-1deg);
}

.start__content .aside {
    margin-top: calc(-1*var(--spacing-s));
    font-size: var(--font-size-s);
    padding: var(--spacing-s);
    transform: rotate(0.1deg);
}

.extra__info {
    margin-top: var(--spacing-lxl);
}

/* --- test result --- */
.result {
    margin-top: var(--spacing-l);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
}

.result>.section__img {
    order: 1;
    background-color: var(--color-primary);
    margin-right: calc(-1*var(--spacing-xxl));
}

.result--positive>.section__img {
    transform: scaleX(-1);
}

.result>.result__content>.test__title {
    text-transform: uppercase;
    font-size: var(--font-size-xxl);
}

.buttons--result {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xl);
    justify-content: space-between;
    margin-top: var(--spacing-m);
    margin-right: var(--spacing-xl);
}

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


/* --- test 1 --- */
.question--1 {
    margin-top: calc(-1*var(--spacing-m));
    min-height: 498,2px;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: repeat(5, 100px);
    /*toch rows, want anders verspringen de imgs, als je een images dragged.*/
    justify-content: center;
    align-items: center;
}

/*.ingredients {
    grid-row: 1;
    grid-column: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    justify-content: space-between;
    grid-auto-flow: column;
    margin: 0 var(--spacing-xl);
}*/

.ingredient, .drop_zone {
    z-index:100;
}

.ingredient+.ingredient {
    margin-top: calc(-1.5*var(--spacing-xl));
}

.ingredient.right {
    margin-right: calc(-1*var(--spacing-xxl));
}

.ingredient.left {
    margin-right: calc(1*var(--spacing-xxl));
}

.ingredient+.ingredient--konijn {
    margin-top: 0;
}

.ingredient+.ingredient--brocolli {
    margin-top: calc(-1.8*var(--spacing-xxl));
    margin-left: calc(-1*var(--spacing-xl));
}

.ingredient + .ingredient--paard {
    margin-top: calc(-1*var(--spacing-l));
}

.ingredient.ingredient--varken {
    margin-right: calc(-1*var(--spacing-l));
    z-index: 1;
}

.ingredient.ingredient--paprika {
    margin-top: calc(-1.5*var(--spacing-xxl));
    margin-left: calc(-1*var(--spacing-xl));
}

.ingredient.ingredient--kalkoen {
    margin-top: calc(-1.5*var(--spacing-xxl));
}

.ingredient.ingredient--tomaat {
    margin-top: calc(-0.5*var(--spacing-xxl));
}

.ingredient.ingredient--lam {
    margin-top: calc(-2*var(--spacing-xxl));
    margin-right: calc(-2*var(--spacing-xxl));
}

.ingredient.ingredient--kip {
    z-index: 1;
}

.drop_zone {
    grid-row: 1 / 6;
    grid-column: 2;
}

.chosen {
    background-image: url('../assets/paper_bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    text-align: left;
    display: grid;
    justify-content: start;

    padding: var(--spacing-l);
    transform: rotate(11deg);

    margin-top: calc(-1.5*var(--spacing-xxl));
    margin-left: calc(-1*var(--spacing-xxl));

    min-height: 370px;
}

.chosen p {
    font-size: var(--font-size-ssm);
    text-transform: uppercase;
    margin-bottom: var(--spacing-m);
}

.ingredients_chosen {
    display: grid;
    grid-template-columns: repeat(2, 10.75rem);
    grid-template-rows: repeat(6, 1fr);
    column-gap: var(--spacing-m);
    justify-content: normal;
}

.ingredients_chosen li {
    padding: var(--spacing-xxs) 0;
    border-bottom: var(--color-black) 0.25px solid;
}

.ingredients_chosen__li--placeholder {
    grid-row: 6;
    grid-column: 2;
}

.ingredients_chosen li:hover {
    text-decoration: line-through;
}

.buttons--question1 {
    margin-top: calc(-4.3*var(--spacing-xl));
}

/* --- test 2 ---*/
.question--2 {
    display: grid;
    grid-template-rows: min-content 1fr min-content min-content;
}

.arm {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    margin-top: calc(-1.5*var(--spacing-xxl));

    z-index: 2;
}

.arm>img,
.arm>div {
    grid-row: 1;
    grid-column: 1;
}

.arm__overlay {
    background-image: url('../assets/arm-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    mask-image: url('../assets/arm-mask.svg');
    mask-size: 1097px 584px;
    mask-repeat: no-repeat;
    mask-origin: content-box;
    mask-position: var(--mask-arm) 0px;
}

.slider {
    display: grid;
    margin: 0 var(--spacing-xl);
    margin-bottom: var(--spacing-m);
    justify-items: stretch;

}

.slider__input {
    z-index: 100;

    -webkit-appearance: none;

    background: white;
    border: solid 2px black;
    height: var(--spacing-xxs);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    margin-top: 0;
    /* Centers thumb on the track */
    background-color: var(--color-button);
    height: var(--spacing-m);
    width: var(--spacing-m);
}

.slider__input {
    z-index: 100;
}

.question--2__value {
    margin-top: calc(-5*var(--spacing-xl));
    margin-right: var(--spacing-xl);
    text-align: end;

    z-index: 1;
}

/*vraag3*/
.question--3 {
    /*cursor: url(../assets/kiss_cursor.png);*/
    background-image: none;
}

.buttons--question3 {
    padding-bottom: var(--spacing-m);
}

.question--3>.test__question {
    margin-top: 0;
}

.container__test3 {
    margin-top: calc(-1*var(--spacing-s));
    position: relative;
    background-image: url('../assets/saving_card_bg.png');
    background-repeat: no-repeat;
    background-size: cover;

    background-color: var(--color-primary);
}

.container__test3>.container>.test {
    background-color: transparent;
}

.saving_card {
    transform: rotate(-1.5deg);

    position: absolute;
    bottom: 0;

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

.saving_card>p {
    text-transform: uppercase;
    font-size: var(--font-size-l);
    text-align: left;
}

.checkbox_kiss {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background-image: url('../assets/kiss.png');
    background-size: 150px 150px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border: none;
}

.checkbox_kiss:checked {
    background-image: url('../assets/kissed.png');
}

.checkbox_kiss--all {
    background-image: url('../assets/kissed_all.png');
    background-size: 130px 130px;
    height: 130px;
    width: 130px;

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

.kiss {
    display: grid;
    grid-template-columns: repeat(6, min-content);
    grid-template-rows: repeat(2, max-content);
    gap: var(--spacing-xs);
    justify-content: center;
    margin-left: var(--spacing-xxl);
}

.kiss_all {
    grid-column: 6;
    grid-row: 1 / 3;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

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

.kiss_all>label {
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
}

.kiss_all>input {
    grid-row: 1;
    grid-column: 1;
}

/* vraag4 */
.question--4 {
    background-image: url('../assets/bg_test_white.svg');
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

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

.buttons_question4 {
    position: relative;
}

.question--4>.test__question {
    z-index: 100;

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

    align-self: start;
    justify-self: start;

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

    transform: rotate(-4deg);

    padding: var(--spacing-l);
    margin-top: calc(-1.5*var(--spacing-xxl));
    margin-left: calc(-2.2*var(--spacing-xxl));
}

.question--4>.test__question>.test__title {
    font-size: var(--font-size-xxl);
}

.timer {
    z-index: 100;
    font-size: var(--font-size-xxxl);
    color: var(--color-bg);
    background-color: var(--color-black);
    padding: 0 var(--spacing-l);

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

    transform: rotate(-1.5deg);
}

p a {
    text-decoration: underline var(--color-primary);
}

p a:hover {
    color: var(--color-primary);
}