body {
    background-image: url("weather.gif");
    background-repeat: repeat-x;
    /*background-size: 95% 200%;*/
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

#app {
    display: grid;
    /* grid-auto-rows: minmax(50px, auto);*/
    /*grid-template-columns: minmax(50px, auto);*/
    height: 50vh;
    /*background: #f23557;*/
    color: #070707;
    justify-content: center;
    grid-gap: 1em;
    font-size: 50px;
    font-family: 'Oswald', sans-serif;
}

.holder {
    margin: none;
}

.entry {
    background: rgb(193, 231, 231);
}

#entryHolder {}

#date {
    color: #034753;
    font-size: 27px;
    margin: 8px;
    font-family: 'Itim', cursive;
}

#temp {
    color: #034753;
    font-size: 27px;
    margin: 8px;
    font-family: 'Itim', cursive;
}

#content {
    color: #034753;
    font-size: 27px;
    margin: 8px;
    font-family: 'Itim', cursive;
}

.headline {
    color: #84b6be;
    font-family: 'Pangolin', cursive;
}

.title {
    margin: 10px;
    color: rgb(2, 25, 29);
    font-size: 30px;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
}


/*  Basic Styling To Override Default For Basic HTML Elements */

label {
    display: inline-flex;
    font-size: 30px;
    color: rgb(2, 25, 29);
    font-family: 'Playfair Display', serif;
    font-weight: bold;
}

input {
    display: inline-flexbox;
    height: 50px;
    width: 150px;
    background: #84b6be;
    padding: 50px rgb(129, 129, 129);
    color: #094a55;
    text-align: center;
    font-size: 20px;
    font-family: 'Itim', cursive;
    border-radius: 8px;
    /*border: none;*/
}


/*lean how to set button style from-> www.w3schools.com*/

button {
    color: rgba(60, 171, 199, 0.705);
    border: 2px solid #1b1b1b;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    font-size: 25px;
    border-radius: 8px;
    font-family: 'Itim', cursive;
}

button:hover {
    background-color: rgba(60, 171, 199, 0.705);
    color: #84b6be;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

h1 {
    font-size: 36px;
}

textarea {
    background: #84b6be;
    color: #094a55;
    font-size: 23px;
    font-family: 'Itim', cursive;
    text-align: center;
    border-radius: 8px;
    padding: 50px rgb(129, 129, 129);
}

.errorZ {
    margin: 0px auto 12px;
    color: rgb(166, 241, 231);
    font-size: 18px;
    text-align: center;
    background-color: rgb(25, 94, 85);
    width: 60%;
    border-radius: 9px;
}

.errorF {
    margin: 0px auto 0px;
    color: rgb(166, 241, 231);
    font-size: 18px;
    text-align: center;
    background-color: rgb(25, 94, 85);
    width: 50%;
    border-radius: 9px;
}


/* Reset style for HTML element on active to have no border*/

input:focus,
select:focus,
textarea:focus,
button:focus {
    /*outline: none;*/
}


/* Style for Placeholder Text*/

::placeholder {
    /* Firefox, Chrome, Opera */
    color: #f0d43a;
    font-family: 'Oswald', sans-serif;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #f0d43a;
    font-family: 'Oswald', sans-serif;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #f0d43a;
    font-family: 'Oswald', sans-serif;
}