/* Kids area */
body {
    font-size: var(--kids-font-size);
    margin: 3vh;
}


input, input::placeholder {
    font-family: var(--standard-font-family);
    /*font-size: var(--kids-font-size);*/
}

/* kids logo */
.logo-row {
    grid-area: logo;
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 98vw;
}

.logo {
    max-height: 16vh;
    max-width: 75vw;
    width: auto;
}

.logo:hover {
    content: url("../../img/logo_landscape.svg");
}

/* standard design (frame)*/
.kids_raster {
    display: grid;
    margin-bottom: 4vh;
    grid-template-columns: 57fr 20fr;
    grid-template-rows: 18vh 16vh 31vh 16vh;
    gap: 3vh;
    grid-template-areas:
            "logo logo"
            "input_high forward"
            "input_low side_picture"
            "error backward"
}

.forward {
    grid-area: forward;
    background-color: transparent;
    border: None;
    text-align: center;
}

.backward {
    grid-area: backward;
    background-color: transparent;
    border: None;
    text-align: center;
}

.side_picture {
    grid-area: side_picture;
    max-height: 34vh;
}

.error {
    grid-area: error;
}


/* middle parts */
.huge_middle_part {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

.big_middle_part {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
}

.long_middle_part {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

.small_middle_part {
    grid-area: input_low;
}

video {
    width: 100%;
    height: 45vh;
}

.inner_grid_element {
    height: 100%;
    padding: 0;
}

/* kids-startpage */
.kids_startpage_raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 18vh 32vh 32vh 3vh;
    gap: 3vh;
    grid-template-areas:
            "logo logo"
            "test_start test_continue"
            "qr_code_scanner video"
            ". teacher_view"
}

.teacher_view {
    grid-area: teacher_view;
    text-align: right;
}

.background_rainforest {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("../../img/rainforest_background.svg");
    bottom: 0;
    right: 0;
    background-size: cover;
    z-index: -2;
}


.background-opacity {
    background-color: rgba(0, 0, 0, 0.5); /* darken background */
    /*background-color: rgba(255, 255, 255, 0.4); lighten background*/
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.black_element, .white_element, .white_element_no_hover, .black_element_no_hover {
    border-radius: 2vh;
    border: solid 2px;
    display: flex; /* for setting items/text in the middle vertically */
    padding: 1vh;
    /* center content */
    justify-content: center;
    align-content: center;
    /* center text */
    text-align: center;
    align-items: center;
}

/* colour settings */
.black_element, .white_element:hover, .black_element_no_hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

.black_element:hover, .white_element, .white_element_no_hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
}