@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

* {
	font-family: "Rubik", system-ui;
}

:target {
  anchor-name: --target;
  outline: 2px solid red;
}
:target::before {
  content: "Highlight:";
  position: absolute;
  position-anchor: --target;
  left: anchor(left);
  bottom: anchor(top);
  background-color: red;
  color: white;
  font-style: normal;
  font-weight: normal;
  font-size: medium;
  padding-inline: 2px;
	border-radius: 3px;
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track {
	background: linear-gradient(180deg, silver 0%, darkgray 100%);
	cursor: grab;
}
::-webkit-scrollbar-thumb {
	background-color: black;
	border-radius: 3px;
	cursor: grab;
}
::-webkit-scrollbar-track:active,
::-webkit-scrollbar-thumb:active {
	cursor: grabbing;
}

::selection {
	background-color: red;
	color: white;
}

.tooltip:hover {
  anchor-name: --tooltip;
  outline: 1px solid lime;
}
.tooltip:hover::before {
  content: attr(title);
  position: absolute;
  position-anchor: --tooltip;
  left: anchor(left);
  bottom: anchor(top);
  background-color: lime;
  color: black;
  font-style: normal;
  font-weight: normal;
  font-size: medium;
  padding-inline: 2px;
	border-radius: 3px;
}

body {
	background-color: darkgray;
	margin: 0;
}
header {
	background-color: silver;
	position: sticky;
	top: 0;
}
main {
	background-color: gainsboro;
	min-height: 100dvh;
	padding: 0 5px 0 5px;
}
footer {
	background-color: darkgray;
	position: sticky;
	bottom: 0;
}
header, footer {
	padding: 5px;
}

hr {
  border: none;
  border-bottom: 1px dotted black;
}

h1, h2, h3, h4, h5, h6 {
	font-style: italic;
}

a {
	background-color: blue;
	color: white;
	text-decoration: 1px dashed underline;
	padding-inline: 2px;
	border-radius: 3px;
}
a:hover {
	background-color: red;
	font-style: italic;
	text-decoration: 1px solid underline;
}
a:active {
	background-color: lime;
}
a[disabled] {
  background-color: purple;
  text-decoration: 1px solid line-through;
  pointer-events: none;
}