* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 16px;
}
nav ul {
  background-color: #2b073d;
  list-style: none;
  padding: 20px;
  display: flex;
  gap: 40px;
  font-size: large;
}

nav a {
  text-decoration: none;
  color: #e8efff;
}
nav a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
}

/*for pages with the star background*/
.stars {
  color: #e8efff;
  margin: 0 auto;
}

.stars div {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.stars div h2 {
  color: #df9eff;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.songs {
  margin-left: 120px;
}
.songs iframe {
  gap: 10px;
}
#conspiracies {
  margin: 0 auto;
  padding: 50px;
  width: 1000px;
  background-color: #df9eff;
  color: #2b073d;
  border-radius: 5px;
}
#conspiracies li {
  list-style: none;
}

#conspiracies li p {
  font-weight: bold;
  font-size: 20px;
  align-items: center;
}

#new-conspiracy {
  justify-content: center;
}

#conspiracy-text {
  margin-left: 320px;
  margin-bottom: 20px;
  height: 65px;
  width: 650px;
  padding: 10px;
  background-color: #2b073d;
  color: #a348d1;
  border-color: #e8efff;
  border-width: 2px;
  border-style: double;
}
.conspiracy {
  display: flex;
  justify-content: center;
  color: #e8efff;
}

.conspiracybutton input {
  height: 50px;
  width: 150px;
  font-family: "Georgia";
  font-style: normal;
  font-size: 20px;
  margin-left: 700px;
  margin-bottom: 30px;
  background-color: #df9eff;
  color: #2b073d;
  border: none;
  border-radius: 5px;
}

.conspiracies p {
  margin-left: 50px;
  margin-bottom: 0px;
}

.conspiracydelete {
  height: 25px;
  width: 50px;
  font-family: "Georgia";
  font-style: normal;
  font-size: 10px;
  margin-top: -800px;
  margin-left: 700px;
  background-color: #2b073d;
  color: #df9eff;
  border: none;
  border-radius: 5px;
}

.conspiracyheart {
  height: 50px;
  width: 50px;
  font-family: "Georgia";
  font-style: normal;
  font-size: 50px;
  margin-top: -200px;
  padding-top: -200px;
  margin-left: -50px;
  background-color: #df9eff;
  color: #2b073d;
  border: none;
}

.moonwrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  background-color: #0a0b10;
  color: whitesmoke;
}
.moon {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.moon h1 {
  padding: 50px;
}
.moon img {
  height: 400px;
  gap: 200px;
}

/* Font CSS */
h1 {
  font-family: "Special Gothic";
  font-style: normal;
  font-size: 40px;
}

h2 {
  font-family: "Special Gothic";
  font-style: normal;
  font-size: 20px;
}

p {
  font-family: Georgia;
  font-size: 17px;
}

nav ul a,
button {
  font-family: Georgia;
}

/* Moon Info CSS */

.moon-info {
  margin: auto;
  width: 50%;
  padding: 10px;
  padding-bottom: 50px;
  color: whitesmoke;
}

.moon-info h1 {
  padding-top: 50px;
}

.moon-info h2 {
  color: #a348d1;
}

.moon-info p {
  padding-left: 50px;
}

.moon-info ul {
  padding-left: 50px;
  font-size: 20px;
}

.info {
  display: flex;
  align-items: baseline;
}

.info p {
  font-size: 20px;
}

.funfact {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

/* Moonment CSS */

.moonmentWrapper {
  margin-top: 100px;
}

h4 {
  font-family: "Special Gothic";
  font-style: normal;
  font-size: 20px;
}

.moonment {
  background-color: #df9eff;
  color: #2b073d;
  border: none;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 50px;
  width: 500px;
}

.moonment p {
  color: #a348d1;
}

.moonment .delete {
  color: #e8efff;
  font-family: "Special Gothic";
  background-color: #a348d1;
  border: none;
  border-radius: 10px;
  padding: 5px;
  height: 30px;
}

.moonment .heart {
  color: #e8efff;
  font-family: "Special Gothic";
  background-color: #a348d1;
  border: none;
  border-radius: 10px;
  padding: 5px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.new-moonment {
  background-color: #a348d1;
  color: #e8efff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 50px;
  width: 500px;
}

.new-moonment label {
  font-family: "Special Gothic";
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
}

#moonment-text {
  display: block;
  background-color: #e8efff;
  border: solid #df9eff;
  border-radius: 10px;
  width: 400px;
  height: 50px;
  margin-bottom: 10px;
  margin-top: 10px;
}

#submit {
  color: #3f1057;
  font-family: "Special Gothic";
  background-color: #df9eff;
  border: none;
  border-radius: 10px;
  padding: 5px;
}

/* MAM CSS */

.MAMwrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  color: whitesmoke;
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

#newMAMForm {
  margin: 0 auto;
  margin-top: 30px;
  padding: 10px;
  width: 1000px;
  background-color: #a348d1;
  color: #e8efff;
  border-radius: 10px;
}

#newMAMForm label {
  font-family: "Special Gothic";
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
}

#newMAMForm input {
  background-color: #e8efff;
  color: #3f1057;
  border: none;
  border-radius: 10px;
  width: 500px;
  height: 30px;
  margin: 10px;
  align-items: center;
}

#newMAMForm button {
  color: #3f1057;
  font-family: "Special Gothic";
  background-color: #df9eff;
  border: none;
  border-radius: 10px;
  padding: 5px;
  margin: 10px;
}

#MAM div {
  background-color: #df9eff;
  color: #2b073d;
  border: none;
  width: 1000px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
}

#MAM div {
  padding: 10px;
}

#MAM .delete {
  color: #e8efff;
  font-family: "Special Gothic";
  background-color: #a348d1;
  border: none;
  border-radius: 10px;
  padding: 5px;
  height: 30px;
}

.MAMmoons {
  margin-top: 50px;
}

.poster {
  display: flex;
  margin-top: 50px;
}

.poster img {
  width: 300px;
  margin-left: 150px;
}

.poster h4 {
  color: #df9eff;
  margin-left: 150px;
}

.posters {
  display: flex;
  margin-top: 100px;
  margin-bottom: 100px;
}

.posters img {
  width: 300px;
  margin-left: 150px;
}

.posters h4 {
  color: #df9eff;
  margin-left: 150px;
}

.movie {
  color: #e8efff;
  display: flex;
  align-items: center;
}

/* ------------ START CSS FOR DROPDOWN ------------ */
/* Dropdown Button */
.dropbtn {
  background-color: #2b073d;
  color: white;
  font-size: large;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
  background-color: #2b073d;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2b073d;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #e8efff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #3f1057;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}
/* ------------ END CSS FOR DROPDOWN ------------ */

/* ------------ START CSS FOR MOON NAV ------------ */
.MoonHolder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e8efff;
  text-decoration: none;
}

.MoonButton {
  border-width: 0px;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- MOONS --- */
#EuropaHolder {
  position: absolute;
  inset-inline-start: 63%;
  inset-block-start: 22%;
}
#EuropaButton {
  background-image: url(../images/Europa.png);
}

#PhobosHolder {
  position: absolute;
  inset-inline-start: 70%;
  inset-block-start: 60%;
}
#PhobosButton {
  background-image: url(../images/Phobos.jpg);
  width: 150px;
  height: 150px;
}

#CallistoHolder {
  position: absolute;
  inset-inline-start: 27%;
  inset-block-start: 62%;
}
#CallistoButton {
  background-image: url(../images/Callisto.jpg);
  width: 210px;
  height: 210px;
}

#GanymedeHolder {
  position: absolute;
  inset-inline-start: 13%;
  inset-block-start: 50%;
}
#GanymedeButton {
  background-image: url(../images/Ganymede.jpg);
}

#IapetusHolder {
  position: absolute;
  inset-inline-start: 80%;
  inset-block-start: 35%;
}
#IapetusButton {
  background-image: url(../images/Iapetus.jpeg);
  width: 210px;
  height: 210px;
}

#MirandaHolder {
  position: absolute;
  inset-inline-start: 52%;
  inset-block-start: 22%;
}
#MirandaButton {
  background-image: url(../images/Miranda.png);
  width: 175px;
  height: 175px;
}

#OberonHolder {
  position: absolute;
  inset-inline-start: 12%;
  inset-block-start: 15%;
}
#OberonButton {
  background-image: url(../images/Oberon.jpg);
  width: 175px;
  height: 175px;
}

#PhoebeHolder {
  position: absolute;
  inset-inline-start: 29%;
  inset-block-start: 26%;
}
#PhoebeButton {
  background-image: url(../images/Phoebe.jpg);
  width: 150px;
  height: 150px;
}

#TritonHolder {
  position: absolute;
  inset-inline-start: 55%;
  inset-block-start: 65%;
}
#TritonButton {
  background-image: url(../images/Triton.jpg);
  width: 170px;
  height: 170px;
}

#LunaHolder {
  position: absolute;
  inset-inline-start: 42%;
  inset-block-start: 40%;
}
#LunaButton {
  background-image: url(../images/Moon.jpg);
  width: 250px;
  height: 250px;
}

.MoonName {
  padding-top: 5px;
  font-size: 24px;
}
/* ------------ END CSS FOR MOON NAV ------------ */