:root {
    --fontcolor: black;
    --primary: blue;
    --secondary: rgb(31, 31, 192);
}

h2 {
    margin: 0;
}

input {
    padding: 5px 86.5px;
    text-align: center;
}

button {
    padding: 5px 150px;
    background-color: rgb(237, 237, 243);
    
}
button:hover{
    background-color: rgb(202, 202, 207);
}

header {
    color: white;
    size: 100px;
    text-align: center;
    font-family: cursive;
    text-shadow: rgb(212, 209, 209) 1px 0 10px;
    background: linear-gradient(110deg, blue 50%, rgb(31, 31, 192) 50%);
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;

}

.lighting {
    animation: flicker 1.5s infinite alternate;
    color: beige;
}

body {
    margin: 0;
    background-color: rgb(5, 44, 70);;
}

/* Styling for side sections */
aside {
    margin-right: 20px;
    color: white;
    padding: 20px;
    clear: both;
    float: left;
    width: 20%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: var(--primary);
}

#topSide {
    border-bottom: 3px solid whitesmoke;
}
#clear{

}

/* styling for main sections */
.CityDet {
    display: inline-block;
    width: 75%;
    border: inset var(--primary) 5px;
    font-family: cursive;

}

.TextCont {
    text-align: center;
    color: white;
}

#CityName {
    margin: 0;
    padding-bottom: 10px;
    font-size: 35px;
    background: linear-gradient(110deg, blue 50%, rgb(31, 31, 192) 50%);

}

.WeatherCards {
    float: right;
    display:inline-table;
    margin-right: 27px;
    width: 75%;
    background-color: rgb(5, 44, 70);
    border: inset var(--primary) 5px;
    font-family: cursive;

}
#fiveDayFor{
    color: white;
    text-shadow: rgb(212, 209, 209) 1px 0 10px;
    text-align: center;
    padding: 20px;
    border: 8px solid;
    border-image: linear-gradient(to left, #F4C430, blue) 1 0;
}

.BorderCards{
    color: whitesmoke;
    margin-top: 0px;
    text-align: center;
    font-family: cursive;
    justify-content: space-between;
    border: 8px solid;
    border-image: linear-gradient(to bottom, blue, #F4C430) 0 1;
    margin-left: 10px;
    width:18%;
    float: left;
    flex-wrap: wrap;
    flex-direction: row;

}


#image{
    border: solid black 5px;
}

.ClearHistory{
    margin-left: 10px;
    float:left;
}














@keyframes flicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {}

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}