/* Page Settings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
}

body main {
  display: flex;
}

/* Header */

header p {
  color: white;
  padding: 14px;
  margin-left: 50vw;
  font-size: 34px;
}

.linear-gradient {
  background: linear-gradient(to right, #475ab8, #281764);
}

/* Left Section */
.sectionLeft {
  display: flex;
  flex-direction: column;
  width: 20vw;
  padding: 10px;
}

.sectionLeft h1 {
  color: #191918;
}

#searchButton {
  background-color: #6991e3;
  color: #e1e2e2;
  cursor: pointer;
}

#buttonContainer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  
}

.sectionLeft>* {
  margin: 5px;
}

.sectionLeft button {
  padding: 5px;
  margin:5px;
  border: none;
  font-size: small;
  text-align: center;
}

.cityButton {
  background-color: #aeaeae;
  color: #1f2023;
 text-align: center;
 border-radius: 5px;
 margin: 5px;
 width: 100%;
 cursor: pointer;
}


#userInput {
  padding: 10px;
}

/* Right Section */

.sectionRight {
  width: 80vw;
  padding: 10px;
}

/* Top Right Section */

.topRight {
  height: 150px;
  border: 1px solid;
  color: #191918;
  display: flex;
  flex-direction: column;
}

.topRight h1 {
  font-size: 1.5em;
}

.dataResult {
  padding: 7px;
}

#todaysDateResult {
  margin-left: 7px;
}

.smallData {
  font-size: smaller;
}

/* Bottom Right Section */

.bottomLeft h3 {
  margin-top: 8px;
}

.fiveDay {

  display: block;
  width: 150px;
  background-color: #323d4f;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.fiveDay h4,
.fiveDay p {
  color: white;
}

.fiveDay h4,
.fiveDay div {
  margin-top: 5px;
}

.fiveDay p {
  font-size: smaller;
  margin-top: 11px;
  margin-bottom: 11px;
}

#fiveDay_section {
  display: flex;
  margin-top: 5px;

}