@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100, 300&display=swap');

*,
*:before
{
  box-sizing: border-box;
}
:root {
  --trans: .4s ease;
}
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  min-height: 100vh;
  background-image: 
    url(https://512pixels.net/wp-content/uploads/2020/06/10-15-Day-thumb.jpg);
  background-size: cover;
  background-position: fixed;
}
.link:before {
  content:'';
  background-image: 
    url(https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/019044e84d2ea8bbde6c4e0a1bf8e6c0_QLl3a6tomz.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 70%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.link {
  font-size: 0.9rem;
  display: grid;
  color: #fff;
  text-decoration: none;
  text-align: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  transition: .2s ease;
}
.link:hover {
  filter: drop-shadow(3px 3px 2px #0057);
}
.container {
  --w: 3rem;
  background: #fff2;
  box-shadow: 
    0 4px 30px #0001,
    0 0 1em 1em #0005;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #ffffff15;
  border-radius: 1rem;
  
  height: var(--w);
  overflow-x: visible;
  position: absolute;
  /* width: calc(15 * var(--w)); */
  width: calc(7 * var(--w));
  
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: var(--trans);
}

.icon {
  position: relative;
  min-width: var(--w);
  height: 100%;
  transform-origin: bottom;
  transition: var(--trans);
  
}
.container:hover {
  /* width: calc(18 * var(--w)); */
  width: calc(6 * var(--w));
}
.icon:hover {
  scale: 2.7;
  /* margin-inline: 1.5rem; */
  margin-inline: 3.5rem;
}
.icon:hover .text {
  opacity: 1;
}
.icon:hover + .icon,
.icon:has(+ .icon:hover) {
  scale: 2.2;
  margin-inline: 0.8rem;
}

.icon:hover + .icon + .icon,
.icon:has(+ .icon + .icon:hover) {
  scale: 1.8;
  margin-inline: 0.5rem;
}

.icon:hover + .icon + .icon + .icon,
.icon:has(+ .icon + .icon + .icon:hover) {
  scale: 1.3;
  margin-inline: 0.2rem;
}
.img {
  transition: .4ms linear;
}
.img:active {
  transform:  translatey(.1rem);
}

.text {
  --bg: #aaad;
  position: relative;
  font-size: 0.4rem;
  color: #000;
  background-color: var(--bg);
  padding: 0.1rem 0.4rem;
  text-align: center;
  top: -1rem;
  left: 50%;
  translate: -50% 0;
  border-radius: .4em;
  opacity: 0;
  min-width: 3rem;
  
}

.text:after {
  --size: 3px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: var(--size) solid transparent;
	border-top-color: var(--bg);
	border-bottom: 0;
	margin-left: calc(-1 * var(--size));
	margin-bottom: calc(-1 * var(--size));
}
.img {
  position: absolute;
  top: 10%;
  left: 50%;
  translate: -50% 0;
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 0.5em;
  background-position: center;
  background-size: cover;
}
.icon:nth-of-type(1) .img {
  background-image: url("../images/Icons/home-button.png");
}

.icon:nth-of-type(2) .img {
  background-image: url("../images/Icons/back-button.png");
}

.icon:nth-of-type(3) .img {
  background-image: url("");
}

.icon:nth-of-type(4) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/9b23bcaafd4c81fa40685736c9d2cac1_2DLff7nlvI.png");
}

.icon:nth-of-type(5) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/e9751fba27b497cf50e9285ae6aa43b6_XVYkORoX9d.png");
}

.icon:nth-of-type(6) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/c474e38c20b3a554977f24c74a4c1613_c59GvntZQa.png");
}

.icon:nth-of-type(7) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/f96b1cc92517d1953f61134dc73835b5_RWCZAgggeR.png");
}

.icon:nth-of-type(8) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/6cb8699c12ba39ab74f721ddc08de31d_c5CylNDkIT.png");
}

.icon:nth-of-type(9) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/6d9a4db355e86d72d63ba3e4a45c897b_j4nPQzNR6c.png");
}

.icon:nth-of-type(10) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/0c8c56d12c5f92a903db4542c4b6b724_low_res_MacWhisper.png");
}

.icon:nth-of-type(11) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/5bf7e2819f1c3a04246600ae89c03861_F6Z6QRJiMB.png");
}

.icon:nth-of-type(12) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/c9830893a4d9ba9ab12ffb7591e0079a_jzmnfn1AVy.png");
}

.icon:nth-of-type(13) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/b4c04574d8d347c344f0dff49277c24c_25y2FI4DUz.png");
}

.icon:nth-of-type(14) .img {
  background-image: url("https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/34ad74421e91d6fbe860f92edb8b4b18_x7YTAeqoyG.png");
}

.icon:nth-of-type(15) .img {
  background-image: url('https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/28498413ab4a2cc710cc6750b7ac24d0_n13LwuIChY.png');
}

.fixed-bottom-div {
    position: fixed; /* This is the key! */
    bottom: 10;       /* Align to the bottom edge of the viewport */
    left: 0;         /* Align to the left edge of the viewport */
    z-index: 1000;       /* Ensure it stays on top of other content */
}