@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/



/* GENERAL STYLES */

html {
  font-size: 14px;
  font-family: 'Arial', 'Helvetica', sans-serif;
  overflow-x:hidden;
  scroll-behavior: smooth;

}

body {
  position:relative;
  font-size: 14px;
  font-family: 'Arial', 'Helvetica', sans-serif;
  width:100%;
  height:auto;
  min-height: 100lvh;
  overflow-y:auto;
  overflow-x:hidden;
  color: rgb(255, 255, 255);
  background: #833AB4;
  background: radial-gradient(circle, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  background: radial-gradient(circle, #82c54b 0%, #02e2e2 50%, #034fba 100%);
  transition: 250ms all ease-in-out 0ms;
}

h1:hover, h2:hover, p:hover, a:hover{
	/*outline: 1px solid red;
	box-shadow: 0px 0px 5em 1em rgba(0,0,255,0.25);
	background: radial-gradient(circle, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
	*/
}



h1, h2, h3, h4, h5, h6, p, s, a{
	font-size:2em;
	font-weight: normal;
	margin:0;padding:0;
	mix-blend-mode: difference;
	text-transform: lowercase;
}

header{
	position:fixed;
	mix-blend-mode: difference;
	pointer-events: auto;
	margin:1rem;
	z-index: 2;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a, a:hover, a:active {
  color: rgb(0, 8, 255);
  mix-blend-mode: unset;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip: auto;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.0875em;
  text-underline-offset: 0.1em;
  
}

a{
	padding:0.125em;
	color: rgb(0, 8, 255);
	background-color: rgb(255, 0, 217);
}

a:hover{
	color: rgb(255, 0, 217);
	background-color: rgb(0, 255, 51);
}

a:active{
	color: rgb(0, 255, 51);
	background-color: rgb(238, 255, 0);
}
/*
a:visited{
	color: rgb(238, 255, 0);
	background-color: rgb(0, 8, 255);
}
*/

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  position: relative;
  display: block;
}

nav{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding:1rem;
	box-sizing: border-box;
}

nav a{
	text-transform: lowercase;
}

ul:first-of-type{
	margin-top:6rem;
}

ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin:0;padding:0;
	list-style-type: none;
	margin:-0.25em;
	margin-top:1em;
	margin-bottom:1em;
}

li{
	display: block;
	margin:0.25em;
}

li:not(.li-title, :last-of-type):after{
	font-size:2em;
	font-weight: normal;
	color:rgb(0, 8, 255);
	content:", ";
	display:inline-block;
}

li.li-title{
	width: 100%;
}

/* WEBSITE MEDIA QUERIES */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here, remember about the 'cascade' */



}