body{
    color: #fff;
    background-color: black;
}

.halal-content{
    margin-top: 10vh;
}


h1{
   color: rgb(43, 255, 0);
}

.nogreen{
    color: #fff;
}

.b, .o, .u, .n, .c, .e {
    position: relative;
    color: green;
    display: inline-block;
    font-size: 5em;
    /* text-shadow: 0 3px #4361ee, 0 5px #4361ee, 0 7px #4361ee; */
  }
  
  .b {
    animation: bounce 1s ease infinite;
    -webkit-animation: bounce 1s ease infinite;
  }
  
  .o {
    animation: bounce 1s ease infinite .1s;
    -webkit-animation: bounce 1s ease infinite .1s;
  }
  
  .u {
    animation: bounce 1s ease infinite .2s;
    -webkit-animation: bounce 1s ease infinite .2s;
  }
  
  .n {
    animation: bounce 1s ease infinite .3s;
    -webkit-animation: bounce 1s ease infinite .3s;
  }
  
  .c {
    animation: bounce 1s ease infinite .4s;
    -webkit-animation: bounce 1s ease infinite .4s;
  }
  
  .e {
    animation: bounce 1s ease infinite .5s;
   -webkit-animation: bounce 1s ease infinite .5s;
  }
  
   @keyframes bounce {
          0%   { transform: scale(1,1) translateY(0); }
          10%  { transform: scale(1.1,.9) translateY(0); }
          30%  { transform: scale(.9,1.1)   translateY(-55px);}
          50%  { transform: scale(1.05,.95) translateY(0); }
          58%  { transform: scale(1,1) translateY(-7px); }
          65%  { transform: scale(1,1) translateY(0);}
          100% { transform: scale(1,1) translateY(0);}
      }
  
  @-webkit-keyframes bounce {
         0%   { transform: scale(1,1) translateY(0); }
          10%  { transform: scale(1.1,.9) translateY(0); }
          30%  { transform: scale(.9,1.1)   translateY(-55px);}
          50%  { transform: scale(1.05,.95) translateY(0); }
          58%  { transform: scale(1,1) translateY(-7px);}
          65%  { transform: scale(1,1) translateY(0);}
          100% { transform: scale(1,1) translateY(0);} 
  }
  
  
  .bouncing-text:before, .bouncing-text:after {
    content:"";
    position: absolute;
    background-color: rgba(0,0,0,0.4);
    width: 50px;
    height:5px;
    border-radius:50%;
    top:82px;
    z-index:-1;
  }

  .footerContent {
    float:left;
    width:100%;
    padding:8px 0;
  }
  .footer {
    width:800px;
    margin:auto;
}
.footer p {float:left; width:100%; text-align:center; }
.bouncearrow {
    margin-left:20px;
    width: 30px;
    height: 40px;
}
.arrow {
    margin-right: 20px;
    margin-left: 20px;
    display: inline-block;
    height: 12px;
    position: relative;
    width: 12px;
  }
  .arrow::after {
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-right-style: solid;
    border-right-width: 4px;
    content: "";
    display: inline-block;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
  }
  .arrow.is-triangle::after {
    border-style: solid;
    border-width: 0 0 12px 12px;
    height: 0;
    width: 0;
  }
  .arrow.is-check::after {
    width: 6px;
  }
  .arrow.arrow-bar::before {
    bottom: 2px;
    content: "";
    height: 22px;
    position: absolute;
    right: 0;
    transform-origin: bottom;
    width: 4px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .arrow.is-top {
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .arrow.is-right {
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .arrow.is-bottom {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.is-left {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .arrow::after,
  .arrow .arrow::after {
    border-color: red;
  }
  .arrow.is-triangle::after,
  .arrow .arrow.is-triangle::after {
    border-color: transparent;
    border-bottom-color: red;
  }
  .arrow::before,
  .arrow .arrow::before {
    background-color: red;
  }
#box {
    background-color: #ADADAD;
    color: black;
    border-radius: 10px;
    width: 1px;
    height: 1px;
    padding: 10px;
}