the-glorious-startpage/css/dock.css

.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 !important;
}

/*Translate dock to left side if width <= 580 and height >= 540*/
@media screen and (max-width: 580px) and (min-height: 540px) {

	.dockContainer {
		display: inline-block !important;
		opacity: 1;

    	position: relative !important;
		margin:0  auto !important;

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

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

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

/*If there's no  enough height, move dock to bottom then scale up to 320px*/

/*Decrease scale to 0.85 if width is less than 580px*/
@media screen and (max-width: 579px) and (max-height: 539px) {

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

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

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

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

}

/*Decrease scale to 0.65 if width is less than 490px*/
@media screen and (max-width: 490px) and (max-height: 539px) {

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

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

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

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

}

/*Decrease scale to 0.55 if width is less than or equal to 374px and greater than or equal to 320px*/
@media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) {

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

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

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

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

}

/*Scale to 0 if less than 320px*/
@media screen and (max-width: 319px) and (max-height: 539px) {

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

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

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

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

}