:root {
  --buttonBorder: 1px;
  --buttonMargin: 2px;
  --buttonBorderStyle: solid;
}
[data-theme="light"] {
  --textColor: black;
  --pageColor: white;
  --buttonColor: lightgrey;
  --buttonHoverColor: darkgrey;
  --buttonSelected: grey;
  --buttonDisabled: rgb(232, 185, 185);
  --buttonSwitchSource: url("night-button.png");
}
[data-theme="dark"] {
  --textColor: white;
  --pageColor: black;
  --buttonColor: rgb(95, 95, 95);
  --buttonHoverColor: rgb(85, 85, 85);
  --buttonSelected: rgb(30, 30, 30);
  --buttonDisabled: rgb(60, 30, 30);
  --buttonSwitchSource: url("light-button.png");
}
html,
body {
  width: 100%;
  background: var(--pageColor);
  margin: 0;
  min-height: 100vh;
  height: 100%;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
button {
  outline: 0px;
  box-shadow: none;
  color: var(--textColor);
  background-color: var(--buttonColor);
  border: var(--buttonBorder);
  border-color: transparent;
  border-style: var(--buttonBorderStyle);
  margin: var(--buttonMargin);
}

button:not(
    :disabled,
    [data-selected="true"],
    .switch-theme-button,
    .switch-lang-button
  ):hover {
  background-color: var(--buttonHoverColor);
  outline: var(--buttonBorder) var(--buttonBorderStyle) var(--textColor);
}
button[data-selected="true"] {
  background-color: var(--buttonSelected);
  outline: var(--buttonBorder) var(--buttonBorderStyle) var(--textColor);
}
button:disabled {
  background-color: var(--buttonDisabled);
}
.log {
  color: var(--textColor);
}
.name-field {
  background-color: var(--buttonColor);
  color: var(--textColor);
  border: 0;
}
.name-field:disabled {
  background-color: var(--buttonDisabled);
}
.name-field:focus {
  outline: none;
  border-color: inherit;
  box-shadow: none;
}
.switch-theme-button {
  width: 50px;
  height: 50px;
  background-color: transparent;
  background-image: var(--buttonSwitchSource);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  color: transparent;
}
.switch-theme-button:hover,
.switch-lang-button:hover {
  outline: var(--buttonBorder) var(--buttonBorderStyle) var(--textColor);
}
.switch-lang-button {
  width: 65px;
  height: 65px;
  font-size: xx-large;
  margin-left: auto;
  background-color: transparent;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}
@media (hover: none) and (pointer: coarse) {
  .switch-lang-button:hover,
  .switch-theme-button:hover {
    outline: none;
  }
}
.top-container {
  gap: 0;
  display: flex;
}