html {
    min-height: 100%; /* for some reason the html doesn't take up the whole screen by default */
}
body {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    line-height: 150%;
    background: rgb(0,28,204);
    background: linear-gradient(0deg, rgba(0,28,204,1) 0%, rgba(31,91,221,1) 14%, rgba(94,219,255,0.5886555305716037) 100%);  
    color: black;
    margin: 0;
    padding: 0;
}
h1 {    
    font-family: 'Bellota', 'Noto Serif JP', sans-serif;
    font-size: 2rem;
    margin: 0;
    text-align: center;
}

.wrapper {
    border-radius: .2rem;
    border: unset !important;
    background-color: rgba(255, 255, 255, 0.404);
    /* background-color: transparent; */
    margin-bottom: 2rem;
    padding: 1rem;
    box-shadow: 0px 0px 10px whitesmoke;
}
.row {
    margin: 1rem 0 1rem 0;
}

/* Footer */
footer {
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    background-color: #343a40;
    color: white;
    text-align: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    margin-top: 10rem;
    padding: 15px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
}

/* all navbar stuff */
header {
    margin-bottom: 0;
}
nav img {
    width: 5em;
}
.navbar {
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    /* this moves the nav links to the right for some reason */
    justify-content: space-between;
    padding-top: unset;
    padding-bottom: unset;
}
.navbar-collapse {
    flex-grow: unset;
}

.navbar-brand {
    padding-top: 15px;
    padding-bottom: 15px;
}
.language-button {
    margin-left: 1em;
    font-size: 1em;
}
/* end navbar */

/* Specific to this page */
.jumbotron {
    text-align: center;
    letter-spacing: 5px;
    color: black;
    /* text-shadow: 0px 0px 15px black; */
    padding: 1rem;
    margin-bottom: 0;
    background-color: #f5f5f570;
    box-shadow: 0px 0px 10px whitesmoke;
}
.display-none {
    display: none;
}
.visibility-hidden {
    visibility: hidden;
}

#userSearches input, #userSearches button {
    height: 3rem;
}
.search-btn {
    min-width: 3rem;
    margin-left: -3rem;
}
.list-group-item {
    font-size: 1rem;
    padding: .5rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    color: white;
}
.search-box {
    font-size: 1rem; 
    background: #3e4f5630;  
    border-radius: 4px; 
    margin: 1rem 0 0 0;
    max-height: 17.6rem;
    overflow: hidden;
}

.card {
    padding: 1rem;
}
.card-body {
    padding: 0;
}
.forecast-card {
    background: lightblue;
    margin: auto;
    border: hidden;
    box-shadow: 0px 0px 10px 4px #f5f5f55e;
}
.forecast-card p {
    margin-bottom: .5rem;
}
.forecast-card .card-title {
    margin-bottom: 0;
    text-decoration: underline;
}
.today-details {
    margin-left: .5rem;
}
#cityName {
    margin: -1rem -1rem 1rem -1rem;
    background: rgb(255, 246, 118);
    color: black;
    text-shadow: 0px 0px 10px rgb(124, 106, 0);
    font-family: 'Bellota', serif;
    text-align: center;
    letter-spacing: .5rem;
    padding: 1rem;
    border-radius: .2rem;
}

@media screen and (min-width: 992px) {
    .col-lg-2 {
        flex: 0 0 19%;
        max-width: 19%;
    }
}