@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz@12..96&family=Roboto&display=swap');

html,
body {
  height: 100%;
  font-size: 4.1026vw;
  background: #dcdcdc;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

body>.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}

.logo {
  margin: 1.375em;
  height: 2.5625em;
  align-self: flex-start;
}

h1,
.page-title {
  font-size: 2.5em;
  font-family: 'Bricolage Grotesque', serif;
  margin-left: 1.375rem;
}

h2 {
  font-size: 2em;
  font-family: 'Bricolage Grotesque', serif;
  margin-left: 1.375rem;
}


@media (min-device-width: 641px) {
  body>.page {
    font-size: 26.2566px;
    width: 640px;
    margin: 0 auto;
  }
}

.page-index {
  background: url('../img/home-bg.png') no-repeat 0px -48px / cover;
  padding-top: 7em;
}

.page-profile {
  background: center / cover no-repeat url('../img/bg-circles.png');
  padding: 0 2.2625em;
}

.card {
  background: center / cover no-repeat url('../img/card-bg.png');
  aspect-ratio: 308 / 408;
  margin: auto 0;
  padding: 1em;
  color: white;
  display: flex;
  box-sizing: border-box;
}

.card > * {
  align-self: flex-end;
}

.btns {
  margin-top: auto;
}

.btn-bottom,
.btn-bottom:link,
.btn-bottom:visited,
.btn-bottom:hover,
.btn-bottom:active,
.btn-bottom:focus {
  margin: 0.25em;
  display: block;
  font-size: 1.125em;
  color: #fff;
  background-color: #000;
  text-align: center;
  border-radius: 0.25em;
  padding: 1em;
  text-decoration: none;
  box-sizing: border-box;
}

button.btn-bottom {
  width: calc(100% - 0.5em);
}

.btn-bottom:active {
  opacity: 0.8;
  text-decoration: none;
}

.btn-bottom>span {
  display: block;
  font-size: 0.777778em;
  opacity: 0.64;
}

.btn-bottom.light {
  background-color: #fff;
  color: #000;
}

.btn-bottom.disabled {
  background-color: #999 !important;
  color: #333 !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.8;
}