:root {
    --main-bg-colour: white;
    --main-txt-colour: #282828;
    --hue: 120;
    --saturation: 50%;
    --lightness-offset: 0%;
    --lightness: 40%;
    --numberOfColumns: 7;
    --numberOfRows: 7;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.main {
    display: flex;
    flex-direction: column;
    padding: 1em;
    align-items: center;
    height: 100%;
    min-height: 100%;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}

.secondary {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

body, html {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    font-size: clamp(0.5rem, 2.5vmin, 2.5rem);
    background: var(--main-bg-colour);
    color: var(--main-txt-colour);
    overflow: hidden;
}

.naslov {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5em;
}

.sredina {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.pomoc-sredini {
}


.labirint {
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(var(--numberOfColumns), 3em);
    grid-template-rows: repeat(var(--numberOfRows), 3em);
    box-shadow: 0.2em 0.2em 1em .2em rgba(0, 0, 0, 0.3);
    border-radius: 1em;
}

.navodila {
    display: flex;
    position: absolute;
    flex-direction: column;
    top: 0;
    min-height: 46vh;
    height: 24.5em;
    width: 30em;
    z-index: 1;
    background: var(--main-bg-colour);
    color: var(--main-txt-colour);
    fill: var(--main-txt-colour);
    border-radius: 1em;
    overflow: scroll;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 3em;
    box-shadow: 0.2em 0.2em 1em .4em rgba(0, 0, 0, 0.5);
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

#death-screen {
    padding: 0;
    transform: translateY(-150%);
}

#death-screen img {
    margin: 0;
    animation: text-appear linear 300ms 100ms;
    max-height: 50%;
}

#death-screen h3 {
    margin: 0;
}

.hug-bottom {
    position: absolute;
    bottom: 1em;
}

.navodila::-webkit-scrollbar {
    display: none;
}

.navodila h3 {
    opacity: 0;
    margin: 1em 0;
    animation: text-appear ease-out 300ms 1s;
    animation-fill-mode: forwards;
}

.navodila h4 {
    opacity: 0;
    margin: 1em 1em 1em 0;
    animation: text-appear ease-out 300ms 1200ms;
    animation-fill-mode: forwards;
}

.navodila li {
    opacity: 0;
    margin: .3em;
    width: 100%;
    text-align: left;
    animation: text-appear ease-out 300ms 1600ms;
    animation-fill-mode: forwards;
}

.navodila p {
    opacity: 0;
    margin: .3em;
    animation: text-appear ease-out 300ms 1400ms;
    animation-fill-mode: forwards;
}

.navodila sub {
    font-size: .5em;
}

.special {
    background-image: linear-gradient(to left, violet, indigo, green, blue, yellowgreen, orange, red);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: .2em .4em .5em var(--main-txt-colour);

    animation: special-anim linear infinite 3s;
}

@keyframes special-anim {
    100% {
        background-position-x: 30em;
    }
}

.polje {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 3s ease-in-out;
}

.polje[data-state="path"].colored {
    background: rgb(125, 255, 125);
    transform: rotateZ(360deg);
}

.polje.colored {
    background: rgb(255, 125, 125);
    transform: rotateZ(360deg);
}

.polje:hover {
    --lightness-offset: 20%;
}

.polje.border-left {
    border-left: .2em solid #282828;
}

.polje.border-right {
    border-right: .2em solid #282828;
}

.polje.border-bottom {
    border-bottom: .2em solid #282828;
}

.polje.border-top {
    border-top: .2em solid #282828;
}

.border-radius-top-left {
    border-radius: 1em 0 0 0;
}

.border-radius-top-right {
    border-radius: 0 1em 0 0;
}

.border-radius-bot-left {
    border-radius: 0 0 0 1em;
}

.border-radius-bot-right {
    border-radius: 0 0 1em 0;
}

.treasure {
    display: flex;
    width: 3em;
    height: 3em;
    /*    border-width: .2em .2em 0;
        border-style: solid; */
    border-radius: 0.5em 0.5em 0 0;
    grid-column: 4;
    cursor: pointer;
    box-shadow: 0.2em 0.2em 1em .4em rgba(0, 0, 0, 0.5);
}

.usesa {
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.banane {
    grid-column-start: 6;
    grid-column-end: 8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    z-index: 0;
}

.banana {
    margin: 0.1em;
    transform: translateY(20vh);
}

.uses {
    color: #14213d;
    fill: #14213d;
    background: white;
    border: .1em solid #14213d;
    border-radius: 1em;
    margin: 0.1em;
    transform: translateY(20vh);
    cursor: pointer;
}

.uses:hover {
    animation: slow-up-down linear infinite 1s;
}

.move-up {
    animation: top-menu-move-up ease-in-out 1s;
    animation-fill-mode: forwards;
}

.move-down {
    animation: top-menu-move-down ease-in-out 1s;
    animation-fill-mode: forwards;
}

#uses-svg {
    width: 1em;
    height: 1em;
    margin: 0.2em;
}

.player-start {
    display: flex;
    width: 3.2em;
    height: 3.2em;
}

.top-grid {
    display: grid;
    grid-template-columns: repeat(var(--numberOfColumns), 3em);
    position: relative;
}

.treasure-position {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

img {
    width: 100%; /* or any custom size */
    height: auto;
    object-fit: contain;
    border-radius: 0.5em;
    cursor: pointer;
}

.banana img:hover {
    animation: slow-up-down linear infinite 1s;
}

#player-img.dead {
    transition: 200ms;
    transform: rotate(180deg);
}

#player-img:hover {
    animation: slow-up-down linear infinite 1s;
}

.quiz {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 100%;
    width: 40em;
    max-width: 100vw;
    box-sizing: border-box;
    position: absolute;
    top: 200vh;
    z-index: 5;
    background: white;
    transition: top 300ms ease-in-out;
    border: .1em solid #14213d;
    padding: 1em;
}

.be-in-middle {
    margin: 3vh;
}

.quiz-pic {
    cursor: auto;
    height: 30vh;
    width: 100%;
}

.vertical-answers {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    max-height: 30vh;
    position: absolute;
    bottom: 0;
}

.horizontal-answers {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    max-height: 30vh;
    position: absolute;
    bottom: 0;
}

.quiz-answer {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    background: white;
    color: #14213d;
    fill: #14213d;
    border: .1em solid #14213d;
    transition: ease-out 1.5s;
    align-self: flex-end;
}

.quiz-answer:hover {
    background: lightblue;
}

.quiz-answer.remove-right {
    transform: translateX(100vw) rotate(20deg);
}

.quiz-answer.remove-left {
    transform: translateX(-100vw) rotate(20deg);
}

.quiz-answer.remove-fade {
    transform: scale(0) rotate(360deg);
    opacity: 0;
}

.chosen {
    transform: scale(1.3);
}

@keyframes blink {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.quiz h3 {
    margin-top: 3vh;
    animation-fill-mode: forwards;
    transition: ease-in 300ms;
}

.quiz img {
    animation: text-appear linear 200ms 400ms;
    opacity: 0;
    animation-fill-mode: forwards;
}

.question-image {
    max-height: 10vh;
    width: 100%;
}

.answer-image {
    width: 100%;
    height: 10vh;
}