/* init */

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

h1, h2, h3, h4, h5, h6 {
	font-family: m6x11;
	margin: 0px;
	margin-bottom: 5px;
}

p {
	margin: 0px;
}

hr {
	border: 1px solid #ad3362;
}

a:link {
	background-color: transparent;
	text-decoration: none;
}

a:visited {
	background-color: transparent;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: red;
	background-color: transparent;
	text-decoration: underline;
}

.prevent-select {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

/* create a variable that holds the progress percentage
you can't animate custom properties by default; you have
to define what kind of value it is with @property */
@property --progress {
	initial-value: 0;
	inherits: false;
	syntax: '<number>';
}

@keyframes progress {
	from {
		--progress: 0;
	}
	to {
		--progress: 1;
	}
}

/* background */

body {
	--PI: 3.1415;
	--UNIT: 1px; /* we need to use the same unit for all calculations. Keep variables unit-less as long as possible, and only apply units when assigning to css properties */
	--r: 8; /* radius in --UNITs of circle we'll use as reference */
	
	--current-angle: calc(var(--progress) * 2 * var(--PI)); /* calculate angle at current 'time' */
	--x: calc(-1 * var(--r) * cos(var(--current-angle))); /* current x-position in --UNITs; multiply by -1 because in math positive values are upward, in css downwards */
	--y: calc(-1 * var(--r) * sin(var(--current-angle))); /* current y-position in --UNITs; multiply by -1 because in math positive values are upward, in css downwards */
	
	/* for calculations, we need to use x and y without units;
	for the translate, we need them with units */
	--x-with-unit: calc(var(--x) * var(--UNIT));
	--y-with-unit: calc(var(--y) * var(--UNIT));
	
	animation: progress 3.5s linear infinite; /*increase time to make slower*/
	background-position: var(--x-with-unit) var(--y-with-unit);
	
	background-image: url("/assets/images/style/sTile.png");
	image-rendering: pixelated;
	background-size: 96px;
	background-repeat: repeat;
	background-attachment: fixed;
	color: white;
	font-family: sans-serif;
}

/* main */

@keyframes shake {
  0% { transform: translate(1px, 1px); }
  10% { transform: translate(-1px, -2px); }
  20% { transform: translate(-3px, 0px); }
  30% { transform: translate(3px, 2px); }
  40% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(-3px, 1px); }
  70% { transform: translate(3px, 1px); }
  80% { transform: translate(-1px, -1px); }
  90% { transform: translate(1px, 2px); }
  100% { transform: translate(1px, -2px); }
}

.logo {
	display: block;
	width: 192px;
	margin: 8px auto;
}

.logo:hover {
	animation: shake 0.25s;
}

.main-content {
	width: auto;
	max-width: fit-content;
	padding: 5px 10px;
	background-color: #b2669a;
	border:4px solid #76428a;
	margin: 8px auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.box {
	padding: 10px;
	background-color: #d1496c;
	border:2px solid #ad3362;
	margin: 5px;
}

/* navbar */

.navbar{
	display: flex;
	background-color: #b2669a;
	border: 4px solid #76428a;
	justify-content: center;
	width: auto;
	max-width: fit-content;
	margin: 0px auto;
	flex-wrap: wrap;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.navbarItem, .navbarDropdown {
	display: flex;
}

.navbarItem a, .navbarDropdown a {
	text-decoration: none;
	padding: 14px 16px;
	color: white; 
}

.navbarItem a:hover, .navbarDropdown a:hover {
	background-color: #d1496c;
}

.navbarItem a:active, .navbarDropdown a:active {
	color: red;
}

.navbarDropdown-Content {
	display: none;
	flex-direction: column;
	position: absolute;
	inset-block-start: 138px;
	background-color: #f9f9f9;
	width: auto;
	max-width: fit-content;
	margin: 0px auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.navbarDropdown-Content a {
	float: none;
	text-decoration: none;
	padding: 14px 16px;
	display: block;
	text-align: left;
	color: black;
}

.navbarDropdown-Content a:hover {
	background-color: #ddd;
}

.navbarDropdown:hover .navbarDropdown-Content {
  display: flex;
}