.city-img {
    width: 100%;
    margin-bottom: 15px;
}


.city-option {
    padding: 20px;
}

.story-config {
    border: 0;
    text-align: left;
    transition: 0.3s all ease-in-out;
    box-shadow: 0px 9px 13px #0000001a;
    background: #f4f2f3;
    border-radius: 6px;
    padding: 0
}

.story-config:hover {
    transform: translateY(-5px);
    box-shadow: 0px 9px 13px #00000057;
}

.story-config:focus {
    outline: 0
}

.character-img, .house-img {
    width: 100%;
}

/*Form styling*/
#character-name,
#village-name {
    width: 100%;
}

input {
    background-color: #e9e5e8;
    border: 0;
    padding: 5px 10px;
    border-radius: 3px;
    font-family: 'Nunito Sans';
    color: #5d5d5d;
    transition: 0.3s all ease-in-out;
}

#start-form input:hover {
    background: #dbd3d9

}

.submit-btn,
.next-page {
    font-family: 'Nunito Sans';
    background: linear-gradient(105deg, rgba(218, 155, 178, 1) 0%, rgba(198, 107, 140, 1) 100%);
    color: white;
    border: 0;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 10px;
    letter-spacing: 0.5px;
    transition: background-position 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
    background-size: 200%;
    background-position: left;
}

.submit-btn {
    width: 100%;
}

.next-page {
    width: 30%;
    margin-top: 25px;
}

.submit-btn:hover,
.next-page:hover {
    background-position: right;
    color: white;
    letter-spacing: 0.8px;
}

.bi-book-fill {
    margin-top: -3px;
}

/*story images*/
.story-img {
    width: 70%;
    border: 30px solid white;
    margin: 30px 0;
    box-shadow: 0px 9px 13px #00000024;
}

.story-img.chapter-6 {
    border: 0;
    box-shadow: unset;
    transition: 0.3s all ease-in-out;
    width: 50%;
}

.story-img.chapter-6:hover {
    filter: drop-shadow(0px 6px 11px #00000038);
}

#endPov1, #endPov2 {
    box-shadow: unset;
    text-align: center;
}

/*------config buttons styling------*/
/*general styling*/
#fightArea1 p, #fightArea2 p,
#villageSkin1 p, #villageSkin2 p {
    opacity: 0;
    transition: 0.3s all ease-in-out;
    color: white;
}

#fightArea1:hover p, #fightArea2:hover p,
#villageSkin1:hover p, #villageSkin2:hover p {
    opacity: 1
}

.chapter-btn-headline {
    text-align: center;
    font-family: 'Emilys Candy';
    font-size: 22px;
}

#fightArea1, #fightArea2,
#villageSkin1, #villageSkin2 {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    transition: 0.3s all ease-in-out;
}

/*cities*/
#villageSkin1 {
    background-image: url('/images/config/city/story-config-city-1.jpg');
}

#villageSkin1:hover {
    background-image: url('/images/config/city/story-config-city-1-hover.jpg');
}

#villageSkin2 {
    background-image: url('/images/config/city/story-config-city-2.jpg');
}

#villageSkin2:hover {
    background-image: url('/images/config/city/story-config-city-2-hover.jpg');
}

/*fight area*/
#fightArea1 {
    background-image: url('/images/config/enemy-area/story-config-enemy-2.jpg');
}

#fightArea1:hover {
    background-image: url('/images/config/enemy-area/story-config-enemy-2-hover.jpg');
}

#fightArea2 {
    background-image: url('/images/config/enemy-area/story-config-enemy-1.jpg');
}

#fightArea2:hover {
    background-image: url('/images/config/enemy-area/story-config-enemy-1-hover.jpg');
}

/*chapter 4 buttons*/
.house-img {
    border: 20px solid white;
    border-radius: 6px;
}

/* STYLE CLASS FOR ACTIVE SELECT BUTTON */
.activeSelectCharacter,
.activeSelectVillage,
.activeSelectHouse,
.activeSelectFightArea {
    transform: translateY(-5px);
    box-shadow: 0px 9px 13px #00000057;
}

.activeSelectFightArea p,
.activeSelectVillage p {
    opacity: 1 !important
}

.activeSelectEndPov {
    transform: translateY(-5px);
}

.activeSelectEndPov .story-img {
    filter: drop-shadow(0px 6px 11px #00000038);
}

.villageSkin1.activeSelectVillage {
    background-image: url('/images/config/city/story-config-city-1-hover.jpg') !important;
}

.villageSkin2.activeSelectVillage {
    background-image: url('/images/config/city/story-config-city-2-hover.jpg') !important;
}


#fightArea1.activeSelectFightArea {
    background-image: url('/images/config/enemy-area/story-config-enemy-2-hover.jpg') !important;
}

#fightArea2.activeSelectFightArea {
    background-image: url('/images/config/enemy-area/story-config-enemy-1-hover.jpg') !important;
}

/*style error*/
.validation-error {
    color: red;
}