:root {
    --color-menu-background: #e4e9f7;
    --color-menu-foreground: black;
    --color-background:#004f83;
    --color-foreground: #ffffff;

    --color-menu-gradient:linear-gradient(to right, #0f2027, #203a43, #2c5364);


    --color-default: #00572f;
    --color-second: #f0f2fb;
    --color-white: #fff;
    --color-body: #e4e9f7;
    --color-light: #e0e0e0;
    }

    .title
    {
    font-family: "Titillium Web", "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    
    }



    .animate_up
    {
    animation-name: up;
    animation-duration: 30s;
    animation-iteration-count:infinite;    
    position:relative;
    }
        
        
    @keyframes up {
    0%   {top:0px;}
    50%  {top: -400px;}
    100%  {top:0px;}
    }
            
    .title_text
    {
    position: absolute;
    color: White;
    left: 0;
    right: 0;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
        

    .titleHeading
    {
    font-size: 4rem;
    text-shadow: black 3px 3px 8px;
    }
    
    
      .titleSubHeading
    {
       font-size: 1.5rem;
    text-shadow: #ebb5ff 1px 1px 2px;
    }
    
    
    
    .title2
    {
    font-weight: 400;
    font-size: 20px;
  
    text-align: center;
    }


      
        .welcomeHR
        {
            float: left;
            position: static;
            margin: 4px;
            min-width: fit-content;
            flex-basis: 0;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }




    .paragraphText
    {
    font-size: .8rem;
    font-style: italic;
    color: var(--color-background);
    }


    .animate-from-left .animate-from-right .animate-from-bottom {
    opacity: 0;
    transition: opacity 1s ease;
    }

    
    .animate-from-left.in-view {
    animation: fromLeft 2s ease forwards;
    }

    @keyframes fromLeft {
    from {
    opacity: 0;
    transform: translateX(-50%);
    }
    to {
    opacity: 1;
    transform: translateX(0);
    }
    }
    
  

    .animate-from-right.in-view {
    animation: fromRight 2s ease forwards;
    }

    @keyframes fromRight {
    from {
    opacity: 0;
    transform: translateX(50%);
    }
    to {
    opacity: 1;
    transform: translateX(0);
    }
    }    
    
 
 
   .animate-from-bottom.in-view {
    animation: fromBottom 2s ease forwards;
    }

    @keyframes fromBottom {
    from {
    opacity: 0;
    top:100px;
    }
    to {
    opacity: 1;
    top:0px;
    }
    }    
    
 
   .appear
   {
        scale:0;
       
       }
   .appear.in-view {
    animation: fromZero 2s ease forwards;
    }

    @keyframes fromZero {
         0%   {scale:0;}
        100%  {scale:1;}
    }