body,
  html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

body {
    background-image: url('../IMG/mcbg.gif');
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
    border: 5px solid black;
}

td {
    width: 33%;
    border: 5px solid greenyellow;
}

.centered-text {
  text-align: center; /* Horizontal zentrieren */
  vertical-align: middle; /* Vertikal zentrieren */
}



:root {
    --main-txt-color: #000000;
  }
  

  
  body {
    color: var(--main-txt-color);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: "Roboto", sans-serif;
  } 
  .glitch{
    font-size:3rem;
    position:relative;
    line-height: 1.2;
    transform:scale(4, 4);
    margin: 80px;
    font-size: 1vw;
  } 
  .glitch::before,
  .glitch::after{
    position:absolute;
    top:0;
    left:0;
    content:attr(data-text);
    background:var(--main-bg-color);
    clip:rect(0,0,0,0);
    width:100%;
  }
  .glitch::before{
    animation:glitch-2 3s 500 linear alternate-reverse;
    left:-2px;
    text-shadow: 1px 0 #4401fb, 2px 0 #eb3406;
  }
  .glitch::after{
    animation:glitch-1 2s 500 linear alternate-reverse;
    left:2px;
    text-shadow: 1px 0 #3cff00, 2px 0 #2b30d1;
  }
  @-webkit-keyframes glitch-1 {
    0% {
      clip: rect(25px, 600px, 4px, 0);
    }
    5.88235% {
      clip: rect(22px, 600px, 12px, 0);
    }
    11.76471% {
      clip: rect(44px, 600px, 20px, 0);
    }
    17.64706% {
      clip: rect(7px, 600px, 29px, 0);
    }
    23.52941% {
      clip: rect(13px, 600px, 18px, 0);
    }
    29.41176% {
      clip: rect(21px, 600px, 31px, 0);
    }
    35.29412% {
      clip: rect(17px, 600px, 20px, 0);
    }
    41.17647% {
      clip: rect(41px, 600px, 7px, 0);
    }
    47.05882% {
      clip: rect(43px, 600px, 2px, 0);
    }
    52.94118% {
      clip: rect(44px, 600px, 12px, 0);
    }
    58.82353% {
      clip: rect(44px, 600px, 22px, 0);
    }
    64.70588% {
      clip: rect(10px, 600px, 17px, 0);
    }
    70.58824% {
      clip: rect(31px, 600px, 13px, 0);
    }
    76.47059% {
      clip: rect(40px, 600px, 22px, 0);
    }
    82.35294% {
      clip: rect(16px, 600px, 30px, 0);
    }
    88.23529% {
      clip: rect(33px, 600px, 34px, 0);
    }
    94.11765% {
      clip: rect(9px, 600px, 40px, 0);
    }
    to {
      clip: rect(45px, 600px, 21px, 0);
    }
  }
  @keyframes glitch-1 {
    0% {
      clip: rect(25px, 600px, 4px, 0);
    }
    5.88235% {
      clip: rect(22px, 600px, 12px, 0);
    }
    11.76471% {
      clip: rect(44px, 600px, 20px, 0);
    }
    17.64706% {
      clip: rect(7px, 600px, 29px, 0);
    }
    23.52941% {
      clip: rect(13px, 600px, 18px, 0);
    }
    29.41176% {
      clip: rect(21px, 600px, 31px, 0);
    }
    35.29412% {
      clip: rect(17px, 600px, 20px, 0);
    }
    41.17647% {
      clip: rect(41px, 600px, 7px, 0);
    }
    47.05882% {
      clip: rect(43px, 600px, 2px, 0);
    }
    52.94118% {
      clip: rect(44px, 600px, 12px, 0);
    }
    58.82353% {
      clip: rect(44px, 600px, 22px, 0);
    }
    64.70588% {
      clip: rect(10px, 600px, 17px, 0);
    }
    70.58824% {
      clip: rect(31px, 600px, 13px, 0);
    }
    76.47059% {
      clip: rect(40px, 600px, 22px, 0);
    }
    82.35294% {
      clip: rect(16px, 600px, 30px, 0);
    }
    88.23529% {
      clip: rect(33px, 600px, 34px, 0);
    }
    94.11765% {
      clip: rect(9px, 600px, 40px, 0);
    }
    to {
      clip: rect(45px, 600px, 21px, 0);
    }
  }
  @-webkit-keyframes glitch-2 {
    0% {
      clip: rect(8px, 600px, 50px, 0);
    }
    5.88235% {
      clip: rect(40px, 600px, 41px, 0);
    }
    11.76471% {
      clip: rect(33px, 600px, 16px, 0);
    }
    17.64706% {
      clip: rect(41px, 600px, 9px, 0);
    }
    23.52941% {
      clip: rect(14px, 600px, 30px, 0);
    }
    29.41176% {
      clip: rect(22px, 600px, 33px, 0);
    }
    35.29412% {
      clip: rect(37px, 600px, 48px, 0);
    }
    41.17647% {
      clip: rect(25px, 600px, 37px, 0);
    }
    47.05882% {
      clip: rect(1px, 600px, 18px, 0);
    }
    52.94118% {
      clip: rect(19px, 600px, 27px, 0);
    }
    58.82353% {
      clip: rect(33px, 600px, 29px, 0);
    }
    64.70588% {
      clip: rect(2px, 600px, 38px, 0);
    }
    70.58824% {
      clip: rect(18px, 600px, 41px, 0);
    }
    76.47059% {
      clip: rect(19px, 600px, 45px, 0);
    }
    82.35294% {
      clip: rect(44px, 600px, 32px, 0);
    }
    88.23529% {
      clip: rect(13px, 600px, 43px, 0);
    }
    94.11765% {
      clip: rect(4px, 600px, 6px, 0);
    }
    to {
      clip: rect(30px, 600px, 25px, 0);
    }
  }
  @-keyframes glitch-2 {
    0% {
      clip: rect(8px, 600px, 50px, 0);
    }
    5.88235% {
      clip: rect(40px, 600px, 41px, 0);
    }
    11.76471% {
      clip: rect(33px, 600px, 16px, 0);
    }
    17.64706% {
      clip: rect(41px, 600px, 9px, 0);
    }
    23.52941% {
      clip: rect(14px, 600px, 30px, 0);
    }
    29.41176% {
      clip: rect(22px, 600px, 33px, 0);
    }
    35.29412% {
      clip: rect(37px, 600px, 48px, 0);
    }
    41.17647% {
      clip: rect(25px, 600px, 37px, 0);
    }
    47.05882% {
      clip: rect(1px, 600px, 18px, 0);
    }
    52.94118% {
      clip: rect(19px, 600px, 27px, 0);
    }
    58.82353% {
      clip: rect(33px, 600px, 29px, 0);
    }
    64.70588% {
      clip: rect(2px, 600px, 38px, 0);
    }
    70.58824% {
      clip: rect(18px, 600px, 41px, 0);
    }
    76.47059% {
      clip: rect(19px, 600px, 45px, 0);
    }
    82.35294% {
      clip: rect(44px, 600px, 32px, 0);
    }
    88.23529% {
      clip: rect(13px, 600px, 43px, 0);
    }
    94.11765% {
      clip: rect(4px, 600px, 6px, 0);
    }
    to {
      clip: rect(30px, 600px, 25px, 0);
    }
  }