:root {
	--spacing: 16px;
	--primary-color: #101011;
	--secondary-color: white;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "roboto";
	-ms-overflow-style: none;
	scrollbar-width: none;
}

*::-webkit-scrollbar {
	display: none;
}

::selection {
	background: #007bff;
}

::-moz-selection {
	background: #007bff;
}

body {
	width: 100vw;
	min-height: 100dvh;
	justify-content: space-around;
	padding: 0 var(--spacing) 0 var(--spacing);
}

button {
	width: fit-content;
	align-self: center;
	border: none;
	padding: 10px 16px;
}

a,
a:visited,
a:active {
	color: var(--secondary-color);
	width: 100px;
	padding: 10px;
	border-radius: 50%;
}

.image_container img {
	border-radius: 50%;
	width: 67%;
	max-width: 568px;
	object-fit: cover;
	object-position: 190% 20px;
	aspect-ratio: 1 / 1;
	padding: 10px;
}

.center_inline {
	flex-direction: column;
	text-align: center;
	align-items: center;
}


.flex {
	display: flex;
}

.space_around {
	justify-content: space-around;
}

.container {
	/* background: red; */
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content: space-around;
}

.swipe {
	inset: 0;
	overflow: hidden;
	visibility: hidden;
	position: relative;
}

.swipe-wrap {
	overflow: hidden;
	position: relative;
}

.swipe-wrap>div {
	float: left;
	width: 100%;
	height: 100dvh;
	position: relative;
}

@media (prefers-color-scheme: light) {
	/* body {
		background: linear-gradient(to bottom, var(--primary-color) 25%, var(--secondary-color) 58%);
		color: black;
	} */

	.image_container img {
		border: 8px solid var(--primary-color);
		filter: drop-shadow(0 0 4px var(--primary-color));
	}

	a,
	a:visited,
	a:active {
		border: 1px solid var(--primary-color);
		color: var(--primary-color);
	}

	button {
		background: var(--primary-color);
		color: var(--secondary-color);
	}
}

@media (prefers-color-scheme: dark) {
	body {
		/* background: linear-gradient(to bottom, var(--secondary-color) 10%, var(--primary-color) 33%); */
		background-color: black;
		color: white;
	}

	.image_container img {
		border: 8px solid var(--secondary-color);
		filter: drop-shadow(0 0 10px var(--secondary-color));
	}

	a,
	a:visited,
	a:active {
		border: 1px solid var(--secondary-color);
		color: var(--secondary-color);
	}

	button {
		background: var(--secondary-color);
		color: var(--primary-color);
	}
}

@media only screen and (min-width: 600px) {
	.swipe {
		max-width: 50%;
		margin-inline: auto;
	}
}