/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body /* light mode */
{
  background-color: #ffaaff;
  color: black;
  font-family: Verdana;
}

.dark-mode /* dark mode */
{
  background-color: #220022;
  color: white;
}

.links
{
  text-align: center;
  margin-top: 16px;
  border: 1px solid white;
  border-width: 3px;
  
  width: 350px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  border-radius: 32px;
  font-size: 32px;
}

a
{
  text-decoration: none;
  
  color: white;
  background-color: red;
  transition: color 1000ms;
  transition: background-color 1000ms;
}

a:hover
{
  color: black;
  background-color: magenta;
  transition: color 250ms;
  transition: background-color 250ms;
}

.center
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pointerhover:hover {
  cursor: pointer;
}

.image-container
{
  text-align: center;
  margin-top: -42px; /* super scuffed way to fix spacing between the 2 images. remove if problems emerge */
}

.weirdmarginfix /* this fixes the little margin under the lobotomy image that's caused by text being empty */
{
  vertical-align: middle;
}

/* copy pasted directly from chatgpt */
.dark-mode-button-container {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 999; /* Ensure it stays above other elements */
}

.dark-mode-button {
  background-color: #444444; /* Dark button color */
  border: none;
  border-radius: 50%;
  padding: 8px 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.dark-mode-button:hover {
  background-color: #555555;
}

.dark-mode-button:active {
  transform: scale(0.9); /* Slight shrink effect on click */
}
/* end of copy pasted section */