static/base.css

 * {
     margin: 0;
     padding: 0;
     font-family: 'Poppins';


 }

 :root {
     --primary-blue: #232d4b;
     --secondary-blue: #005573;
     --blue-one: rgb(49, 133, 156);
     --purple-blue: rgb(90, 112, 197);
     --mineral-green: #00aa9b;
     --light-grey: #fcfcfc;
     --grey: #f2f2f2;
     --primary-red: #f04641;
     --secondary-red: #f5908d;
     --primary-orange: #f89235;
     
 }

 ::-webkit-scrollbar {
     width: 4px;
 }

 ::-webkit-scrollbar-track {
     background-color: var(--primary-blue);
     padding: 2px;
 }

 ::-webkit-scrollbar-thumb {
     background-color: var(--secondary-blue);
     border-radius: 5px;

 }
 
#header-field {
    background: var(--secondary-blue);
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    border-bottom-right-radius: 10px;
    color: white;
    font-weight: 700;
    width: 300px;
    padding: 15px;
    font-size: 30px;
    user-select: none;
    cursor: pointer;
}


 nav {
     display: flex;
     justify-content: space-around;
     align-items: center;
     font-family: Poppins;
     height: auto;
     padding: 33px 0 26px;
     max-height: 110px;

 }

a {
    color: inherit;
    text-decoration: none;
}

 html,
 body {
     font-family: 'Poppins';
     position: relative;
     

 }

 .gradient-overlay {
     position: fixed;
     top: 60%;
     left: 0;
     width: 100%;
     height: 100%;
     background: #ffffff;
     z-index: -3;
     overflow: hidden;
     transform: translateY(-50%);
 }

 .gradient-overlay::after {
     content: "";
     position: absolute;
     top: 60%;
     left: 0;
     width: 100%;
     height: 90vh;
     background: var(--primary-blue);
     z-index: -3;
 }

 .nav-list {
     list-style: none;
     display: flex;
     color: white;
 }




 .nav-list li {
     letter-spacing: 0px;
     margin-left: 32px;
     align-items: center;
     margin-top: 10px;
     padding: 0 11.5px;

 }

.active{
    color: var(--mineral-green);
 }

 a.navbar-a-block-branding {
    color: inherit;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
}

 #vagas-navbar-a.active {
     color: var(--mineral-green);
 }

 #username {
     color: #fff;
     font-size: 1.125rem;
     font-weight: 300;
     margin-left: 400px;
 }




 .mobile-menu {
     display: none;
     cursor: pointer;
 }


 .mobile-menu div {
     width: 32px;
     height: 2px;
     background: #fff;
     margin: 8px;
     transition: 0.3s;

 }

 header {
     background-color: var(--primary-blue);
     display: flex;
     justify-content: flex-start;
     padding: 20px 0 26px;
     height: 88px;
 }


 .branding {
     flex: 0 1 auto;

 }

 .block-branding>a {
     margin-left: 120px;
     margin-right: 15px;
 }

 #logout-link {
     margin-left: 30px;
 }


 @media (max-width:999px) {
     body {
         overflow-x: hidden;

     }

     .nav-list {
         position: absolute;
         top: 8vh;
         right: 0;
         width: 50vw;
         height: 92vh;
         background: var(--primary-blue);
         flex-direction: column;
         align-items: center;
         justify-content: space-around;
         transform: translateX(100%);
         transition: transform 0.3s ease-in;
         padding: 1px;
     }

     .nav-list li {
         margin-left: 0;
         opacity: 0;
     }

     .mobile-menu {
         display: block;
     }

     .card-body {
         margin: auto;
         max-width: 200px;
         min-width: 200px;
         text-decoration: none;

     }

 }




 .nav-list.active {
     transform: translateX(0);
 }

 @keyframes navLinkFade {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }