/* ~~~~~~~~~~~~~~~~~~~~~ STYLING USED FOR THE INDEX.HTML PAGE ~~~~~~~~~~~~~~~~~~~~~~~ */

html {
  margin: -8px;
  background: rgb(99, 89, 133);
  background: radial-gradient(
    circle,
    rgba(99, 89, 133, 1) 0%,
    rgba(68, 60, 104, 1) 35%,
    rgba(24, 18, 43, 1) 100%
  );
}

h1 {
  margin: 0px;
  font-family: "Orbitron", sans-serif;
  padding-top: 10px;
}

header {
  padding: 1%;
  text-align: center;
  background-image: url("../images/banner.jpg");
  background-size: 100%;
  color: #c6ae84;
}

nav {
  display: flex;
  background-color: #6554b1;
  justify-content: center;
}

#nav-mobile a {
  font-size: 1.25rem;
  margin-left: 10rem;
}

body {
  color: rgb(238, 239, 245);
}
h2,
h4 {
  color: #c6ae84;
}

label {
  font-size: 20px;
}

.search-form {
  padding-left: 50px;
}

button {
  background-color: #6554b1;
  border: none;
  color: white;
  padding: 6px 14px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

button:hover {
  opacity: 1;
}

#city-input {
  border: 2px solid rgb(138, 144, 161);
  width: 210px;
  height: 25px;
  background-color: rgb(67, 73, 90);
}

#city-input:hover {
  background-color: rgb(138, 144, 161);
}

#apod {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#apod img {
  max-height: 80%;
  max-width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  display: flex;
  width: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.left-side {
  border: 0.2rem solid rgba(24, 18, 43, 1);
  margin: 1rem;
  padding: 1rem;
  width: 28rem;
}

.right-side {
  display: flex;
  flex-direction: column;
  border: 0.2rem solid rgba(24, 18, 43, 1);
  margin: 1rem;
  padding: 1rem;
  width: 100rem;
  text-align: center;
}

@media (max-width: 996px) {
  header,
  nav {
    height: auto;
    flex-direction: column;
  }
  .container {
    flex-direction: column;
  }
  .right-side {
    max-width: 392px;
  }
}