.dockContainer {
	background: transparent;
	position: absolute;
	z-index: 5;
	margin: 0 auto;
	bottom: 0;

	/* On bottom, center horizontally */
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);

	/* Add transition */
	transition: opacity var(--transition-speed);
}

#dock {
	background: var(--panel-bg);
	border-radius: var(--rounded-radius);
	
	display: flex;
	position: relative;
	height: auto;
	width: auto;
	
	padding: 5px;
	margin: 10px;

	transition: transform var(--transition-speed);
	z-index: 1;
}

/* Translate dock to left side if width <= 470 and height >= 540 */
@media screen and (max-width: 470px) and (min-height: 490px) {
	.dockContainer {
		display: inline-block;
		opacity: 1;

		position: relative;
		margin: 0 auto;

		top: 50%;
		left: 0;
		bottom: 0;
		right: 0;

		-webkit-transform: translateY(-50%);
		transition: opacity var(--transition-speed);
	}

	#dock {
		display: inline-block;
		width: auto;
		height: auto;
		margin: 5px;
		transform: scale(0.9);
		transition: transform var(--transition-speed);
	}
}

/* Decrease scale to 0.85 if width is less than 470px */
@media screen and (max-width: 469px) and (max-height: 489px) {
	.dockContainer {
		position: absolute;
		background: transparent;
		z-index: 5;
		margin: 0 auto;
		bottom: 0;

		/* On bottom, center horizontally */
		left: 50%;
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

		/* Add transition */
		transition: opacity var(--transition-speed);
	}

	#dock {
		display: flex;
		width: auto;
		height: auto;
		margin: 5px;
		transform: scale(0.85);
		transition: transform var(--transition-speed);
	}
}

/* Decrease scale to 0.75 if width is less than 380px */
@media screen and (max-width: 380px) and (max-height: 489px) {
	.dockContainer {
		position: absolute;
		background: transparent;
		z-index: 5;
		margin: 0 auto;
		bottom: 0;

		/* On bottom, center horizontally */
		left: 50%;
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

		/* Add transition */
		transition: opacity var(--transition-speed);
	}

	#dock {
		display: flex;
		width: auto;
		height: auto;
		margin: 5px;
		transform: scale(0.75);
		transition: transform var(--transition-speed);
	}
}

/* Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px */
@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) {
	.dockContainer {
		position: absolute;
		background: transparent;
		z-index: 5;
		margin: 0 auto;
		bottom: 0;

		/* On bottom, center horizontally */
		left: 50%;
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

		/* Add transition */
		transition: opacity var(--transition-speed);
	}

	#dock {
		display: flex;
		width: auto;
		height: auto;
		margin: 5px;
		transform: scale(0.7);
		transition: transform var(--transition-speed);
	}
}

/* Scale to 0 if less than 320px */
@media screen and (max-width: 319px) and (max-height: 489px) {
	.dockContainer {
		position: absolute;
		background: transparent;
		z-index: 5;
		margin: 0 auto;
		bottom: 0;

		/* On bottom, center horizontally */
		left: 50%;
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

		/* Add transition */
		transition: opacity var(--transition-speed);
	}

	#dock {
		display: flex;
		width: auto;
		height: auto;
		opacity: 0;
		margin: 5px;
		transform: scale(0);
		transition:
					transform var(--transition-speed),
					opacity var(--transition-speed);
	}
}
