:root {
--primary-color: #5085A5;
--secondary-color: #31708E;
--tertiary-color: #CEBC81;
--quaternary-color: #687864;
--quinary-color: #8FC1E3;
--seneary-color: #F7F9FB;
}

header {
    /*background-image: url("../images/yosemite.jpg");*/
    color: var(--seneary-color);
    font-family: 'Roboto Condensed', sans-serif;
    /*background-size: cover;
    background-image: linear-gradient(to right, rgba(80, 133, 165, 0.5), rgba(80, 133, 165, 0.8)), url("../images/yosemite.jpg");*/
}

header img {
    width: 500px;
    height: 100px;
    margin-top: 10px;
}


body {
    /*background-image: url("../images/yosemite.jpg") no-repeat center center fixed;*/ 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: linear-gradient(to right, rgba(80, 133, 165, 0.5), rgba(80, 133, 165, 0.8)), url("../images/yosemite.jpg");
    font-family: 'Roboto Condensed', sans-serif;;
}

.button {
    background-color: var(--quinary-color);
    border-radius: 10px;
    float: none;
}


#search-button {
    display: block;
    width: 500px;
}
#submenu {
    width: 350px;
    border-radius: 10px;
    width: 500px;
}


.today-box {
    padding: 15px;
}

#currentDay {
    font-size: 20px;
}

.forecast-box {
    background-color: var(--quaternary-color);
    opacity: .9;
    color: white;
    padding: 10px;
    border-radius: 15px;
}

.info-box {
    background-color: var(--tertiary-color);
    color: var(--seneary-color);
    padding: 15px;
    height: 165px;   
    border-radius: 25px; 
    margin: 20px;
    overflow-y: scroll;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 5px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--quaternary-color); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--tertiary-color); 
  }

.info-box ul{
    list-style-type:none;
}
.info-box hr{
    border-top: 2px solid black ;
}

.today-box {
    color: var(--seneary-color);
}

.callout {
    background-color: var(--tertiary-color);
    color: var(--seneary-color);
    margin: 20px;
}

.unrounded {
    background-color: var(--quinary-color);
    padding: 10px;
    color: white;
}

.rounded {
    border-radius: 25px;
}

@media screen and (max-width: 39.9375em) {
    #search-button {
        width: 100%;
    }
}