:root {
    --primary:#253b2f;

    --primary-button-bg-color:#253b2f;
    --primary-button-bg-color-hover:#335A2B;
    --primary-button-bg-color-focus:#1b2f17;

    --primary-button-text-color:#fff;
    --primary-button-text-color-hover:#fff;
    --primary-button-text-color-focus:#fff;

    --primary-button-border-color:#253b2f;
    --primary-button-border-color-hover:#335A2B;
    --primary-button-border-color-focus:#1b2f17;

   
    --secondary-button-bg-color:#fff;
    --secondary-button-bg-color-hover:#fff;
    --secondary-button-bg-color-focus:#fff;

    --secondary-button-text-color:#253b2f;
    --secondary-button-text-color-hover:#335A2B;
    --secondary-button-text-color-focus:#1b2f17;

    --secondary-button-border-color:#253b2f;
    --secondary-button-border-color-hover:#335A2B;
    --secondary-button-border-color-focus:#1b2f17;

    --tertiary-button-bg-color:#fff;
    --tertiary-button-bg-color-hover:#fff;
    --tertiary-button-bg-color-focus:#fff;

    --tertiary-button-text-color:#253b2f;
    --tertiary-button-text-color-hover:#335A2B;
    --tertiary-button-text-color-focus:#1b2f17;

    --tertiary-button-border-color:#fff;
    --tertiary-button-border-color-hover:#fff;
    --tertiary-button-border-color-focus:#fff;

    --button-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.15);

    --button-font-size: 15px;

    --dark-text:#58595B;
    --light-text:#CACCD7;
    --border:1px solid #CACCD7;
    
    --white: #fff;
    --red: #DB2340;
    --yellow: #FFCB31;
    --blue: #00A0B0;
    --light-gray: #f4f4f4;
    --dark-gray: #7B7B7B;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}


.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(--white);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 8px;
    text-decoration: none;
    font-size: var(--button-font-size);
      font-weight: normal;
      line-height: 30px;
      transition: 0.3s;
    color:var( --dark-text);
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: var(--tertiary-button-text-color);
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background:transparent;
    color:var( --dark-text);
    padding: 10px 15px;
    border: none;
  }

  .sidebar-ul {
    list-style: none;
    padding-left: 10px;
  }
 
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }