body {
    background-color: rgb(221, 219, 219);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h2 {
    color: rgb(192, 136, 175);
    text-align: center;
    font-family:Georgia, 'Times New Roman', Times, serif;
    outline-style: dashed;
    outline-offset: 5px;
    
}

code {
  padding: 2px;
  font-size: 105%
}

ul {
  margin-bottom: 3px;
}

.collapsible {
  background-color: #ccc;
  font-family:Georgia, 'Times New Roman', Times, serif;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: rgb(192, 136, 175);
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f6f8fa;
}

.codeblock {
  margin-top: 5px;
  margin-left: 40px;
  padding: 3px;
  background-color:#f1f1f1;
  width: fit-content;
  white-space: nowrap;
}

img {
  max-width: 30%;
  height: auto;
}

/*DARK MODE!!!!*/
body.dark-mode h2 {
  color: rgb(155, 89, 140);
}

body.dark-mode {
  background-color: rgb(63, 63, 63);
  font-family:Georgia, 'Times New Roman', Times, serif;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.dark-mode .collapsible {
  background-color: #555;
  color: #fff
}

body.dark-mode .collapsible.active {
  background-color: #555;
  color: #fff;

}

body.dark-mode .collapsible:hover {
  background-color: rgb(73, 52, 67);

}

body.dark-mode .content {
  background-color: #333;
  color: #eee;
 transition: background-color 0.4s ease, color 0.4s ease;
}

body.dark-mode .codeblock {
  background-color: #4b4a4a;
  color: #fce4f6;

}

#theme-toggle .moon-icon {
  display: none;
}

body.dark-mode #theme-toggle .sun-icon {
  display: none;
}
body.dark-mode #theme-toggle .moon-icon {
  display: inline-block;
}

#theme-toggle {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: rgb(211, 208, 208);
  transition: all 0.2 ease;
}

body.dark-mode #theme-toggle {
  background-color: #4b4a4a;
  color: white;
  border-color: #666;
}