@font-face {
	font-family: NotoSans;
	src: url(/fonts/NotoSansJP-Regular.otf);
}

body {
	background-color: black;
	box-shadow: inset 0 0 40vw #000000ff;

	font-family: NotoSans;
	font-size: 2.3vh;

	/*background-image: url("https://source.unsplash.com/collection/1053828");*/
	/*background-image: url("https://source.unsplash.com/featured/?road,street,anime"); this somehow broke after idk what changed */
	background-image: url("https://source.unsplash.com/featured/?japan");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;

	color: white;
}

.character {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15vw;

	
	opacity: 0.1;
	transition: opacity 0.5s;
}

.character:hover {
	opacity: 1;
	transition: opacity 0.5s;

	pointer-events: auto;
}

.information {
	position: absolute;
	left: calc(calc(2vh + 2vw)/2);
	bottom: calc(calc(2vh + 2vw)/2);
	font-size: 2vh;
}

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;

	height: 100vh;
	width: 100vw;
}

#clock {
	flex-basis: auto;

	font-size: 7.5vw;
	text-shadow: 0 0 50px #00000099;
}

#search {
	background-color: white;
	color: black;

	border-radius: 1.5vh;
	padding: 1.5vh;
	margin: 0.75vh;
}

#search input {
	border-style: none;
	padding: 0;

	width: 25vw;
}

#search button {
	border-style: none;
	background-color: white;
}

#bookmark-categories {
	flex-basis: auto;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

#bookmark-category {
	flex: 1 1 0px;

	background-color: white;
	color: black;

	border-radius: 1.5vh;
	padding: 1.5vh;
	margin: 0.75vh;
}

#bookmark-category-title {
	font-size: 3vh;
}

#bookmark-category ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 1vh;

	overflow: hidden;
    white-space: nowrap;
}

#bookmark-category ul li a {
	color: black;
	width: 100%;
}

#bookmark-category ul li a * {
	color: black;
	width: 100%;
}

.information a {
	color: white;
}

a {
	text-decoration: none;
	opacity: 1;
}

a:hover {
	opacity: 0.7;
}



@media (prefers-color-scheme: dark) {
	#search {
		background-color: #222222d0;
		backdrop-filter: blur(30px);
		color: white;
	}

	#search input {
		background-color: transparent;
		color: white;
	}
	
	#search button {
		background-color: transparent;
		color: white;
	}

	#bookmark-category {
		background-color: #222222d0;
		backdrop-filter: blur(30px);
		color: white;
	}

	#bookmark-category ul li a {
		color: white;
	}
	
	#bookmark-category ul li a * {
		color: white;
	}
}