@font-face {
	font-family: sector;
	src: url(sector_034/sector_034.otf);
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-ExtraLight.ttf);
	font-weight: 200;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-Light.ttf);
	font-weight: 300;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-Regular.ttf);
	font-weight: 400;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-Medium.ttf);
	font-weight: 500;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-SemiBold.ttf);
	font-weight: 600;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-Bold.ttf);
	font-weight: 700;
}
@font-face {
	font-family: oxanium;
	src: url(oxanium/Oxanium-ExtraBold.ttf);
	font-weight: 800;
}



:root {
	--bg-color-body: #38abc8;
	--bg-color-nav: #70c2d8;
	--bg-color-nav-button: #a4d7ea;
	--bg-color-nag: #005b8c;
	--bg-color-inventory: #291a37;
	--bg-color-slot-icon: #81cfdb;
	--bg-color-slot: #60beca;
	--bg-color-slot-selected: #80cbd9;
	--bg-color-inventory-grid: black;
	--bg-color-scroll-bar-core: #c0e2ec;
	--bg-color-scroll-bar-inventory: #bbb6bd;
	
	--fg-color-logotype: #1f688b;
	--fg-color-nav-button: #30738f;
	--fg-color-event: #196179;
	--fg-color-tour: #097798;
	--fg-color-countdown-digits: white;
	--fg-color-countdown-units: black;
	--fg-color-nag: #3bddf6;
	--fg-color-inventory: #d2cdd4;
	
	--fg-color-wins: #80fc84;
	--fg-color-loses: #ffbbc5;
	--fg-color-core-id: #2befff;
	--fg-color-body: white;
	--fg-color-stats: #377189;
	--fg-color-in-progress: #b30212;
	--fg-color-slot-name: black;
	--fg-color-part-name: white;
	
	--color-slot-core: #196a7f;
	--color-slot-chassis: #2f485c;
	--color-slot-motion: #898079;
	--color-slot-weapon: #94322f;
	--color-slot-upper: #3b937f;
	--color-slot-utility: #2a6285;
	--color-slot-help: #be5420;
}



body {
	background-color: #d1d1d1;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

p {
	margin: 0px;
	
}

body {
	font-family: oxanium;
	/* TODO adjust fonts */
}




[is=hex-window] {
	--bevel-length: 23px;
	--bevel-angle: 45deg;
	padding: 2px;
	display: flex;
}

[is=hex-window].tooltip {
	--bevel-length: 25px;
	padding: 8px;
	background-color: #37444a;
	border: none;
}

[is=hex-window].modal {
	--bevel-length: 25px;
	padding: 8px;
	background-color: #252525;
	border: none;
}


[is=hex-window].robot-card {
	width: 205px;
	height: 199px;
	background-color: #6bc2d6;
	border: 3.5px solid white;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: space-between;
}

[is=hex-window].tooltip [is=hex-window].robot-card {
	background-color: #4d7982;
}

[is=hex-window].modal [is=hex-window].robot-card {
	background-color: #564c55;
}




.tooltip {
	display: flex;
	flex-flow: row nowrap;
	margin: 24px;
	width: 536px;
	height: 210px;
	gap: 4px;
}

.tooltip #content {
	flex: 1;
	display: inline-flex;
	flex-flow: column nowrap;
}

.tooltip h1 {
	color: #26f8f7;
}

.tooltip #type {
	color: white;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.tooltip #wrapper {
	flex: 1;
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
}

.tooltip #description {
	flex: 2;
	color: #8b9499;
	align-self: flex-start;
}

.tooltip #stats {
	flex: 1;
	color: #5c6668;
	padding: 16px;
}





.modal {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	color: #c1c1c1;
	margin: 24px;
	width: 815px;
	height: 354px;
	font-family: sector;
}

.modal h1 {
	color: #ff6f04;
}

.modal #name {
	color: #1bf8ef;
}

.modal p {
	font-family: oxanium;
}

.modal p#remaining {
	color: #fe217a;
	font-family: sector;
}

.modal #buttons {
	display: inline-flex;
	flex-flow: row nowrap;
	gap: 7px;
}

.modal .button {
	background-color: #574c50;
	color: #e7bd60;
	width: 202px;
	height: 41px;
	display: flex;
	align-items: center;
	justify-content: center;
}











circle-decoration {
	--radius: 13.5px;
	margin: 4px;
	border: 6px solid black;
}

.tooltip circle-decoration {
	--radius: 11.5px;
	border-color: white;
}

.modal .robot-card circle-decoration {
	border-color: white;
}

.modal .robot-card slot-display {
	--colors: #474048 white black;
}





::backdrop {
	backdrop-filter: brightness(50%);
}

:modal {
	background: none;
	border-width: 0px;
}

dialog {
	margin: auto;
	padding: 0px;
	border: none;
}

dialog:not([open]) {
	display: none;
}