:root {
   /* button */
   --btn-primary-backgraund-color: #e66a6a;
   --btn-secondary-backgraund-color: #fff;
   --btn-primary-text-color: white;
   --btn-secondary-text-color: black;
   --button-border-radious: 4px;
   /* Theam */
   --logo-red-color: #e42127;
   /* popup */
   --popup-header-background-color: #e66a6a;
}

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: #fff;
   /* height: 100vh; */
   /* 100% of the viewport height */
   display: flex;
   flex-direction: column;
   scroll-behavior: smooth;
}

.header-container {
   position: fixed;
   z-index: 1;
   width: 100%;
}

header {
   display: flex;
   background: transparent;
   justify-content: space-between;
   align-items: center;
}

.nav-container {
   background-color: var(--btn-primary-backgraund-color);
   opacity: 0.95;
}

nav {
   padding: 1em;
   text-align: center;
   display: none;
   flex-direction: column;
}

nav a {
   color: #fff;
   text-decoration: none;
   margin: 0 1em;
   font-size: 45px;
   line-height: 70px;
}

footer {
   background-color: #333;
   display: flex;
   align-items: center;
   justify-content: space-around;
   font-size: x-small;
}

.gravitas-logo img {
      width: 208px;
      height: 83px;
}

.btn-menu_i span {
   border-right: 2px solid var(--logo-red-color);
   display: inline-block;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 5px;
   line-height: 25px;
   margin-right: 10px;
   padding: 10px;
   text-transform: uppercase;
   color: white;
}

.btn-menu_ii {
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
}

.btn-menu__line-1,
.imprint-close__line-1 {
   width: 50px;
}

.btn-menu__line-1,
.btn-menu__line-2,
.btn-menu__line-3 {
   margin-bottom: 8px;
   left: 18px;
   top: 20px;
   height: 3px;
   width: 35px;
   background: var(--logo-red-color);
}

.btn-menu {
   margin-right: 3%;
   margin-right: 3%;
   display: flex;
   align-items: center;
}

.menu-text,
.btn-menu__line-1,
.btn-menu__line-2,
.btn-menu__line-3 {
   transition: all 0.3s ease;
}

.login-menu {
   transition: all 0.3s ease;
   display: inline-block;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 5px;
   line-height: 25px;
   margin-right: 10px;
   padding: 10px;
   text-transform: uppercase;
   color: white;
}

.btn {
   cursor: pointer;
   margin-left: 10px;
   border: 1px solid var(--btn-primary-backgraund-color);
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   line-height: 1.5;
   border-radius: 0.25rem;
   transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-primary {
   background-color: var(--btn-primary-backgraund-color);
   color: var(--btn-primary-text-color);
   ;
   border: 1px solid transparent;
}

.btn-secondary {
   background-color: var(--btn-secondary-backgraund-color);
   color: var(--btn-secondary-text-color);
}

.login-nav {
   display: none;
}

.small-screen-warning {
   display: none;
}

@media screen and (max-width: 600px) {
   .gravitas-logo {
      height: 60px;
      width: 100%;
   }

   .gravitas-logo img {
      width: 200px;
      top: 0px;
      margin-top: -20px;
   }

   /* Hide the menu on small screens by default */
   nav {
      display: none;
   }

   /* Adjust the styling of the menu for small screens */
   nav a {
      display: block;
      margin: 0 0;
   }

   header {
      text-align: center;
      background-color: #fff;
   }

   .btn-menu_i span,
   .login-menu {
      display: none;
   }

   .btn-menu__line-1,
   .btn-menu__line-2,
   .btn-menu__line-3 {
      width: 25px;
      margin-bottom: 4px;
   }

   .login-nav {
      display: block;
   }

   .small-screen-warning {
      display: block;
   }
}