@import url('./colors.css');
@import url('./fonts.css');

* {
	font-family: 'Satoshi-Regular';
	font-weight: 500;
	transition: all 0.1s ease;
	margin: 0;
	padding: 0;
}

html,
body {
	position: relative;
	margin: 0;
	width: 100dvw;
	height: 100dvh;
	overflow: hidden;

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

body {
	position: relative;
	background-color: var(--background);
}

main {
	height: 100dvh;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	transition: all 0.5s ease;
	scroll-padding: 60px 0 0 0;

	&::-webkit-scrollbar {
		width: 2px;
	}

	&::-webkit-scrollbar-track {
		margin: 60px 0 0 0;
		background-color: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--secondary);
	}
}

img.topographic_left_down,
img.topographic_right_up {
	position: absolute;
	z-index: -1;
}

img.topographic_right_up {
	width: 692.559px;
	height: 557.157px;
	right: -172.559px;
	top: -85px;
}

img.topographic_left_down {
	width: 563.992px;
	height: 432.59px;
	left: -175.077px;
	bottom: 0;
}

*.expand-image {
	cursor: pointer;
}

div.expanded {
	position: absolute;
	background: var(--background-50);
	z-index: 5;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	display: none;
	place-items: center;
	
	&[data-open='true'] {
		display: grid;
	}
	
	img {
		object-fit: contain;
		width: 75dvw;
		height: 75dvh;
	}
}