/* css styles */
:root {
  --active: #E0665F;
  --hover: #7CBAE4;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--active);
    font-weight: 700;
}

.nav-link:hover, .nav-link:focus, .navbar-brand:hover {
    color: var(--hover)
}

ol, pre code {
    text-align: left;
}

button.butt {
    margin: 25px 12px 2% 12px;
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid black;
    text-decoration: none;
    /* color: var(--active); */
    font-weight: 500;
    padding: 15px 20px;
    transition: 0.225s ease all;
    overflow: hidden;
    will-change: transform;
    box-shadow: 3px 3px 0px rgba(196, 196, 196, 0.5);
}

button.butt:hover,
button.butt:focus {
    cursor: pointer;
    transform: translate(-4px, -4px);
    box-shadow: 7px 7px 0px rgba(196, 196, 196, 0.3);
    color: var(--active);
}

button.butt.clicked {
    cursor: pointer;
    transform: translate(3px, 3px) !important;
    box-shadow: 0px 0px 0px var(--active) !important;
    border: 1px solid #e0655f7e;
}


#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.ms-auto > li > a {
  /* background-image: url("assets/icons/button/arrow_cl.svg"); */
  /* background-repeat: no-repeat;
  background-position: right 15px center; */
  /* background-size:$button-font-size auto; */
  border: 1px solid var(--active);
  /* border-radius: 8px; */
  color:var(--active);
  padding-top: 10px;
  padding-bottom:10px;
  padding-left:30px;
  padding-right:25px;
  /* text-decoration: none; */
  font-weight: 700;
}

#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.ms-auto > li > a:link {
  color: var(--active);
}

#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.ms-auto > li > a:hover {
  border: 1px solid var(--hover);
  color: var(--hover);
}