.icon-row {
  display: flex;
  align-items: center;   
  gap: 16px;         
  justify-content: center;     
}

.icon {
  width: 32px;          
  height: 32px;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;   
  display: block;         
}

.icon:hover svg {
  opacity: 0.8;
}

body {
    background-color: black;
    margin: 0;
    height: 100vh; 
    display: flex;
    justify-content: center; 
    align-items: center;     
}

    @keyframes fadeinall {

    0% {

      opacity: 1; }

    97% {

      opacity: 0; }

    98% {

      opacity: 0;

      -webkit-transform: translateY(0);

      transform: translateY(0); }

    100% {

      opacity: 0;

      -webkit-transform: translateY(-100%);

      transform: translateY(-100%);

      z-index: -1; } }

    #fadein {

      opacity: 1;

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      -webkit-transform: translateY(0);

      -ms-transform: translateY(0);

      transform: translateY(0);

      background-color: #000000;

      z-index: 999;

      -webkit-animation-fill-mode: forwards;

      animation-fill-mode: forwards;

      -webkit-animation: fadeinall 1s normal both;

      animation: fadeinall 1s normal both;

      -webkit-animation-delay: 0.3s;

      animation-delay: 0.3s; 
    }