@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');

@font-face {
	font-family: 'Radiance';
	src: url('https://media.scrybe-app.com/assets/fonts/radiance.woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Reaver';
	src: url('https://media.scrybe-app.com/assets/fonts/reaver.woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Reaver';
	src: url('https://media.scrybe-app.com/assets/fonts/reaver_semibold.woff');
	font-weight: bold;
	font-style: normal;
}





html {
  font-family: 'Quicksand', Avenir, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 100%;
  background-color: #19191c;
}

html, body, #app {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: overlay;
  overscroll-behavior: none;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, span, a, li {
  margin: 0;
  padding: 0;
  color: #fff;
}

a {
  text-decoration: none;
}

.spacer.h5 {
	height: 5rem;
}





nav {
	position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #111;
  z-index: 99;
}

nav .buttons a {
	padding: 0.5rem 1.5rem;
	border-radius: calc(1em + 0.25rem);
	color: neutral(90%);
	background-color: #242428;
	font-family: 'Quicksand', Avenir, Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	user-select: none;
	transition: color 0.15s, background 0.15s;
}

nav .buttons a:not(:last-child) {
  margin-right: 1rem;
}

nav .buttons a:hover {
  background-color: #60606c;
}

nav .buttons a.creation {
  color: #ec6e4d;
  &:hover {
    background-color: #c34d2e;
  }
}

nav .buttons a.community {
  color: #51d24b;
  &:hover {
    background-color: #2c9634;
  }
}

nav .buttons a.demo {
  color: #f9b94d;
  &:hover {
    background-color: #d09a40;
  }
}

nav .buttons a.pricing {
  color: #40ddc0;
  &:hover {
    background-color: #28ac8d;
  }
}

nav .buttons a.help {
  color: #7266ff;
  &:hover {
    background-color: #5b4dff;
  }
}

nav .buttons a:hover {
  color: #fff;
}

nav .mobile-menu-button {
  position: absolute;
  bottom: -3.75rem;
}

nav .logo-container {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.5rem;
  transition: opacity 0.3s;
  z-index: 99;
}

nav .logo-container .logo {
  height: 48px;
}

nav .logo-container:hover {
  opacity: 0.6;
}





.article-menu {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.article-menu button.back-button {
	padding: 0.5rem 1.5rem;
	color: #999;
	background-color: transparent;
	/* background-color: #000; */
	border: 0;
	border-radius: 4px;
	font-family: 'Radiance';
	font-size: 1rem;
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
}
.article-menu button.back-button:hover {
	color: #fff;
}





footer {
    position: relative;
    width: 100vw;
    height: 260px;
    background-color: #000;
    overflow: hidden;
    z-index: 99;
}


footer .logo-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0 4rem;
	transition: opacity 0.3s;
}
footer .logo-container:hover {
	opacity: 0.6;
}

footer .logo-container .logo {
	height: 100px;
}

footer .links {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 4rem;
}

footer .links .list {
	padding: 0 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

footer h4 {
	margin-bottom: 1rem;
	font-weight: 300;
}

footer a {
	margin: 0.4rem 0;
	color: #7381ff;
	font-size: 0.9rem;
	font-weight: 600;
}
footer a:hover {
	cursor: pointer;
	color: #66f1d0;
}





.blog-home {
	width: 100%;
	max-width: 1400px;
	margin: 2rem auto;
	margin-top: 4rem;
	margin-bottom: 8rem;
	padding: 2rem;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1.75em;
	letter-spacing: -0.1px;
	font-style: normal;
}

.blog-home .colorful-title {
	position: relative;
	text-align: center;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 400;
    background-image: url(https://media.scrybe-app.com/assets/text_background_01.jpeg);
    background-position: 40% 40%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-transform: uppercase;
}

.blog-menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 2rem;
}

a.blog-article {
	display: flex;
	flex-shrink: 0;
	width: 100%;
	max-width: 540px;
	height: 160px;
	margin: 1.25rem;
	border-radius: 8px;
	background-color: #12172f;
	overflow: hidden;
	box-shadow: 0 8px 32px -12px rgba(0,0,0,.65);
	cursor: pointer;
}
a.blog-article:hover {
	background-color: #19203c;
	/* background-color: #121317; */
}
a.blog-article:hover .blog-article-text h1 {
	color: #66f1d0 !important;
}

.blog-menu a.blog-article img {
	flex-grow: 0;
	flex-shrink: 0;
	width: 160px;
	height: 160px;
	object-fit: cover;
	/* transition: filter 0.15s; */
}
a.blog-article:hover img {
	filter: brightness(1.1) saturate(1.1);
}

.blog-menu a.blog-article .blog-article-text {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	padding-left: 2rem;
	/* background-image: url(https://media.scrybe-app.com/assets/elements/writings_card.png); */
}
.blog-menu a.blog-article .blog-article-text::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url(https://media.scrybe-app.com/assets/bg_pattern_1.jpg); */
    background: url(https://images.unsplash.com/photo-1621791556472-4d279c54705d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTF8fGluayUyMHBhdHRlcm58ZW58MHx8MHx8fDA%3D);
    background-size: 150%;
	filter: saturate(0) brightness(2) contrast(1);
    /* mix-blend-mode: normal; */
    opacity: 0.25;
	z-index: 0;
}

.blog-menu a.blog-article .blog-article-text h1 {
	color: #7381ff;
	font-family: 'Radiance';
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.25px;
	z-index: 9;
}

.blog-menu a.blog-article .blog-article-text .blog-article-date {
	margin: 0;
	color: #fff;
	font-weight: 400;
	opacity: 0.35;
	z-index: 9;
}

.blog-menu a.blog-article .blog-article-text .blog-article-description {
	overflow: hidden;
	z-index: 9;
}

.blog-menu a.blog-article .blog-article-text .blog-article-description p {
	color: #fff;
	opacity: 0.5;
	font-family: 'Radiance';
	font-size: 0.85rem;
	line-height: 1.35em;
	z-index: 9;
}





.blog-background-left, .blog-background-right {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background-repeat: repeat-y;
    background-size: 100%;
    background-position-y: top;
    opacity: 0.25;
    z-index: -1;
}

.blog-background-left {
	left: 0;
	background-image: url(https://media.scrybe-app.com/assets/paintbrush_background_left.png);
	background-position-x: left;
}

.blog-background-right {
	right: 0;
	background-image: url(https://media.scrybe-app.com/assets/paintbrush_background_right.png);
	background-position-x: right;
}