// reset & normalize
* {
  text-decoration: none;
}

html {
  font-size: 62.5%; // 62.5% = 1rem = 10px
  padding: 3rem;
  color: #614f38;
}

body {
  font-size: 1.6rem;
}

a.btn {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 1px black;
  color: black;
  position: relative;

  &:before,
  &:after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    border: 1px solid transparent;
    width: 0;
    height: 0;
  }

  &:before {
    top: 0;
    left: 0;
  }

  &:after {
    bottom: 0;
    right: 0;
  }

  &:hover {

    &:before,
    &:after {
      width: 100%;
      height: 100%;
    }

    &:before {
      border-top-color: orange;
      border-right-color: orange;
      transition:
        width 0.15s ease-out,
        height 0.15s ease-out 0.15s;
    }

    &:after {
      border-bottom-color: orange;
      border-left-color: orange;
      transition:
        border-color 0s ease-out 0.2s,
        width 0.15s ease-out 0.2s,
        height 0.15s ease-out 0.3s;
    }
  }
}