:root {
  --border-radius: 3px;
}

:root,
[data-selected-theme="white"] {
  --color-background: #ffffff;
  --color-text: #000000;
  --color-accent: #ffffff;
  --color-link: #4d84c4;
}

[data-selected-theme="blue"] {
  --color-background: #0318f5;
  --color-text: #faed00;
  --color-accent: #0318f5;
  --color-link: #fff;
}

[data-selected-theme="yellow"] {
  --color-background: #faed00;
  --color-text: #000000;
  --color-accent: #faed00;

}

[data-selected-theme="black"] {
  --color-background: #000000;
  --color-text: #faed00;
  --color-accent: #000000;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  background: radial-gradient(var(--color-background), var(--color-accent));

  color: var(--color-text);

}

::selection {
  background-color: var(--color-accent);
}

.wrapper {
  display: block;
  background-color: rgba(255, 255, 255, 0.25);
}
/*
.wrapper:has(button[data-theme]:active) {
  transform: rotateZ(0.35deg);
} 

.wrapper:has(button[data-theme]:nth-of-type(2n):active) {
  transform: rotateZ(-0.35deg);
}
*/

a ,
nav li a{
    color: var(--color-link);
}

.theme-switcher {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 1rem 0;
  font-size: 1.312rem;
}

button[data-theme] {
  margin: 0;
  padding: 0;
  border: none;
  /*background:var(--color-background);*/
  
  padding: 0.75rem 1.25rem;
  font-size: inherit;
  font-size: clamp(1rem, 5vw, 1.312rem);
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

button[data-theme] + button[data-theme] {
  border-left: none;
}

button[data-theme]:first-of-type {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

button[data-theme]:last-of-type {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

button[data-theme][aria-pressed="true"] {
 /* background-color: var(--color-background);*/
  color: var(--color-background);
}

.button_white {
  background: #ffffff;
}

.button_blue {
  background: #0318f5;
}

.button_yellow {
  background: #faed00;
}

.button_black {
  background: #000000;
}


button[data-theme]:is(:hover, :focus) {
  box-shadow: 0 0 0 2px var(--color-text) inset;
}

button[data-theme][aria-pressed="true"]:is(:hover, :focus) {
  box-shadow: 0 0 0 2px var(--color-background) inset;
}

@media screen and (max-width: 520px)
header .container #accessibility {
    margin:  0;
    height: 25px;
}