@font-face {
  font-family: FontQatar;
  src: url("Qatar2022Arabic-Bold.otf");
}


*{ margin: 0;
        padding: 0;}
       
        .menu ul{
            list-style: none;/* tirar os pontinhos */
            position: absolute;
                  z-index: 2;/* para usar z-index fixed ou absolute*/
                  top: 0%;
                  left: 40%;        
        }
        .menu{
            width: 100%;
            height:90px;
            background-color:crimson;
            color: 22577a;
            font-family: FontQatar; /* formatar cor de fundo largura altura cor da letra e tipo de letra do menu*/
           
         
        }
        .menu  li a{
            padding: 15px;
            display: block;
                              background-color:crimson;

            text-decoration: none;/* tira  a linha do link*/
            text-align: center;/* alinha no centro do bloco*/
            color:white;
           
        } /* formatar o bloco do link no menu*/
       
        .menu ul ul {
            position: absolute;
            visibility: hidden;
             
        }
        .menu ul li:hover ul{  /* deixar visivel o sub menu quando passar o mouse */
            visibility: visible
           
        }
        .menu a:hover {
             background-color: whitesmoke;
            color: darkgoldenrod;
            }
          .menu ul li{ width: 150px;
            float: left;}
        .menu ul ul{  /* movimento de descida do sub menu*/
          position: static;
            overflow: hidden;
            max-height: 0;
       /*  transition: all 4s;  */
                 }
        .menu ul li:hover ul{
            height: auto;
            max-height: 420px;
         
        }




    div.relogiodias{
        width: 50px;
        height: 50px;
       top: 40%;
       left: 600px;
        opacity: 10; 
          color: white;           
     font-family:sans-serif;
       
          }
          
          div.relogiohoras{
        width: 50px;
        height: 50px;
       top:40%;
       left: 680px;
        opacity: 10; 
          color: white;           
     font-family:sans-serif;
      
          }
          
          div.relogiominutos{
        width: 40px;
        height: 100px;
       top: 40%;
       left: 760px;
        opacity: 10; 
          color: white;
                                  font-family:sans-serif;
        
          }
          
      
          
           div.dias{
        width: 50px;
        height: 50px;
       top: 45%;
       left: 600px;
        opacity: 10; 
          color: white;           
                                    font-family:sans-serif;
      
          }
          
           div.horas{
        width: 50px;
        height: 50px;
       top: 45%;
       left: 680px;
        opacity: 10; 
          color: white;           
                                     font-family:sans-serif;
     
          }
          
          div.minutos{
        width: 50px;
        height: 50px;
       top: 45%;
       left: 760px;
        opacity: 10; 
          color: white;           
                                   font-family:sans-serif;
       
          }
          
       

 div.grupos{
        width: 800px;
        height: 100px;
    font-family: FontQatar;
       top: 740px;
       left: 298.8px;
        opacity: 10;
       color: blue;

       
   }