* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     height: 100%;
     width: 100%;
 }

 body {
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../../livestreaming/latestt.jpeg');
     /* height: 100%; */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     /* opacity: 0.6; */
     /* background: linear-gradient(-45deg, #ee7752, #f36134, #23a6d5, #23d5ab);
                background-size: 500% 500%;
                animation: gradient 10s ease infinite;
                margin: 0;
                width: 100%;
                height: 100%; */
 }

 body {
     align-items: center;
     display: flex;
     font-family: -apple-system,
         BlinkMacSystemFont,
         "Segoe UI",
         Roboto,
         Oxygen-Sans,
         Ubuntu,
         Cantarell,
         "Helvetica Neue",
         sans-serif;
 }



 li {
     display: inline-block;
     font-size: 1.5em;
     list-style-type: none;
     padding: 1em;
     text-transform: uppercase;
 }

 li span {
     display: block;
     font-size: 4.5rem;
 }

 .message {
     font-size: 4rem;
 }

 #content {
     display: none;
     padding: 1rem;
 }

 .emoji {
     padding: 0 .25rem;
 }

 @media all and (max-width: 768px) {
     h1 {
         font-size: 1.5rem;
     }

     li {
         font-size: 1.125rem;
         padding: .75rem;
     }

     li span {
         font-size: 3.375rem;
     }

     html,
     body {
         height: 100% !important;
         width: 100% !important;
     }
 }




 /* 
 @keyframes gradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 } */