/* ================================ */
/* MAIN PAGE STYLES                 */
/* ================================ */

html {
  font-size: 16px;
}

body {
   line-height: 2.25rem;
   min-width: 300px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

a {
   color: #ffde5b;
   text-decoration: none;
   cursor: pointer;
}

a:hover {
   color: #cae155;
}

button {
   background-color: #47c6ccc8;
   margin-left: 20px;
   padding: 6px 14px;
   border-radius: 10px;
   box-shadow: 3px 3px 6px #484848;
}

button:hover {
   background-color: #55eff7c8;
   box-shadow: none;
}

#alertName {
   color: #9e0000;
   font-weight: 700;
   display: flex;
   justify-content: flex-start;
}

#alertTime {
   display: flex;
   justify-content: flex-start;
}

#alertDescr {
   width: 100%;
   text-align: left;
}

#cityState {
   font-size: 1.1rem;
   font-weight: 700;
}

#location {
   background-color: #ebf8ff;
   padding-left: 10px;
   height: 35px;
   border-radius: 10px;
}

#main {
   margin-bottom: 0;
   padding-bottom: 0;
   height: min-content;
   background: url('../images/background.png') no-repeat center/cover;

}

/* ================================ */
/* FLEX LAYOUT                      */
/* ================================ */
.alerts {
   width: 90%;
   margin-left: 25px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
}

.currentMain {
   width: 65%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
}

.currentMainDisplay {
   width: 100%;
   display: flex;
   justify-content: space-evenly;
}

.currentSubDisplay {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.dinkle {
   width: 35%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.dinkle img {
   width: 50%;
   border-radius: 40px;
}

.div4-container .miniCard:first-child {
    margin-left: auto;
}

.div4-container .miniCard:last-child {
    margin-right: auto;
}

.gratuity {
   background-color: #3a3a3a98;
   color: #c2cde2;
   margin: 10px auto;
   padding: 0 15px;
   font-size: .7rem;
   border-radius: 20px;
}

.gratuityMain {
   width:70%;
   margin: 30px auto 20px;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.mainCard {
   margin: 20px auto 40px;
   padding: 15px;
   max-width: 800px;
   min-width: 300px;
   background-color: #e8e8e86c;
   border-radius: 18px;
   box-shadow: 5px 5px 15px #000;
}

.mainCurr {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.miniCard {
   background-color: #e6e6e670;
   margin: 5px 8px;
   padding: 5px;
   font-size: .9rem;
   border: 1px solid #252525;
   border-radius: 15px;
   box-shadow: 3px 3px 8px #252525;
}

.row1 {
   display: flex;
   flex-wrap: wrap;
}

.search {
   width: 100%;
}

.sevenDay {
   margin: 20px auto 10px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   overflow-x: auto;
}

.todaysDate {
   font-weight: 500;
   width: 100%;
   display: flex;
   justify-content: center;
}

.todayOutlook {
   width: 100%;
   padding-left: 3rem;
   font-weight: 600;
   display: flex;
   justify-content: flex-start;
}

/* ================================ */
/* MEDIA QUERIES                    */
/* ================================ */
@media (max-width: 850px) {
   html {
      font-size: .9rem;
      line-height: 1.5rem;
   }
   .mainCard {
      margin: 10px 20px;
      padding: 10px;
   }
   h5 {
      font-size: 1.5rem;
   }
   h6 {
      font-size: 1.2rem;
   }
}
@media (max-width: 600px) {
   html {
      font-size: .8rem;
      line-height: .8rem;
   }
   .dinkle {
      width: 100%;
   }
   .currentMain {
      width: 100%;
   }
   .sevenDay {
      margin: 0 15px;
   }
   .dinkle img {
      width: 25%;
   }
}