:root {
  --yellow: #f7ef0e; 
  --grey: #888;
  --text: #212529;
  --white: #ffffff;
}

.strong {
  font-weight: 700;
}

.caps {
  text-transform: uppercase;
  letter-spacing: .2em;
}

a.navbar-brand {
    display: contents;
}

.btn-yellow {
    background-color: var(--yellow);
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0px 0px 0px rgba(12, 12, 12, 0.01);
}
.btn-yellow:hover {
    background-color: var(--yellow);
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0px 20px 50px rgba(12, 12, 12, 0.4);
    scale: 1.1;
    transition: 200ms ease;
}

.btn-grey {
    background-color: var(--grey);
    color: var(--white) !important;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0px 0px 0px rgba(12, 12, 12, 0.01);
}
.btn-grey:hover {
    background-color: var(--grey);
    color: var(--white) !important;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0px 20px 50px rgba(12, 12, 12, 0.4);
    scale: 1.1;
    transition: 200ms ease;
}


.link-fancy {
    	color: var(--text);
  position: relative;
  text-decoration: none;
}

.link-fancy::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: var(--yellow);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.link-fancy:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}