a {
    text-decoration: none;
}

body {
    background-color: khaki;
    padding-bottom: 15%;
}

div.body {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

div.container {
    margin: 1rem;
}

div.title {
    text-align: center;
}
  

div.citiesCard {
    flex-basis: 30%;
    padding: 1%;
    margin: 0%;
    text-align: center;
}

div.divCitiesAll {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

div#enter {
    position: absolute;
    top: 57%;
    left: 0%;
    right: 0%;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

div#enter span a h1 {
    color: white;
    font-size: 375%;
}

div#enter, nav {
    text-align: center;
}

div.title {
    display: flex;
    justify-content: center;
}

.fadeOut {
    animation-name: fadeOut;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

form {
    padding-left: 15%;
    width: 30%;
    height: 50px;
}

form > input {
    display: block;
    margin-bottom: 1%;
}

form > input#name:focus, form>input#img:focus {
    background-color: lightgray;
}

@-webkit-keyframes fadeIn {
0% {
    opacity: 0;
}
20% {
    opacity: 0.3;
}

40% {
    opacity: 0.7;
}

50% {
    opacity: 1;
}

60% {
    opacity: 0.7;
}
80% {
    opacity: 0.3;
}
100% {
    opacity: 0;
}
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 0.7;
    }
    40% {
        opacity: 0.3
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 0.3
    }
    80% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes glow {
    from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}  

input#submitButton {
    width: 53%;
    height: 25%;
    padding: 1%;
}

nav>h1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 500%;
    margin-top: 35px;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}

#navCitiesBottom {
    display: flex;
    flex-wrap: wrap;
}

#navCitiesHome {
    background-color: black;
    flex-basis: 43%;
}

#navCitiesHome a {
    color: salmon;
}

.navCitiesOthers {
    background-color: black;
    flex-basis: 25%;
    color: whitesmoke;
}

#navCitiesTitlePage {
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: auto;
    border-bottom: 3px solid black;
}

#navCitiesTop {
    background-color: black;
    width: 100%;
    max-width: 100%;
    color: red;
}

#navCitiesTop h1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 300%;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}