body {

  background: #ecf0f4;
  overflow: hidden;
 

}

button {
  --i: var(--light, 0);
  --not-i: calc(1 - var(--i));
  --j: var(--press, 0);
  --not-j: calc(1 - var(--j));
  z-index: var(--i);
  border: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 15%;
  transform: scale(calc(1 - var(--j)*.02));
  box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
  background: #e8e8e8;
  font-size: 2.5em;
  transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
  cursor: pointer;
  align-items: center;
 
  text-decoration: none;
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  
  
}
button::after {
  filter: Contrast(0) Sepia(var(--i)) Hue-Rotate(calc(var(--hue) - 50deg)) Saturate(5) Opacity(calc(var(--i) + .21*var(--not-i))) Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
  transition: filter 0.3s;
  content: attr(data-ico);
  counter-reset: black;
}
button:focus {
  outline: none;
}

button:active {
  --press: 1 ;
  
}
.b{
  width: 4em;
  height: 4em;


}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100vh; /* adjust as needed */
  width: 100vw;
  grid-gap: 5vw;
  position: relative;
  background: #ecf0f4;
}

@media (max-width: 1400px) {
  button {
    --i: var(--light, 0);
    --not-i: calc(1 - var(--i));
    --j: var(--press, 0);
    --not-j: calc(1 - var(--j));
    z-index: var(--i);
    border: none;
    width: 2em;
    height: 2em;
    border-radius: 15%;
    transform: scale(calc(1 - var(--j)*.02));
    box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
    background: #e8e8e8;
    font-size: 2.5em;
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
    cursor: pointer;
    align-items: center;
    
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    
    
  }
  .b{
    width: 3em;
    height: 3em;
  
  
  }

}

@media (max-width: 1024px) {
  button {
    --i: var(--light, 0);
    --not-i: calc(1 - var(--i));
    --j: var(--press, 0);
    --not-j: calc(1 - var(--j));
    z-index: var(--i);
    border: none;
    width: 2em;
    height: 2em;
    border-radius: 15%;
    transform: scale(calc(1 - var(--j)*.02));
    box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
    background: #e8e8e8;
    font-size: 2.5em;
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
    cursor: pointer;
    align-items: center;
    
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    margin-inline: -10px;
    
    
  }
  .b{
    width: 3em;
    height: 3em;
  
  
  }

}
@media (max-width: 600px) {
  button {
    --i: var(--light, 0);
    --not-i: calc(1 - var(--i));
    --j: var(--press, 0);
    --not-j: calc(1 - var(--j));
    z-index: var(--i);
    border: none;
    width: 2em;
    height: 2em;
    border-radius: 15%;
    transform: scale(calc(1 - var(--j)*.02));
    box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
    background: #e8e8e8;
    font-size: 2.5em;
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
    cursor: pointer;
    align-items: center;
    
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    
    
  }
  .b{
    width: 3em;
    height: 3em;
  
  
  }
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh; /* adjust as needed */
    grid-gap: 5vw;
    position: relative;
    background: #ecf0f4;
  }

}
/* Brands 
.fa-brands, .fa-regular{
  color: rgb(80,110,140);
}*/

button:hover, button:focus {
  --light: 1 ;
  color: rgb(80,110,140);
  
  transform: scale(1.02);
  transition: all 550ms ease;
}