@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css);
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
button,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
img,
picture,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-tap-highlight-color: transparent;
}
body ::-moz-selection {
  background: #FF9100;
}
body ::selection {
  background: #FF9100;
}
body img,
body picture {
  max-width: 100%;
}
body ul,
body ol {
  list-style: none;
}
body blockquote,
body q {
  quotes: none;
}
body blockquote:before,
body blockquote:after,
body q:before,
body q:after {
  content: "";
  content: none;
}
body table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  font-size: 62.5%;
}

body {
  line-height: 2;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(1.2rem, 2vmin, 2rem);
  color: white;
}
body h1 {
  font-size: clamp(2.2rem, 5vmin, 5rem);
}
body h3 {
  font-size: clamp(1.7rem, 2.5vmin, 4rem);
}
body h4 {
  font-size: clamp(1.2rem, 2.2vmin, 2.8rem);
}
body h5 {
  font-size: clamp(1rem, 1.8vmin, 2rem);
}
body div,
body button,
body span,
body applet,
body object,
body iframe,
body h6,
body p,
body blockquote,
body pre,
body a,
body abbr,
body acronym,
body address,
body big,
body cite,
body code,
body del,
body dfn,
body em,
body img,
body ins,
body kbd,
body q,
body s,
body samp,
body small,
body strike,
body strong,
body sub,
body sup,
body tt,
body var,
body b,
body u,
body i,
body center,
body dl,
body dt,
body dd,
body ol,
body ul,
body li,
body fieldset,
body form,
body label,
body legend,
body table,
body caption,
body tbody,
body tfoot,
body thead,
body tr,
body th,
body td,
body article,
body aside,
body canvas,
body details,
body embed,
body figure,
body figcaption,
body footer,
body header,
body hgroup,
body menu,
body nav,
body output,
body ruby,
body section,
body input,
body textarea,
body select,
body summary,
body time,
body mark,
body audio,
body video {
  font: inherit;
  color: inherit;
  text-decoration: inherit;
}
body a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
body .navbar--logo, body .navbar--links {
  font-family: "Poppins", sans-serif;
}
body .navbar--logo {
  font-weight: 500;
  letter-spacing: -0.15rem;
}
body .navbar--links {
  font-weight: 300;
}
@media (min-width: 768px) {
  body .navbar--links li:hover {
    color: #FF9100;
  }
  body .navbar--links li:nth-child(3)::after {
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
  }
}
body .navbar--signup {
  font-family: "Poppins";
  font-weight: 500;
}
body .privacy * {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: #766f6f;
}
body .login {
  text-align: center;
}
body .login--title, body .login--desc {
  font-family: "Poppins", sans-serif;
}
body .login--title {
  font-weight: 700;
}
body .login--desc {
  font-weight: 500;
  color: #766f6f;
}
body .login--options-form-submit {
  font-family: "Poppins";
  font-weight: 500;
  text-align: left;
}
body .login--options-form-submit::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
}
body .login--options__social {
  font-size: 2.5rem;
}
body .login--options__social-alt div i {
  font-size: 2.5rem;
}
body .login--options__social-alt div h4 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.2rem, 2vmin, 2rem);
  font-weight: 400;
}
body .login--forgot {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  text-decoration: underline;
}

body {
  background: #272525;
  display: grid;
  grid-template-rows: 0.1fr 1fr 0.1fr;
}
body .navbar,
body .privacy {
  display: flex;
  align-items: center;
}

.navbar--signup {
  order: 3;
  background: #FDBF00;
  padding: 0 2rem;
  padding-bottom: 0.2rem;
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.navbar--signup:hover {
  background: #FF9100;
}

.login--forgot {
  cursor: pointer;
}

.login--options__social {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3rem;
}
.login--options__social * {
  cursor: pointer;
}
@media (min-width: 576px) {
  .login--options__social {
    width: 70%;
    margin: auto;
    margin-bottom: 3rem;
  }
}
@media (min-width: 992px) {
  .login--options__social {
    display: none;
  }
}

.login--options__social-alt {
  display: none;
}
@media (min-width: 992px) {
  .login--options__social-alt {
    display: grid;
    width: 45%;
    padding: 1.2rem;
  }
  .login--options__social-alt div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0.6rem;
    padding: 1.2rem;
    width: 100%;
    border: solid 0.1rem #FF9100;
    cursor: pointer;
  }
  .login--options__social-alt div > * {
    padding-left: 2rem;
  }
  .login--options__social-alt div:not(:nth-child(3)) {
    margin-bottom: 0.8rem;
  }
}

.login--options-form-submit {
  border: none;
  border-radius: 0.6rem;
  padding: 1.3rem;
  width: 100%;
}
@media (min-width: 576px) {
  .login--options-form-submit {
    width: 70%;
  }
}
@media (min-width: 992px) {
  .login--options-form-submit {
    width: 100%;
  }
}

.login--options-form-submit {
  margin-bottom: 1.5rem;
  position: relative;
  background: linear-gradient(to bottom, #FDBF00, #FF9100);
}
.login--options-form-submit::after {
  content: "";
  position: absolute;
  right: 2rem;
  transition: all 0.2s;
}
.login--options-form-submit:hover::after {
  right: 2.5rem;
}
@media (min-width: 992px) {
  .login--options-form-submit {
    margin: 0;
  }
}

input {
  border: none;
  border-radius: 0.6rem;
  padding: 1.3rem;
  width: 100%;
}
@media (min-width: 576px) {
  input {
    width: 70%;
  }
}
@media (min-width: 992px) {
  input {
    width: 100%;
  }
}

input {
  background: #413e3e;
}
input:not(:nth-child(3)) {
  margin-bottom: 0.8rem;
}
input:focus {
  outline: none;
  border: solid 0.01rem white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navbar > * {
  cursor: pointer;
}
.navbar--logo {
  order: 2;
}
@media (min-width: 576px) {
  .navbar--logo {
    flex: 0.7;
  }
}
@media (min-width: 768px) {
  .navbar--logo {
    flex: 0 auto;
  }
}
.navbar--links, .navbar--search {
  display: none;
}
@media (min-width: 768px) {
  .navbar--links {
    display: flex;
    order: 2;
    justify-content: center;
    flex: 0.7;
  }
  .navbar--links li {
    transition: all 0.2s;
  }
  .navbar--links li:not(:last-child) {
    margin-right: 3vw;
  }
  .navbar--links li:nth-child(3) {
    position: relative;
  }
  .navbar--links li:nth-child(3)::after {
    content: "New";
    position: absolute;
    top: -0.2rem;
    margin-left: 0.5rem;
    background: linear-gradient(to bottom, #FDBF00, #FF9100);
    padding: 0.01rem 0.8rem;
    border-radius: 2rem;
  }
}
.navbar--more {
  order: 1;
}
@media (min-width: 768px) {
  .navbar--more {
    display: none;
  }
}
@media (min-width: 576px) {
  .navbar--search {
    display: block;
    order: 3;
  }
}
@media (min-width: 768px) {
  .navbar--search {
    margin-right: -2vw;
  }
}
@media (min-width: 992px) {
  .navbar--search {
    margin-right: -4vw;
  }
}

.privacy {
  justify-content: space-between;
  padding: 0 3.5rem;
  cursor: default;
}

.login {
  display: grid;
  place-content: center;
  padding: 0 4rem;
  overflow: hidden;
}
.login--desc {
  margin: auto;
  margin-bottom: 3rem;
  width: 80vw;
}
@media (min-width: 576px) {
  .login--desc {
    width: 70vw;
  }
}
@media (min-width: 768px) {
  .login--desc {
    width: 60vw;
  }
}
@media (min-width: 992px) {
  .login--desc {
    width: 50vw;
  }
}
.login--options {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 992px) {
  .login--options {
    flex-direction: row;
    align-items: center;
    width: 60vw;
  }
}
@media (min-width: 992px) {
  .login--options-form {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    width: 45%;
  }
}
.login--options hr {
  height: 0.1rem;
  width: 2.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 992px) {
  .login--options hr {
    margin-top: 3rem;
    transform: rotate(-70deg);
  }
}
@media (min-width: 992px) {
  .login--forgot {
    margin-top: 3rem;
  }
}