.body {
  background-color: #e3e3e4;
  margin: 0;
}

.header	{
  background-color: #0d2051;
  width: 100%;
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  -webkit-box-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.main {
  width: fit-content;
  display: flex;
  margin: 64px auto 0 auto;
  justify-content: center;
  flex-direction: column;
  font: 500 18px/24px AbhayaLibre-Medium;
}

.header-logo {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.logo {
  display: block;
  width: 90px;
  height: 22px;
}

.btns {
  display: flex;
  justify-content: space-between;
  min-width: 500px;
}

.btn {
  position: relative;

  display: block;
  width: fit-content;
  padding: 0;

  text-decoration: none;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

  background-color: #0d2051;
  color: #ecf0f1;

  transition: background-color .3s;
}

.btn > * {
  position: relative;
}

.btn span {
  display: block;
  padding: 8px 14px;
}

.btn:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 100%;

  background-color: rgba(236, 240, 241, .3);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;

  transition: width .2s ease-out, padding-top .2s ease-out;
}

.body-logo {
  width: 300px;
  margin: 96px auto;
}