/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, 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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}
@font-face {
    font-family: 'Onest';
    src: url(fonts/c7bf26c56da7c42da6bf.woff) format('woff'),
         url(fonts/f160dbadba4f367f46cf.woff2) format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Onest';
    src: url(fonts/3900249b3654582e4450.woff) format('woff'),
         url(fonts/5651fdc8de9674860c8c.woff2) format('woff2');
    font-weight: 600;
}

@font-face {
    font-family: 'Non-Bureau';
    src: url(fonts/89c309d4ab5ed6afb488.woff) format('woff'),
         url(fonts/727842eef1c59f8bcd89.woff2) format('woff2');
    font-weight: 500;
}
* {
  box-sizing: border-box;
}

:root {
  --dark-grey: #141414;
  --grey: #696969;
  --light-grey: #EEEEEE;
}

html {
  font-size: calc(1vw / 14.4);
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(138deg, #f4efff 0%, #ffeeed 100%);
  overflow-x: hidden;
}

.space-hidden {
  display: none;
}

.finance-page {
  background: linear-gradient(138deg, #fff9ef 0%, #fff2ed 100%);
}

.title_h1 {
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 68rem;
  line-height: 100%;
  letter-spacing: 0.02em;
}

.title_h2 {
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 56rem;
  line-height: 100%;
  letter-spacing: 0.02em;
}

.title_h3 {
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 44rem;
}

.title_h4 {
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  line-height: 100%;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 36rem;
}

.title_h5 {
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 28rem;
  color: var(--dark-grey);
  line-height: 100%;
  letter-spacing: 0.02em;

}

.text_l {
  font-family: 'Onest', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 120%;
  font-size: 24rem;
}

.text_l_semibold {
  font-size: 24rem;
  font-family: 'Onest', Arial, Helvetica, sans-serif;
  font-weight: 600;
}

.text_m {
  font-family: 'Onest', Arial, Helvetica, sans-serif;
  font-size: 18rem;
  font-weight: 400;
  line-height: 130%;
}

.text_s {
  font-family: 'Onest', Arial, Helvetica, sans-serif;
  font-size: 14rem;
  line-height: 120%;
  color: var(--dark-grey);
  font-weight: 400;
}

.button {
  border: none;
  border-radius: 40rem;
  background-color: var(--dark-grey);
  color: white;
}

.button:hover {
  cursor: pointer;
  background-color: #1F1F1F;
}

.button:active {
  background-color: #0c0c0c;
}

/* FOOTER */

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40rem;
}

.footer-container {
  position: relative;
  display: flex;
  gap: 100rem;
  border-radius: 40rem;
  padding: 30rem 30rem;
  width: 1358rem;
  height: 307rem;
  background-color: white;
}

.footer-form .title_h4 {
  margin-bottom: 16rem;
}

.footer-text-m {
  margin-bottom: 30rem;
}

.footer-form form {
  margin-bottom: 20rem;
}

.footer-creators-container {
  display: flex;
  gap: 32rem;
}

.footer-creators-container .text_m {
  color: var(--grey);
}

.footer-creators .text_l_semibold {
  margin-bottom: 12rem;
}

.footer-img {
  position: absolute;
}

.footer-img:nth-of-type(1) {
  width: 138rem;
  top: 82rem;
  left: 659rem;
  transform: rotate(-15deg);
}

.footer-img:nth-of-type(2) {
  width: 65rem;
  top: 127rem;
  left: 945rem;
  transform: rotate(2deg);
}

.footer-img:nth-of-type(3) {
  width: 84rem;
  top: 125rem;
  left: 1156rem;
  transform: rotate(20deg);
}
/* PRE-LAUNCH PAGE */

.prelaunch-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56rem;
  padding-top: 46rem;
  margin-bottom: 33rem;
}

.prelaunch-nav-item {
  display: inline-block;
}

a.prelaunch-nav-item {
  color: var(--grey);
  transition: 0.5s ease;
}

a.prelaunch-nav-item:hover {
  color: var(--dark-grey);
}

p.prelaunch-nav-item {
  color: var(--dark-grey);
}

.prelaunch-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prelaunch-container {
  position: relative;
  width: 1362rem;
  height: 636rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 36rem;
  margin-bottom: 41rem;
  padding-top: 64rem;
}

.prelaunch-container h1 {
  max-width: 1014rem;
  text-align: center;
  color:  var(--dark-grey);
  margin-bottom: 34rem;
}

.prelaunch-container p {
  color: var(--grey);
  max-width: 674rem;
  text-align: center;
  margin-bottom: 44rem;
}

.input-container {
  display: flex;
  gap: 8rem;
}

.prelaunch-form-input {
  width: 358rem;
  height: 57rem;
  background-color: var(--light-grey);
  border: none;
  border-radius: 40rem;
  padding-left: 25rem;
}

.prelaunch-form-btn {
  width: 170rem;
  height: 56rem;
  transition: 0.5s ease;
}

.social-links {
  display: flex;
  gap: 9rem;
}

.social-link {
  display: inline-block;
}

.social-link-img {
  width: 70rem;
  height: 70rem;
}

.dd-character {
  position: absolute;
}

.drag-drop-box {
  width: 1362rem;
  height: 636rem;
  position: absolute;
  top: 0;
  left: 0;
}

.dd-character:nth-of-type(1) {
  width: 126rem;
  rotate: -25deg;
  top: 83rem;
  left: 1166rem;
}

.dd-character:nth-of-type(2) {
  width: 210rem;
  rotate: -13deg;
  top: 352rem;
  left: 119rem;
}

.dd-character:nth-of-type(3) {
  width: 284rem;
  rotate: 13deg;
  top: 281rem;
  left: 982rem;
}

.dd-character:nth-of-type(4) {
  width: 129rem;
  top: 178rem;
  left: 33rem;
}

/* ARTICLES */

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 64rem;
  padding: 16rem 16rem 16rem 32rem;
  width: 1360rem;
  height: 95rem;
  background-color: #fff;
  margin-top: 40rem;
  margin-bottom: 79rem;
}

.mobile-nav, .dropdown-menu, .dropdown-search {
  display: none;
}


.nav-container {
  display: flex;
  gap: 28rem;
}

.nav-container .text_l {
  color: var(--grey);
}

.nav-container .text_l:hover {
  color: var(--dark-grey);
}

.articles-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.articles-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation a {
  color: var(--dark-grey);
}

.nav-search-container {
  display: flex;
  gap: 8rem;
}

.search-input {
  border-radius: 64rem;
  padding: 20rem 16rem 20rem 44rem;
  width: 500rem;
  height: 63rem;
  background-color: var(--light-grey);
  border: none;
  font-size: 18rem;
  background-image: url(images/bdbcf710adaa5f73804b.svg);
  background-repeat: no-repeat;
  background-position: 20rem center;
}

.search-button {
  padding: 20rem 40rem;
  width: 133rem;
  height: 63rem;
}

.articles-cover {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 80rem;
}

.articles-cover .title_h1 {
  max-width: 569rem;
  text-align: center;
  margin-bottom: 40rem;
}

.articles-cover .text_l {
  max-width: 668rem;
  text-align: center;
}

.articles-cover img {
  position: absolute;
}

.articles-cover img:first-of-type {
  transform: rotate(-10deg);
  top: 5rem;
  left: 70rem;
  width: 233rem;
}

.articles-cover img:last-of-type {
  transform: rotate(18deg);
  top: 5rem;
  left: 1070rem;
  width: 242rem;
}

.articles-categories {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rem;
  margin-bottom: 80rem;
}

.articles-category {
  position: relative;
  flex-basis: 30%;
  border-radius: 28rem;
  padding: 28rem;
  width: 443rem;
  height: 200rem;
  background-color: white;
}

.articles-category img {
  position: absolute;
}

.articles-category .health-img {
  transform: rotate(15deg);
  top: 27rem;
  left: 273rem;
  width: 150rem;
}

.articles-category .finance-img {
  top: 27rem;
  left: 273rem;
  width: 138rem;
}

.articles-category .routine-img {
  transform: rotate(15deg);
  top: 30rem;
  left: 267rem;
  width: 154rem;
}

.articles-category .career-img {
  top: 32rem;
  left: 280rem;
  width: 134rem;
}

.articles-category .docs-img {
  top: 31rem;
  left: 293rem;
  width: 122em;
}

.articles-category .lifestyle-img {
  top: 40rem;
  left: 273rem;
  width: 123rem;
}

.articles-category .text_m {
  max-width: 255rem;
  color: var(--grey);
}

.articles-category .title_h5 {
  margin-bottom: 16rem;
}

.latest-articles-container {
  display: flex;
  gap: 16rem;
  margin-bottom: 77rem;
}

.latest-articles .title_h1 {
  text-align: center;
  margin-bottom: 32rem;
}

.latest-article {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12rem;
  border-radius: 28rem;
  padding: 16rem;
  width: 442rem;
  height: 495rem;
  background-color: white;
}

.latest-article .text_m {
  color: var(--grey);
}

.latest-article .text_l_semibold {
  color: var(--dark-grey);
}

.article-cover-tag {
  border-radius: 24rem;
  padding: 8rem 12rem;
  height: 33rem;
  position: absolute;
  background-color: white;
  top: 28rem;
  left: 28rem;
}

/* PAGE 404  */

.page-404-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40rem;
}

.page-404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1360rem;
  height: 710rem;
  background-color: white;
  margin-bottom: 40rem;
  border-radius: 30rem;
  position: relative;
}

.container-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 58rem;
}

.main-img-404 {
  width: 175rem;
}

.number-4 {
  color: var(--dark-grey);
  font-family: 'Non-Bureau', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 250rem;
}

.page-404 .title_h2 {
  color: var(--dark-grey);
  margin-bottom: 16rem;
}

.page-404 .text_l {
  color: var(--grey);
  margin-bottom: 40rem;
  max-width: 652rem;
  text-align: center;
}

.page-404 .button {
  width: 254rem;
  height: 60rem;
  color: white;
}

.img-404:first-of-type {
  position: absolute;
  width: 151rem;
  top: 262rem;
  left: 37rem;
  transform: rotate(10deg);
}

.img-404:last-of-type {
  position: absolute;
  width: 237rem;
  top: 407rem;
  left: 1022rem;
  transform: rotate(30deg);
}

/* ABOUT US */

.about {
  background: linear-gradient(138deg, #f4efff 0%, #ffeeed 100%);
}

.about-main {
  margin-top: 50rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.heading-container .title_h1 {
  max-width: 1088rem;
  text-align: center;
}

.heading-container .text_l {
  color: var(--grey);
  text-align: center;
  max-width: 476rem;
}

.heading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 120rem;
  gap: 40rem;
}

.creators-portraits img{
  height: 227rem;
}

.creators-portraits img:nth-of-type(1), .creators-portraits img:nth-of-type(2) {
  margin-right: -50rem;
}

.creators-portraits {
  margin-bottom: 40rem;
}

.social-links-container {
  display: flex;
  gap: 16rem;
  margin-bottom: 80rem;
}

.social-links-container a {
  color: var(--dark-grey);
}

.social-link-block {
  padding: 28rem;
  width: 443rem;
  height: 354rem;
  background-color: white;
  border-radius: 28rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

.social-link-block img {
  width: 150rem;
}

.creators-portraits ~ .title_h3 {
  max-width: 1039rem;
  text-align: center;
  margin-bottom: 80rem;
}

.about-character {
  position: absolute;
  z-index: -1;
}

.about-character:nth-of-type(1) {
  width: 543rem;
  top: 107rem;
  left: -200rem;
  transform: rotate(5deg);
}

.about-character:nth-of-type(2) {
  width: 486rem;
  top: 580rem;
  left: 1020rem;
  transform: rotate(15deg);
}

/* PROMO */

.promo-heading-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80rem;
  margin-bottom: 80rem;
}

.promo-heading-section .title_h1 {
  max-width: 1120rem;
  text-align: center;
  margin-bottom: 80rem;
}

.promo-heading-section .title_h2 {
  margin-bottom: 50rem;
}

.help-container {
  display: flex;
  gap: 16rem;
  justify-content: center;
  align-items: center;
}

.help-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 48px;
  border-radius: 28rem;
  padding: 16rem;
  width: 442rem;
  height: 402rem;
  background-color: white;
}

.help-item .title_h5 {
  text-align: center;
}

.promo-img {
  position: absolute;
}

.promo-img:nth-of-type(1) {
  width: 159rem;
  top: 170rem;
  left: 54rem;
  transform: rotate(-20deg);
}

.promo-img:nth-of-type(2) {
  width: 397rem;
  top: 72rem;
  left: 1074rem;
  transform: rotate(-20deg);
  z-index: -1;
}

.promo-img:nth-of-type(3) {
  width: 417rem;
  top: 1609rem;
  left: -63rem;
  z-index: -1;
}

.promo-cards-section {
  background-color: white;
  display: flex;
  justify-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 50rem;
  border-radius: 28rem;
  padding: 40rem 10rem;
  width: 1360rem;
  height: 690rem;
  margin-bottom: 80rem;
}

.promo-cards-section .title_h3 {
  text-align: center;
  max-width: 902rem;
}

.promo-cards {
  display: flex;
  position: relative;
}

.promo-card {
  border-radius: 28rem;
  padding: 28rem;
  width: 300rem;
  height: 302rem;
  position: absolute;
}

.promo-card:nth-of-type(1) {
  left: -420rem;
  box-shadow: inset -5rem -5rem 30rem 0 rgba(169, 222, 130, 0.3), inset 5rem 5rem 30rem 0 rgba(169, 222, 130, 0.3);
  transform: rotate(-2deg);
  background-color: white;
}

.promo-card:nth-of-type(2) {
  left: -160rem;
  box-shadow: inset -5rem -5rem 30rem 0 rgba(255, 225, 70, 0.3), inset 5rem 5rem 30rem 0 rgba(255, 225, 70, 0.3);
  transform: rotate(2deg);
  background-color: white;
}

.promo-card:nth-of-type(3) {
  left: 120rem;
  box-shadow: inset -5rem -5rem 30rem 0 rgba(249, 184, 219, 0.3), inset 5rem 5rem 30rem 0 rgba(249, 184, 219, 0.3);
  transform: rotate(-2deg);
  background-color: white;
}

.promo-card img {
  height: 137rem;
  margin-top: 40rem;
  margin-left: 70rem;
}

.promo-card:nth-of-type(2) img {
  margin-top: 60rem;
  transform: rotate(2deg);
}

.promo-card:nth-of-type(1) img {
  margin-top: 60rem;
  transform: rotate(-2deg);
}

.promo-form-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.promo-form-section .title_h2 {
  max-width: 717rem;
  text-align: center;
  margin-bottom: 20rem;
}

.promo-form-section .text_m {
  margin-bottom: 40rem;
  color: var(--grey);
}

.promo-form-section form input {
  background-color: white;
  color: var(--dark-grey);
}

.promo-form-section form {
  margin-bottom: 40rem;
}

.promo-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-form-section .button {
  color: white;
}

a.promo-nav-item {
  color: var(--dark-grey);
}

.footer-img, .hover-img {
  transition: 0.5s ease;
}

.footer-img:hover, .hover-img:hover {
  scale: 1.1;
  transform: rotate(2deg);
}
.article {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.article-card {
  display: flex;
  justify-content: space-between;
  width: 1360rem;
  height: 500rem;
  padding: 28rem;
  background-color: white;
  border-radius: 28rem;
  margin-bottom: 80rem;
}

.article-card-cover {
  width: 644rem;
}

.article-card-info {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}

.article-tags-container {
  display: flex;
  align-items: center;
  gap: 8rem;
}

.article-tag {
  display: inline-block;
  border-radius: 24rem;
  padding: 8rem 12rem;
  height: 33rem;
}

.article-tag:nth-of-type(1) {
  background-color: var(--dark-grey);
}

.article-tag:nth-of-type(2) {
  color: var(--dark-grey);
  background-color: var(--light-grey);
}

.article-tag:nth-of-type(3) {
  color: var(--dark-grey);
  background-color: var(--light-grey);
}

.article-tag:nth-of-type(1) .text_s {
  color: white;
}

.article-tag:nth-of-type(2) .text_s {
  color: var(--dark-grey);
}

.article-tag:nth-of-type(3) .text_s {
  color: var(--dark-grey);
}

.article-card-info .title_h2 {
  max-width: 648rem;
}

.share-links {
  display: flex;
  gap: 8rem;
}

.share-container  {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}

.article-content {
  display: flex;
  justify-content: space-between;
  width: 1360rem;
  margin-bottom: 96rem;
}

.article-text-container {
  max-width: 830rem;
  margin-bottom: 64rem;
}

.article-text-container p, li, a.text_l {
  color: var(--grey);
}

.article-text-container .title_h2 {
  margin-bottom: 24rem;
}

.article-text-container p {
  margin-bottom: 12rem;
}

.article-text-container ul{
  list-style-type: disc;
  padding-left: 20rem;
}

.article-text-container ul li {
  margin-bottom: 12rem;
}

.article-menu {
  position: sticky;
  top: 94rem;
  width: 444rem;
  height: 248rem;
  padding: 28rem;
  background-color: white;
  border-radius: 24rem;
}

.article-menu .title_h4 {
  margin-bottom: 16rem;
}

.article-menu a.text_m li {
  color: var(--dark-grey);
  text-decoration: underline;
  text-underline-offset: 5rem;
  margin-bottom: 12rem;
}

.article-menu ol {
  list-style-type: decimal;
  padding-left: 20rem;
}

.article-test-section {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 28rem;
  padding: 24rem 40rem;
  width: 899rem;
  height: 273rem;
  background-color: white;
  margin-bottom: 120rem;
}

.article-test-container {
  display: flex;
  gap: 48rem;
}

.article-test-container img {
  width: 166rem;
  transform: rotate(-10deg);
}

.article-test-block .title_h3 {
  max-width: 582rem;
  margin-bottom: 24rem;
}

.article-test-block .button {
  width: 222rem;
  height: 69rem;
}
@media screen and (max-width: 1280px) {
  html {
    font-size: calc(1vw / 10.2);
  }
  .prelaunch-nav {
    margin-bottom: 39rem;
  }
  p.prelaunch-nav-item {
    line-height: 100%;
  }
  .prelaunch-container {
    width: 949rem;
    height: 1205rem;
    margin-bottom: 40rem;
    padding-top: 278rem;
  }
  .prelaunch-container h1 {
    max-width: 809rem;
    margin-bottom: 45rem;
  }
   .prelaunch-container p {
    margin-bottom: 60rem;
    max-width: 523rem;
   }
  .input-container {
    flex-direction: column;
    gap: 10rem;
  }
  .prelaunch-form-input, .prelaunch-form-btn {
    border-radius: 51rem;
    padding: 19rem 32rem;
    width: 400rem;
    height: 71rem;
    font-size: 23rem;
  }
  .social-links {
    gap: 8rem;
  }
  .dd-character:nth-of-type(1) {
    width: 125.6rem;
    height: 125.6rem;
    rotate: 23deg;
    top: 47rem;
    left: 708rem;
  }
  .dd-character:nth-of-type(2) {
    width: 173rem;
    height: 180rem;
    top: 33rem;
    left: 37rem;
  }
  .dd-character:nth-of-type(3) {
    width: 246rem;
    height: 246rem;
    top: 881rem;
    left: 588rem;
    rotate: 23deg;
  }
  .dd-character:nth-of-type(4) {
    width: 130rem;
    height: 130rem;
    top: 935rem;
    left: 80rem;
  }

  /* PAGE 404 */

  .page-404 {
    width: 944rem;
    height: 713rem;
  }

  .img-404:first-of-type {
    position: absolute;
    width: 126rem;
    top: 228rem;
    left: 19rem;
    transform: rotate(-5deg);
  }

  .img-404:last-of-type {
    position: absolute;
    width: 170rem;
    top: 492rem;
    left: 691rem;
    transform: rotate(30deg);
  }

}

@media screen and (max-width: 780px) {
  html {
    font-size: calc(1vw / 3.7);
  }

  .space-hidden {
    display: block;
  }

  .prelaunch-nav {
    gap: 40rem;
    margin-bottom: 23rem;
    padding-top: 30rem;
  }

  p.prelaunch-nav-item {
    font-size: 28rem;
    line-height: 100%;
    letter-spacing: 0.02em;
  }

  a.prelaunch-nav-item {
    font-size: 18rem;
    line-height: 130%;
  }

  .prelaunch-container {
    width: 344rem;
    height: 573rem;
    border-radius: 24rem;
    margin-bottom: 27rem;
    padding-top: 28rem;
    overflow: hidden;
  }

  .prelaunch-container h1 {
    max-width: 312rem;
    margin-bottom: 24rem;
  }
  .prelaunch-container p {
    margin-bottom: 40rem;
   }
  .title_h1 {
    font-size: 28rem;
    line-height: 100%;
    letter-spacing: 0.02em;
  }

  .text_l {
    font-size: 18rem;
    line-height: 130%;
  }

  .input-container {
    flex-direction: column;
    gap: 8rem;
  }

  .prelaunch-form-input, .prelaunch-form-btn {
    padding: 15rem 25rem;
    width: 312rem;
    height: 56rem;
    font-size: 18rem;
  }

  .social-link-img {
    width: 56rem;
    height: 56rem;
  }

  .social-links {
    gap: 8rem;
  }

  .dd-character:nth-of-type(1) {
    width: 68rem;
    height: 68rem;
    top: 98rem;
    left: 267rem;
  }

  .dd-character:nth-of-type(2) {
    width: 107rem;
    height: 112rem;
    top: 464rem;
    left: -6.18rem;
  }

  .dd-character:nth-of-type(3) {
    width: 132rem;
    height: 132rem;
    top: 449.8rem;
    left: 238rem;
  }

  .dd-character:nth-of-type(4) {
    width: 65rem;
    height: 65rem;
    top: 112rem;
    left: 7rem;
  }

  /* ARTICLES */

  .desktop-nav, .desktop-search {
    display: none;
  }

  .mobile-nav {
    display: flex;
    align-items: center;
    gap: 8rem;
  }

  .mobile-nav-items {
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80rem;
    width: 343rem;
  }

  .articles-cover img:first-of-type {
    width: 146rem;
    top: 345rem;
    left: 19rem;
  }

  .articles-cover img:last-of-type {
    width: 164rem;
    top: 198rem;
    left: 187rem;
  }

  .search-button-mobile {
    border: none;
    border-radius: 100rem;
    background-color: var(--dark-grey);
    background-image: url(images/01846f1d6b55cedac496.svg);
    width: 48rem;
    height: 48rem;
    background-size: 18rem;
    background-repeat: no-repeat;
    background-position: center;
  }

  .hamburger {
    width: 48rem;
    height: 48rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    background-color: var(--dark-grey);
    border-radius: 40rem;
  }

  .hamburger .line{
    width: 25rem;
    height: 2rem;
    background-color: var(--light-grey);
    display: block;
    transition: all 0.3s ease-in-out;
  }

  .hamburger.is-active .line:nth-child(2){
    opacity: 0;
  }

  .hamburger.is-active .line:nth-child(1){
    transform: translateY(6rem) translateX(1rem) rotate(45deg);
  }

  .hamburger.is-active .line:nth-child(3){
    transform: translateY(-6rem) translateX(1rem) rotate(-45deg);
  }

  .dropdown-menu {
    display: none;
  }

  .dropdown-menu.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28rem;
    position: absolute;
    top: 125rem;
    background-color: white;
    width: 100%;
  }

  .navigation {
    background-color: transparent;
    box-shadow: none;
    padding: 0 16rem;
    margin-bottom: 44rem;
  }

  .navigation.opened {
    background-color: white;
    z-index: 10;
  }

  .navigation .title_h4 {
    font-size: 28rem;
    line-height: 150%;
  }

  .articles-cover .title_h1 {
    font-size: 36rem;
    margin-bottom: 24rem;
  }

  .articles-cover .text_l {
    max-width: 344rem;
    margin-bottom: 284rem;
  }

  .articles-category {
    width: 344rem;
    height: 207rem;
    padding: 16rem;
  }

  .articles-category .text_m {
    max-width: 200rem;
  }

  .articles-category .title_h5 {
    font-size: 24rem;
    margin-bottom: 8rem;
  }

  .articles-category .health-img {
    top: 41rem;
    left: 212rem;
    width: 110rem;
  }

  .articles-category .finance-img {
    top: 39rem;
    left: 219rem;
    width: 101rem;
  }

  .articles-category .routine-img {
    top: 44rem;
    left: 194rem;
    width: 124rem;
  }

  .articles-category .career-img {
    top: 49rem;
    left: 212rem;
    width: 105rem;
  }

  .articles-category .docs-img {
    top: 49rem;
    left: 216rem;
    width: 96rem;
  }

  .articles-category .lifestyle-img {
    top: 48rem;
    left: 217rem;
    width: 105rem;
  }

  .latest-articles .title_h1 {
    margin-bottom: 24rem;
  }

  .latest-articles-container {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .latest-article {
    width: 346rem;
    height: 479rem;
  }

  .latest-article img {
    height: 250rem;
  }

  .footer-container {
    width: 344rem;
    height: 762rem;
    padding: 28rem 16rem 0 16rem;
    flex-direction: column;
    gap: 0;
  }

  .footer-form .title_h4 {
    font-size: 28rem;
    text-align: center;
  }

  .footer-text-m {
    margin-bottom: 20rem;
    text-align: center;
    color: var(--grey);
  }

  .footer-form .social-links {
    justify-content: center;
    margin-bottom: 12rem;
  }

  .footer-creators-container {
    flex-direction: column;
    gap: 12rem;
    justify-content: center;
    align-items: center;
  }

  .footer-creators .text_l_semibold {
    text-align: center;
  }

  .footer-img:nth-of-type(1) {
    width: 120rem;
    top: 353rem;
    left: 32rem;
  }

  .footer-img:nth-of-type(2) {
    width: 55rem;
    top: 315rem;
    left: 139rem;
  }

  .footer-img:nth-of-type(3) {
    width: 93rem;
    top: 350rem;
    left: 229rem;
  }

  .footer-form form {
    margin-bottom: 200rem;
  }

  /* PAGE 404 */

  .page-404 {
    width: 344rem;
    height: 616rem;
  }

  .container-404 {
    margin-bottom: 46rem;
  }

  .main-img-404 {
    width: 107rem;
  }

  .number-4 {
    font-size: 152rem;
  }

  .page-404 .title_h2 {
    margin-bottom: 16rem;
    font-size: 36rem;
  }

  .page-404 .text_l {
    margin-bottom: 40rem;
    max-width: 306rem;
    font-size: 14rem;
  }

  .page-404 .button {
    height: 48rem;
  }

  .img-404:first-of-type {
    display: none;
  }

  .img-404:last-of-type {
    display: none;
  }

  /* ABOUT US */

  .heading-container .title_h1 {
    font-size: 36rem;
  }

  .creators-portraits img {
    height: 136rem !important;
  }

  .heading-container .text_l {
    max-width: 344rem;
  }

  .creators-portraits ~ .title_h3 {
    font-size: 18rem;
    max-width: 316rem;
    font-family: 'Onest', Arial, Helvetica, sans-serif;
    font-weight: 600;
  }

  .social-links-container {
    flex-direction: column;
  }

  .social-link-block {
    width: 344rem;
    height: 270rem;
  }

  .social-link-block img {
    width: 80rem;
  }

  .social-link-block .title_h2 {
    font-family: 'Onest', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24rem;
  }

.about-character:nth-of-type(1) {
    width: 152rem;
    top: 585rem;
    left: -40rem;
  }

.about-character:nth-of-type(2) {
    width: 192rem;
    top: 187rem;
    left: 205rem;
    transform: rotate(-15deg);
  }

  /* ARTICLE */

  .article-card {
    flex-direction: column;
    padding: 16rem;
    width: 344rem;
    height: 591rem;
    gap: 12rem;
  }

  .article-tags-container {
    flex-wrap: wrap;
  }

  .article-card-info {
    order: 2;
    gap: 28rem;
  }

  .article-card-cover {
    width: 312rem;
  }

  .article-card-info .title_h2 {
    font-size: 28rem;
    max-width: 312rem;
  }

  a.share-link img {
    width: 56rem;
  }

  .article-content {
    flex-direction: column;
    width: 344rem;
    gap: 80rem;
    margin-bottom: 80rem;
  }

  .article-menu {
    position: static;
    order: 1;
    padding: 16rem;
    width: 344rem;
    height: 252rem;
  }

  .article-text {
    order: 2;
  }

  .article-menu .title_h4 {
    font-size: 28rem;
  }

  .article-menu a.text_m li {
    font-weight: 600;
    font-size: 18rem;
  }

  .article-text-container .title_h2 {
    font-size: 28rem;
  }

  .article-text-container p, .text_l_semibold {
    font-size: 18rem;
  }
  .article-test-section {
    padding: 16rem;
    width: 344rem;
    height: 368rem;
  }
  .article-test-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48rem;
  }

  .article-test-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .article-test-block .title_h3 {
    font-size: 28rem;
    text-align: center;
  }

  .article-test-block .button {
    padding: 10rem 24rem;
    width: 155rem;
    height: 56rem;
  }

  .article-test-container img {
    width: 100rem;
  }

  /* PROMO  */

  .promo-heading-section .title_h1 {
    margin-top: 109rem;
    margin-bottom: 150rem;
  }

  .promo-heading-section .title_h2 {
    font-size: 28rem;
  }

  .promo-img:nth-of-type(1) {
    width: 83rem;
    top: 0;
    transform: rotate(-30deg);
  }
  .promo-img:nth-of-type(2) {
    width: 172rem;
    top: 206rem;
    left: 231rem;
    transform: rotate(5deg);
  }
  .promo-img:nth-of-type(3) {
    width: 113rem;
    top: 1666rem;
    left: 94rem;
  }

  .help-container {
    flex-direction: column;
    width: 344rem;
  }

  .help-item {
    width: 344rem;
    height: 381rem;
  }

  .help-item img {
    width: 312rem;
  }

  .promo-cards-section .title_h3 {
    font-size: 24rem;
    max-width: 324rem;
    line-height: 120%;
    font-family: 'Onest' Arial, Helvetica, sans-serif;
  }

  .promo-cards-section{
    width: 344rem;
    height: 1278rem;
  }

  .promo-cards {
    flex-direction: column;
    gap: 10rem;
  }

  .promo-card {
    position: static;
  }

  .promo-form-section .title_h2 {
   font-size: 28rem;
  }

  .promo-form-section .text_m {
    text-align: center;
    max-width: 264rem;
  }

  .promo-form-section form .prelaunch-form-input {
    width: 312rem;
    height: 56rem;
    margin-bottom: 0;
  }

  .promo-form-section form .button {
    color: white;
    height: 56rem;
    margin-bottom: 0;
  }
  .promo-form-section {
    margin-bottom: 0;
  }
  .promo-form-section .input-container {
    margin-bottom: 0;
  }

  a.promo-nav-item {
    font-size: 28rem;
  }
}