:root {
  color-scheme: light dark;
  --primary-bg-color-light:whitesmoke;
  --primary-bg-color-dark: rgb(88, 88, 88);
  --primary-color-light: rgb(88, 88, 88);
  --link-color-dark: rgb(58, 58, 58);
  --primary-color-dark: rgb(222, 222, 222);
  --icon-color-light: black;
  --icon-color-dark: white;
  --section1-box-light: rgb(160, 136, 168);
  --section2-box-light: rgb(211, 163, 75);
  --section3-box-light: rgb(145, 146, 75);
  --section1-box-dark: rgb(145, 123, 153);
  --section2-box-dark: rgb(211, 163, 75);
  --section3-box-dark: rgb(145, 146, 75);
  --radius: 5px;
  --button1-color: rgb(94, 49, 49);
  --button2-color: var(--section3-box-light);
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family:  "Open Sans", system-ui, Arial, Helvetica, sans-serif;
  background-color: light-dark(var(--primary-bg-color-light), var(--primary-bg-color-dark))
}

body, h1, h2, h3, h4, h5, h6, hr, p, pre, ul, blockquote, figure, fieldset {
  margin: 0;
}

a:any-link {
  transition: color 0.5s;
  color: var(--link-color-dark);
}

a:hover {
  color: black;
}

.section1 {
  background-color: light-dark(var(--section1-box-light), var(--section1-box-dark));
  border-radius: var(--radius);
}
.section2 {
  background-color: light-dark(var(--section2-box-light), var(--section2-box-dark));
  border-radius: var(--radius);
}
.section3 {
  background-color: light-dark(var(--section3-box-light), var(--section3-box-dark));
  border-radius: var(--radius);
}
.button1 {
  background-color: var(--button1-color);
  color: white;
}
.button2 {
  background-color: var(--button2-color);
  color: black;
}