:root {
  --yellow: #FBC202;
  --white: #ffffff;
  --aqua: #02f3fb;
  --blue: #35abcf;
  --bg-modaltop: #8ecae6;
  --bg-top: #212D49; 
  --bg-red-btn: #EF4136;

  --cursive: 'Rochester', cursive;
  --serif: 'Solway', serif;
  --serif-body: 'Noto Serif', serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: #B0C4DE;
}

.modal-header {
  background-color: var(--bg-modaltop);
  border-bottom: none;
  font-weight: 500;
}

.modal-body {
  border-bottom: none;
  padding-top: 35px;
  padding-left: 35px;
}

.modal-content {
  font-family: var(--serif);
}

#modal-btn {
  background-color: var(--yellow);
}

h1 {
  text-align: left;
  font-family: 'Solway', serif;
  font-size: 96px;
}

/* =====================Navbar Styles================== */

.navbar {
  background-color: #333;
  position: sticky;
  display:flex;
  justify-content: left;
  z-index: 100;
  top: 0;
}

#logo-icon {
  padding-left: 15px; 
  cursor:pointer;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin: 0;
  text-decoration: none;
}

#logo-text {
  font-size: 27px;
  font-family: var(--cursive);
  color: var(--white);
  padding-right: 20px;
}

.history-link {
  padding-left: 12px;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding-left: 10px; 
  display: flex;
}

.right li {
  font-family: var(--serif);
  color: var(--white);
  padding-top: 5px;
}

.navbar ul li {
  display: inline-block;
  text-decoration: none;
}

.navbar ul li a {
  color: var(--aqua);
  text-align: center;
  text-decoration: none;
}

.navbar ul li a:hover {
  color: var(--yellow);
}

.navbar ul li a visited {
  text-decoration: none;
  color: var(--white);
}

@media (max-width: 600px) {
  nav ul li {
    display: inline;
    font-size: 16px;
    border-bottom: 1px solid var(--bg-color-light);
    padding-top: 14px;
  }
}

/* ====================Hero Styles================== */

h1 {
  text-align: left;
  font-family: 'Solway', serif;
  font-size: 89px;
  color: var(--yellow);
}

.heroBackground {
  background-image: url("../img/book-splash.png");
  background-position: cover;
  background-repeat: no-repeat;
  background-color: #212D49;
  color: var(--yellow);
}

.subtitle {
  font-family: var(--serif-body);
  color: var(--white);
  font-weight: 100;
  line-height: 1.6;
}

inputText {
  font-family: var(--cursive);
}

label {
  font-family: var(--serif);
  color: var(--yellow);
}

#save-btn {
  background-color: #EF4136;
}

#save-btn:hover {
  background-color: var(--yellow);
  color: navy;
}

button {
  font-family: var(--serif);
}
#confirm-msg {
  font-family: var(--serif);
}

poemText {
  font-family: var(--serif);
}

.input-box {
  width: 300px;
  height: 50px;
}

input {
  padding: 5px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

label {
  margin-bottom: 10px;
}

.save-btn {
  padding-bottom: 10px;
}

/* ======================Definition Container Styless================== */

.bottom-half {
  background-color: var(--white);
}

.card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-body {
  font-family: var(--serif);
}

#definition {
  line-height: 1.6;
} 

.definition-container {
  padding-top: 20px
}

#inputText {
  width: 50%;
  padding: 8px;
  margin: 8px 0;
  box-sizing: border-box;
}

button {
  font-family: var(--serif);
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--white);
}

#generate-definition {
  background-color: #4CAF50;
}

#generate-definition:hover {
  background-color: #45a049;
}

#generate-poem {
  background-color: #2196F3;
  color: white;
}

#generate-poem:hover {
  background-color: #0b7dda;
}

#save-btn {
  background-color: #EF4136;
  margin-bottom: 10px;
  margin-top: 20px;
}

#save-btn:hover {
  background-color: var(--yellow);
  color: navy;
}

.hist-btn {
  background-color: var(--blue);
  margin: 5px;
  color: var(--white);
  font-family: var(--serif);
}

.hist-btn:hover {
  background-color: var(--aqua);
  color: navy;
}

/* ====================Result Container Styles==================== */

.result-container {
  margin-bottom: 20px;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
}

.poetry-container {
  margin-bottom: 20px;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
}

#DefinationResult,
#poetryResult {
  padding: 10px;
  border: 1px solid #ddd;
}

/* ====================Poetry Container Styles==================== */

.card {
  margin-bottom: 25px;
}

.poetry-container button {
  background-color: #2196F3;
  color: white;
}

.poetry-container button:hover {
  background-color: #0b7dda;
}

#poem-info {
  font-family: var(--cursive); font-size: x-large;
}


/* ====================Word History Styles==================== */

.word-container {
  margin-bottom: 20px;
  max-width: 120px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
}

.history-container {
  background-color: #4CAF50;
  color: white;
  padding: 5px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}