body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  flex: 1;
}

nav h2 {
  margin-bottom: 0.3rem;
}

header h1 {
  text-align: center;
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#theme-switcher {
  margin-bottom: 0;
}

article.password {
  margin: 2rem auto;
  max-width: 600px;
}

.password-box-header {
  padding: 8px 18px;
  text-align: center;
}

form.password {
  box-shadow: none !important;
}

strong.error {
  color: red;
}

footer {
  margin-top: auto;
}

/* Prevent from showing tooltip on touch devices */
@media (pointer: coarse) {
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    display: none !important;
  }
}

/* Replace dark mode icon by removing second star in the corner*/
[type="checkbox"][role="switch"][name="color-mode-toggle"]:checked::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6,0.278c.199186.242906.230846.582457.08.858-.578463,1.061348-.880409,2.251251-.878,3.46c0,4.021,3.278,7.277,7.318,7.277q.792-.001,1.533-.16c.308895-.06608.627459.058199.81.316.194325.269965.181578.63716-.031.893-1.588506,1.951055-3.97206,3.081847-6.488,3.078C3.734,16,0,12.286,0,7.71C0,4.266,2.114,1.312,5.124,0.06c.307937-.130871.665318-.041934.876.218'/%3E%3Cpath d='M10.794,3.148c.029411-.088819.112438-.148787.206-.148787s.176589.059968.206.148787l.387,1.162c.173.518.579.924,1.097,1.097l1.162.387c.088819.029411.148787.112438.148787.206s-.059968.176589-.148787.206l-1.162.387c-.518318.172022-.924978.578682-1.097,1.097l-.387,1.162c-.029411.088819-.112438.148787-.206.148787s-.176589-.059968-.206-.148787L10.407,7.69c-.172022-.518318-.578682-.924978-1.097-1.097L8.148,6.206c-.088819-.029411-.148787-.112438-.148787-.206s.059968-.176589.148787-.206L9.31,5.407c.518318-.172022.924978-.578682,1.097-1.097l.387-1.162Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6,0.278c.199186.242906.230846.582457.08.858-.578463,1.061348-.880409,2.251251-.878,3.46c0,4.021,3.278,7.277,7.318,7.277q.792-.001,1.533-.16c.308895-.06608.627459.058199.81.316.194325.269965.181578.63716-.031.893-1.588506,1.951055-3.97206,3.081847-6.488,3.078C3.734,16,0,12.286,0,7.71C0,4.266,2.114,1.312,5.124,0.06c.307937-.130871.665318-.041934.876.218'/%3E%3Cpath d='M10.794,3.148c.029411-.088819.112438-.148787.206-.148787s.176589.059968.206.148787l.387,1.162c.173.518.579.924,1.097,1.097l1.162.387c.088819.029411.148787.112438.148787.206s-.059968.176589-.148787.206l-1.162.387c-.518318.172022-.924978.578682-1.097,1.097l-.387,1.162c-.029411.088819-.112438.148787-.206.148787s-.176589-.059968-.206-.148787L10.407,7.69c-.172022-.518318-.578682-.924978-1.097-1.097L8.148,6.206c-.088819-.029411-.148787-.112438-.148787-.206s.059968-.176589.148787-.206L9.31,5.407c.518318-.172022.924978-.578682,1.097-1.097l.387-1.162Z'/%3E%3C/svg%3E") !important;
}