﻿
/* styles/_typography.scss */
p, h1, h2, h3, h4, h5, h6, ul, ol {
  width: 100%;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  -webkit-font-smoothing: antialiased;
}
span, button {
  -webkit-font-smoothing: antialiased;
}
p, ul, ol, pre, blockquote {
  font-size: 1em;
}
h1 {
  font-size: 1.95em;
}
h2 {
  font-size: 1.7em;
}
h3 {
  font-size: 1.6em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1.1em;
}
code {
  font: 1em /* $monospaceFont undefined */;
}
body.is-windows mymind-command-key {
  --text: 'CTRL';
}
mymind-command-key {
  font-style: normal;
}
mymind-command-key::before {
  content: var(--text, '\2318');
}
body {
  overscroll-behavior: none;
}
.authentication-block {
  display: flex;
  justify-content: right;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px;
  box-sizing: border-box;
  container: authentication-block / size;
  position: relative;
  z-index: 4;
}
.authentication-block.signup .signin-only {
  display: none;
}
.authentication-block.signin .signup-only {
  display: none;
}
.authentication-block > .guts h2 {
  font: 400 clamp(24px, 10cqw, 80px) / 1 'Louize' !important;
  letter-spacing: -0.05em;
  max-width: 400px;
  color: #000;
  margin: 0;
  box-sizing: border-box;
}
.authentication-block > .guts h3 {
  margin-top: 10px;
  color: #626F83;
  font: 500 19px / 28px Nunito;
  letter-spacing: -0.57px;
  margin: 0;
  box-sizing: border-box;
}
.authentication-block > .guts .actions {
  margin-top: 25px;
}
.authentication-block > .guts {
  width: 50cqw;
  margin: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  text-align: center;
  min-width: 400px;
  position: relative;
}
.authentication-block .error-message > a:hover {
  color: var(--alert-color);
}
.authentication-block .error-message > a {
  font-weight: 600;
  color: var(--alert-color);
  text-decoration: underline;
}
.authentication-block .error-message {
  color: var(--alert-color);
  font-size: 14px;
  max-width: 300px;
  font-weight: 400;
  margin-top: 20px;
}
.authentication-block footer a {
  color: var(--accent-color);
}
.authentication-block footer {
  font: 400 15px / 33px 'Nunito';
  letter-spacing: -0.45px;
  color: #2C333F;
  margin: 10vh 0 0 20px;
}
.authentication-block a {
  cursor: pointer;
}
.authentication-block .legal a {
  color: #748297;
}
.authentication-block .legal {
  font: 400 15px / 33px 'Nunito';
  letter-spacing: -0.45px;
  letter-spacing: 0;
  color: #748297;
  margin: 0;
}
.referral-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background-color: #FF5924;
  position: absolute;
  top: 0px;
  color: #fff;
  text-align: center;
  font: 400 18px / 1.1 'Nunito';
  letter-spacing: -0.36px;
  border-radius: 5px 5px 0 0;
}
@media (max-width: 960px) {
  .authentication-block {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .authentication-block > .guts {
    width: 100cqw;
    padding: 0;
    margin: 0;
  }
}
.signin-button-apple, .signin-button-google {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 25px;
  overflow: hidden;
  height: 50px;
  width: 300px;
  text-decoration: none;
  padding: 0 20px;
  user-select: none;
  cursor: pointer;
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);
  margin: 20px 0 0;
  box-sizing: border-box;
}
.signin-button-apple button,
.signin-button-google button {
  display: flex;
  align-items: center;
  background-color: transparent;
}
.signin-button-apple:hover,
.signin-button-google:hover {
  box-shadow: 10px 10px 20px rgb(0 0 0 / 15%);
}
.signin-button-apple span,
.signin-button-google span {
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  color: #000;
}
.signin-button-google {
  background-color: var(--accent-color);
}
.signin-button-google > span::after {
  content: 'Sign in with Google';
}
.signin-button-google > span {
  color: #fff;
}
.signin-button-google::before {
  content: '';
  mask: url('./../icons/google.svg') center / contain no-repeat;
  background: #fff;
  width: 22px;
  height: 22px;
  margin: 0px 8px 3px 0px;
}
.signin-button-apple {
  padding: 0;
}
.signin-button-apple > div {
  display: none;
}
.signin-button-apple::before {
  content: '';
  mask: url('./../icons/apple.svg') center / contain no-repeat;
  background: #000;
  width: 25px;
  height: 25px;
  margin: 0px 5px 3px 0px;
}
.signin-button-apple::after {
  content: 'Sign in with Apple';
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  color: #000;
  opacity: 0.6;
}
.authentication-block.signup .signin-button-apple::after {
  content: 'Sign up with Apple';
}
.authentication-block.signup .signin-button-google > span::after {
  content: 'Sign up with Google';
}