/* PAGE */

.tiny {font-size: 0.8em;}
.smol {font-size: 1.0em;}
.medm {font-size: 1.2em;}
.bigg {font-size: 1.4em;}
.huge {font-size: 1.6em;}



/* HEADER */

#hd {
	min-height: 7.7vh;
	padding: 0.75vh 8px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: var(--box-dark);
	color: var(--header-text);
	user-select: none;
	z-index: 6;
	container-type: inline-size;
	font-family: "Adamina", serif;
}

.hd-left {
	display: flex;
	float: left;
	align-items: center;
	max-width: calc(100vw - 7.7vh);
} 
.hd-right { float: right; } 

#hd-burgerHolder {
	display: none;
}
#hd-menuHolder {
	display: flex;
	flex-direction: row;
	gap: 4px;
}

/* LOGO */

#lg-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 1em;
	color: var(--header-text);
	font-family: 'Adamina', serif;
	line-height: normal;
}

#lg-box {
	display: grid;
	grid-template-columns: 3em 2px 1em 2px auto;
	background-color: var(--wn-line-colour);
	min-height: 7vh;
}

#lg-type {
	font-size: 3em;
	padding-left: 0.1em;
}

.lg-line {
	background-color: transparent;
}

.lg-col{
	display: grid;
	grid-auto-flow: row;
	gap: 2px;
	min-width: 1em;
}
.lg-col> div {
	background-color: var(--wn-bg-colour);
	width: 100%;
}

.lg-colEnd {
	align-items: center;
}
.lg-colEnd > div {
	height: calc(100% - 4px);
}



/* BUTTONS */

button {
	min-height: 6.2vh;
	aspect-ratio: 1;
	font-size: 2.25em;
    border: none !important;
	border-radius: 15%;
	color: inherit;
	background-color: var(--duel-lbl);
	box-shadow: rgba(96, 96, 96, 0.5) 1px -1px 5px inset;
	background-image: radial-gradient(100% 100% at 100% 0, #dcdcdc66 0, #dcdcdc08 100%);
	transition: color 300ms ease-in;
}
button:hover {
	cursor: pointer;
}
button:active {
	background-image: radial-gradient(100% 100% at 100% 0, #dcdcdc86 0, #dcdcdc38 100%);
}
button:hover, .activeButton {
	color: var(--gold);
}

.tooltip {
	display: flex;
	position: absolute;
	min-height: 6.2vh;
	width: max-content;
	color: var(--text);
	background-color: var(--box-dark);
	align-items: center;
	font-family: "Afacad", sans-serif;
	font-size: 1.25rem;
	text-align: center;
    border-radius: 0.25rem;
	box-shadow: 0px 6px 4px 0px #0000003d;
}
button:hover ~ .tooltip {
	padding: var(--pad);
}

#hd-tooltip {
	top: 8.45vh;
	right: var(--pad);
}



/* Hide the menu, then bring it back (min-width query overwrites JS) */
@media screen and (max-width: 750px) {
	#burgerHolder {
		display: flex;
	}
	#menuHolder {
		display: none;
		position: absolute;
		top: 8.45vh;
		right: var(--pad);
		border-radius: 0.25rem;
		padding: var(--pad);
		background-color: var(--box-dark);
		max-width: 100cqi;
        /* overflow-x: auto; */
	}
	#headerTooltip {
		top: -7.7vh;
		right: 7.7vh;
	}
	#menuHolder button {
		width: calc(100vw / 6);
		min-height: 1px;
		max-height: 6.2vh;
		max-width: 6.2vh;
	}
}
@media screen and (min-width: 750px) {
	#menuHolder {
		display: flex !important;
	}
}