/* VARIABLES */
:root {
  --background-color: #ffffff;
  --foreground-color: #000000;
  --accent-color: #EFEFEF;
  --unfocused: #b5b5b5;
}

/* RESET */
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  background-color: var(--foreground-color);
  width: 18px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--background-color); 
  border: 3px solid var(--foreground-color);
  border-right: none;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: 
    radial-gradient(
      var(--foreground-color) 29%, 
      transparent 16%
    ), 
    radial-gradient(
      var(--foreground-color) 29%, 
      transparent 16%
    )
  ; 
  background-size: 5px 5px; 
  background-position: 0px 0px, 2.5px 2.5px;
}

*{
  margin: 0;
  padding: 0;
  font: inherit;
}

@font-face {
  font-family: ChiKareGo;
  src: url(./assets/fonts/ChiKareGo.ttf);
}

html {
  color-scheme: light dark;
  font-family: ChiKareGo;
  font-size: 10px;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--background-color);
  background-image: url("./assets/images/v08-bg-rose.png");
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
  color: var(--foreground-color);
  overflow: hidden;
}

img, 
picture, 
svg, 
video {
  display: block;
  width: 100%;
}

ul,
ol {
  font-size: 1.8em;
}

a {
  text-decoration: none;
}

p {
  font-size: 1.8rem;
  text-wrap: auto;
}