/* onionring.js is made up of four files - onionring-widget.js, onionring-index.js, onionring-variables.js and onionring.css (this one!)
// it's licensed under the cooperative non-violent license (CNPL) v4+ (https://thufie.lain.haus/NPL.html)
// it was originally made by joey + mord of allium (蒜) house, last updated 2020-10-24 */

/* === ONIONRING.CSS === */
/* this file affects the style of the widget. remember to replace all instances of #webringid with whatever value you have for ringID in the onionring-widget.js file. make sure it still has the # at the front, though! probably easiest to use find+replace to do it */

:root {
  /*-- main --*/
	--unit: 48px;
  --page-background:white;
	--grid-color: #ddd;
	--scan-color: #eee;
  --box-border: #000000;

  /*-- dark mode --*/
  --page-background-dark:rgb(19, 19, 19);
	--grid-color-dark: #161616;
	--scan-color-dark: #3b3b3b;
  --date-text-dark: rgb(147, 122, 255);
  --box-border-dark: #ddd;
  --link-hover-dark:rgb(122, 255, 133);
}

@font-face {
  font-family: 'NDS true bios';
  src: url('/fonts/NDStruebios.woff2') format('woff2'),
      url('/fonts/NDStruebios.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#dsring {
  margin: 0 auto;
  padding: 5px; /* creates some space around the widget */
  font-family: 'NDS true bios', sans-serif;
  font-size: 16px;
}

#dsring table {
  background-color: var(--page-background); /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  border: 1px solid var(--box-border);
	background-size: 
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) var(--unit),
		var(--unit) calc(var(--unit) / 24);
    background-image: 
      linear-gradient(to right, var(--grid-color) calc(var(--unit)/48), transparent 1px), 
      linear-gradient(to bottom, var(--grid-color) calc(var(--unit)/48), transparent 1px),
      radial-gradient(var(--grid-color) calc(var(--unit)/24), transparent 0),
      linear-gradient(to bottom, var(--scan-color) 50%, transparent 1px);
    background-position:
      calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2),
      calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2),
      calc(50% - var(--unit) * (1 - 1/48) - 1px) calc(var(--unit) * (1 + 1/48)),
      calc(50% - var(--unit)/2 - 1px) calc(var(--unit)/2);
    width: 120px;
}

#dsring table tr td {
  padding: 1px; /* creates some space between the links and text inside the widget */
}

#dsring .webring-prev {
  text-align:right;
}

#dsring .webring-info {
   text-align:center;
}

#dsring .webring-next {
  text-align:left;
}

#dsring .webring-links {
  /*font-size:large;*/
}

#dsring img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


@media (prefers-color-scheme: dark) {
  #dsring table {
    border: 1px solid var(--box-border-dark);
    background-color: var(--page-background-dark);
    background-image: 
      linear-gradient(to right, var(--grid-color-dark) calc(var(--unit)/48), transparent 1px), 
      linear-gradient(to bottom, var(--grid-color-dark) calc(var(--unit)/48), transparent 1px),
      radial-gradient(var(--grid-color-dark) calc(var(--unit)/24), transparent 0),
      linear-gradient(to bottom, var(--scan-color-dark) 50%, transparent 1px);
    }

  a {
    color: var(--date-text-dark);
  }
  
  a:hover{
    color: var(--link-hover-dark);
  }
}