body {
  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

  text-align: center;

  transition: background-color 0.3s ease, color 0.3s ease;
}

#buttondiv {
  display: flex;
  justify-content: flex-end;
}

.container {
  max-width: 600px;

  margin: 50px auto;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;
}

h1 {
  margin-bottom: 20px;
}

ul {
  list-style-type: none;

  padding: 0;
}

ul li {
  display: inline-block;

  margin: 10px;
}

a {
  text-decoration: none;

  display: inline-block;

  padding: 15px 20px;

  border-radius: 1em;

  font-weight: bold;

  transition: background-color 0.3s ease, color 0.3s ease;
}

.toggle-button {
  margin: 20px;

  padding: 20px;

  border: none;

  border-radius: 5px;

  font-size: 16px;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;
}

.toggle-button:hover {
  opacity: 0.8;
}

.toggle-button-light {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgZmlsbD0iIzQ2NDY0NiIgcj0iNSIvPjxwYXRoIGQ9Ik0yMSwxM0gyMGExLDEsMCwwLDEsMC0yaDFhMSwxLDAsMCwxLDAsMloiIGZpbGw9IiM0NjQ2NDYiLz48cGF0aCBkPSJNNCwxM0gzYTEsMSwwLDAsMSwwLTJINGExLDEsMCwwLDEsMCwyWiIgZmlsbD0iIzQ2NDY0NiIvPjxwYXRoIGQ9Ik0xNy42Niw3LjM0QTEsMSwwLDAsMSwxNyw3LjA1YTEsMSwwLDAsMSwwLTEuNDFsLjcxLS43MWExLDEsMCwxLDEsMS40MSwxLjQxbC0uNzEuNzFBMSwxLDAsMCwxLDE3LjY2LDcuMzRaIiBmaWxsPSIjNDY0NjQ2Ii8+PHBhdGggZD0iTTUuNjQsMTkuMzZhMSwxLDAsMCwxLS43MS0uMjksMSwxLDAsMCwxLDAtMS40MUw1LjY0LDE3YTEsMSwwLDAsMSwxLjQxLDEuNDFsLS43MS43MUExLDEsMCwwLDEsNS42NCwxOS4zNloiIGZpbGw9IiM0NjQ2NDYiLz48cGF0aCBkPSJNMTIsNWExLDEsMCwwLDEtMS0xVjNhMSwxLDAsMCwxLDIsMFY0QTEsMSwwLDAsMSwxMiw1WiIgZmlsbD0iIzQ2NDY0NiIvPjxwYXRoIGQ9Ik0xMiwyMmExLDEsMCwwLDEtMS0xVjIwYTEsMSwwLDAsMSwyLDB2MUExLDEsMCwwLDEsMTIsMjJaIiBmaWxsPSIjNDY0NjQ2Ii8+PHBhdGggZD0iTTYuMzQsNy4zNGExLDEsMCwwLDEtLjctLjI5bC0uNzEtLjcxQTEsMSwwLDAsMSw2LjM0LDQuOTNsLjcxLjcxYTEsMSwwLDAsMSwwLDEuNDFBMSwxLDAsMCwxLDYuMzQsNy4zNFoiIGZpbGw9IiM0NjQ2NDYiLz48cGF0aCBkPSJNMTguMzYsMTkuMzZhMSwxLDAsMCwxLS43LS4yOUwxNywxOC4zNkExLDEsMCwwLDEsMTguMzYsMTdsLjcxLjcxYTEsMSwwLDAsMSwwLDEuNDFBMSwxLDAsMCwxLDE4LjM2LDE5LjM2WiIgZmlsbD0iIzQ2NDY0NiIvPjwvc3ZnPg==);

  background-color: transparent;

  background-repeat: no-repeat;
}

.toggle-button-dark {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTIwLjIxLDE1LjMyQTguNTYsOC41NiwwLDEsMSwxMS4yOSwzLjVhLjUuNSwwLDAsMSwuNTEuMjguNDkuNDksMCwwLDEtLjA5LjU3QTYuNDYsNi40NiwwLDAsMCw5LjgsOWE2LjU3LDYuNTcsMCwwLDAsOS43MSw1LjcyLjUyLjUyLDAsMCwxLC41OC4wN0EuNTIuNTIsMCwwLDEsMjAuMjEsMTUuMzJaIiBmaWxsPSIjNDY0NjQ2Ii8+PC9zdmc+);

  background-color: transparent;

  background-repeat: no-repeat;

}

/* Dark mode styles */

body.dark-mode {
  background-color: #202123;

  color: #e0e0e0;
}

.container.dark-mode {
  background-color: #2b2d31;
}

a.dark-mode {
  background-color: #0d5692;
  color: #ffffff;
}

a.dark-mode:hover {
  opacity: 0.8;
  color: #ffffff;
}

/* Light mode styles */

body.light-mode {
  background-color: #f9f9f9;

  color: #202123;
}

.container.light-mode {
  background-color: #ffffff;
}

a.light-mode {
  background-color: #0d5692;
  color: #ffffff;
}

a.light-mode:hover {
  opacity: 0.8;
  color: #ffffff;
}