:root {
    --nav-list-color:  aliceblue;
    --nav-list-hover-color:  blueviolet;
    --nav-list-active-color:  aquamarine;
    --common-margin: 0 2rem;
}

h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

article {
    display: flex;
    justify-content: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


.fairytale-nav {
    margin-top: 0;
}

.nav-ul {
    display: flex;
    overflow-x: scroll;
    margin: 0;
    padding: 0 0 2rem 0;
    gap: 5%;
}

.nav-li {
    list-style: none;
    background-color: var(--nav-list-color);
    text-align: center;
    padding: 1.2rem 2rem; 
    cursor: pointer;
    border-radius: 5px;
}

.nav-li:hover {
    color: white;
    transition: 0.1s;
    background-color: var(--nav-list-hover-color);
}

.nav-li:active {
    background-color: var(--nav-list-active-color);
}

.nav-li.current {
    background-color: var(--nav-list-active-color);
}

menu {
    padding: 0;
}

menu > li {
    list-style-type: none;
    margin-bottom: 1rem;
}


.fairytale-btn {
    list-style-type: none;
    border: solid 1px black;
    border-radius: var(--border-radius-btn);
    min-width: 7rem;
    vertical-align: top;
    cursor: pointer;
}

.fairytale-btn[disabled] {
    cursor: not-allowed;
}

.fairytale-btn.active {
    background-color: aqua;
    animation: active var(--animation-duration) infinite ease-in;
}

@keyframes active {
    0% {
        /* transform:scale(1.0); */
        background-color: white;
    }
    50% {
        /* transform:scale(1.05); */
        background-color: aqua;
    }
    100% {
        /* transform:scale(1.0); */
        background-color: white;
    }
}


.list-text-button {
    border: none;
    background-color: white;
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius-btn);
}

.list-text-button.active {
    animation: active var(--animation-duration) infinite ease-in;
}

.section-title {
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4.5rem;
    border-radius: var(--border-radius);
}

.section-title.button {
    border-radius: var(--border-radius-btn);
}

.section-title.active {
    animation: active var(--animation-duration) infinite ease-in;
}

.active {
    animation: active var(--animation-duration) infinite ease-in;
}

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


.fairytale-decision-btn {
    border-radius: var(--border-radius-btn);
    border: solid 1px black;
    padding: 1rem 2rem;
    letter-spacing: 0.2rem;
    cursor: pointer;
}

.fairytale-decision-btn.active {
    animation: active var(--animation-duration) infinite ease-in;
}

.fairytale-decision-btn[disabled]{
    border: solid 1px grey;
    /* background-color: rgb(171, 162, 162); */
    opacity: 0.65;
    cursor: not-allowed;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.right {
    float: right;
}

.left {
    float: left;
}

.red-background {
    background-color: red;
    color: black;
}

.red-background-font-white {
    background-color: red;
    color: white;
}

.black-background {
    background-color: black;
    color: white;
}

.yellow-background {
    background-color: lightyellow;
}

.green-background {
    background-color: lightgreen;
}

.pink-background {
    background-color: pink;
}


.small-font {
    font-size: 1.4rem;
}

@media ( max-width: 600px ) { 
    img {
        width: 70%;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2rem;
    }
    
}