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 <= 470 and height >= 540*/
@media screen and (max-width: 470px) 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.90) !important;
		transition: transform var(--transition-speed) !important;
	}
}

/*Decrease scale to 0.85 if width is less than 580px*/
@media screen and (max-width: 469px) 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.75 if width is less than 380px*/
@media screen and (max-width: 380px) 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.75) !important;
		transition: transform var(--transition-speed) !important;
	}

}

/*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: 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.70) !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;
	}

}