* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: montserrat,sans-serif
}

#app {
    background-image: url(cold-bg.7e8e312c.jpg);
    background-size: cover;
    background-position: bottom;
    transition: .4s
}

    #app.warm {
        background-image: url(warm-bg.46715dd0.jpg)
    }

main {
    min-height: 100vh;
    padding: 25px;
    background-image: linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.1))
}

.search-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px
}

    .search-box .search-bar {
        display: block;
        width: 50%;
        padding: 15px;
        color: #313131;
        font-size: 20px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        outline: none;
        background: none;
        box-shadow: 0 0 8px rgba(0,0,0,.25);
        background-color: hsla(0,0%,100%,.5);
        border-radius: 0 16px 0 16px;
        transition: .4s
    }

        .search-box .search-bar:focus {
            box-shadow: 0 0 16px rgba(0,0,0,.25);
            background-color: hsla(0,0%,100%,.75);
            border-radius: 16px 0p 16px 0
        }

.location-box .location {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    text-shadow: 1px 3px rgba(0,0,0,.25)
}

.location-box .date {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    text-align: center
}

.weather-box {
    text-align: center
}

    .weather-box .temp {
        display: inline-block;
        padding: 10px 25px;
        font-size: 102px;
        font-weight: 900;
        background-color: hsla(0,0%,100%,.25);
        border-radius: 16px;
        margin: 30px 0;
        box-shadow: 3px 6px rgba(0,0,0,.25)
    }

    .weather-box .temp, .weather-box .weather {
        color: #fff;
        text-shadow: 3px 6px rgba(0,0,0,.25)
    }

    .weather-box .weather {
        font-size: 48px;
        font-weight: 700;
        font-style: italic
    }