/*----------------------------------------------
*
* [Default Stylesheet]
*
* Theme    : Blogify - Personal Blog WordPress Theme
* Version  : 1.0
* Author   : Themeland
* Support  : hridoy1272@gmail.com
* 
----------------------------------------------*/

/*----------------------------------------------

[ALL CONTENTS]

1. Root
2. Button

----------------------------------------------*/

/*----------------------------------------------
1. Root
----------------------------------------------*/

/* #region Root */

:root {
	--tl-primary-font: "Urbanist", sans-serif;
	--tl-secondary-font: "Urbanist", sans-serif;

	--tl-h1-size: 6rem;
	--tl-h1-weight: 500;

	--tl-h2-size: 4rem;
	--tl-h2-weight: 500;

	--tl-p-size: 1.2rem;
	--tl-p-weight: 400;

	--tl-header-bg-color: #030712;
	--tl-nav-brand-height: 50px;
	--tl-nav-item-color: #030712;
	--tl-hero-bg-color: #030712;

	--tl-color-primary: #8133F1;
	--tl-color-primary-rgb: 129, 51, 241;
	--tl-color-primary-50: rgba(129, 51, 241, 0.5);
	--tl-color-secondary: #361565;
	--tl-color-secondary-50: rgb(54, 21, 101, 0.5);

	--tl-color-white: white;
	--tl-color-black: #030712;
	--tl-color-black-rgb: 3, 7, 18;
	--tl-color-black-light: color-mix(in srgb, var(--tl-color-black) 98%, white);
	--tl-color-overlay: var(--tl-color-black);
	--tl-color-neutral: color-mix(in srgb, var(--tl-color-black) 50%, white);
	--tl-color-grey: color-mix(in srgb, var(--tl-color-black) 65%, white);
	--tl-color-grey-light: color-mix(in srgb, var(--tl-color-black) 50%, white);
	--tl-color-valid: #007a4d;
	--tl-color-invalid: #e34f4f;

	--tl-color-selection: color-mix(in srgb, var(--tl-color-primary) 20%, transparent);
	--tl-placeholder-color: #6a6770;
	--tl-link-color: inherit;
	--tl-link-hover-color: var(--tl-color-primary);
	--tl-border-color: color-mix(in srgb, var(--tl-color-neutral) 16%, transparent);

	--tl-button-color: var(--tl-color-black-light);
	--tl-button-color-grey: color-mix(in srgb, var(--tl-color-black-light) 75%, white);
	--tl-button-hover-color: var(--tl-color-primary);

	--tl-fill-color: color-mix(in srgb, var(--tl-color-neutral) 8%, transparent);

	--tl-border-solid: solid;
	--tl-border-dashed: dashed;
	--tl-border-width: 1px;
	--tl-border-width-md: 2px;
	--tl-border-radius: 1rem;
	--tl-border-radius-sm: calc(var(--tl-border-radius) / 2);
	--tl-border-radius-md: calc(var(--tl-border-radius) * 2);
	--tl-border-radius-lg: calc(var(--tl-border-radius) * 2.5);

	--tl-icon-size: 1.4em;
	--tl-icon-size-sm: 1.2em;
	--tl-icon-size-md: 1.6em;

	--tl-circle: 3.5rem;
	--tl-circle-sm: 3rem;
	--tl-circle-xs: 2.5rem;
	--tl-circle-lg: 4rem;

	--tl-button-height: 2.75rem;
	--tl-button-height-sm: 2.25rem;
	--tl-button-height-md: 3.25rem;

	--tl-button-padding: 1.25rem;
	--tl-button-padding-sm: 1rem;
	--tl-button-padding-md: 1.5rem;

	--tl-spacer: 3vh;
	--tl-spacer-05: 0.25rem;
	--tl-spacer-1: 0.5rem;
	--tl-spacer-2: 0.75rem;
	--tl-spacer-3: 1rem;
	--tl-spacer-4: 1.25rem;
	--tl-spacer-5: 1.5rem;
	--tl-spacer-6: 1.75rem;
	--tl-spacer-7: 2rem;
	--tl-spacer-8: 2.25rem;
	--tl-spacer-9: 2.5rem;
	--tl-spacer-10: 2.75rem;
	--tl-spacer-negative: calc(var(--tl-spacer) * (-1));

	--tl-gap: 0.5em;
	--tl-gap-sm: 0.25em;
	--tl-gap-md: 1em;

	--tl-cursor-default: default;
	--tl-cursor-pointer: pointer;
	--tl-cursor-help: help;

	--tl-transition-function: cubic-bezier(.645, .045, .355, 1);
	--tl-transition-duration: 0.35s;
	--tl-transition-duration-faster: 0.2s;
	--tl-infinit-scrolling-transition-duration: 45s;
	--tl-transform-scale: scale3d(1.06, 1.06, 1.06);

	--tl-font-size-sm: 0.95em;
	--tl-font-size-xs: 0.9em;
	--tl-font-size-md: 0.5rem;
	--tl-font-size-lg: 1.05em;
	--tl-font-size-caption: 0.9rem;
	--tl-font-size-menu: 1rem;
	--tl-font-size-submenu: 0.98em;
	--tl-font-size-md-titles: 1.5em;

	--tl-text-weight-normal: 400;
	--tl-text-weight-medium: 500;
	--tl-text-weight-semi-bold: 600;
	--tl-text-weight-bold: bold;
	--tl-text-line-heigth-sm: 1.4;

	--tl-body-color: var(--tl-color-black-light);
	--tl-body-color-grey: color-mix(in srgb, var(--tl-body-color) 66%, var(--tl-color-white));
	--tl-body-color-grey-light: color-mix(in srgb, var(--tl-body-color) 51%, var(--tl-color-white));
	--tl-body-font-size: 1.2rem;
	--tl-body-font-weight: 400;
	--tl-body-line-height: 1.6;

	--tl-title-color: var(--tl-color-black);

	--tl-primary-t-color: var(--tl-color-black);
	--tl-primary-t-color-2: #B6BCC6;
	--tl-secondary-t-color: #f9f9f9;
	--tl-secondary-t-color-2: #a6abb4;
	--tl-primary-p-color: #353941;
	--tl-secondary-p-color: #909DAC;
	--tl-primary-b-color: #f5f5f5;
	--tl-secondary-b-color: #8b8d92;
	--tl-primary-l-color: rgba(152, 152, 152, 0.15);
	--tl-secondary-l-color: rgba(255, 255, 255, 0.15);

	--tl-box-shadow-color: rgba(9, 31, 67, 0.06);

	--tl-primary-bg-color: var(--tl-color-white);
	--tl-primary-bg-color-2: #e8eaed;
	--tl-primary-bg-color-3: #e5e5e5;

	--tl-secondary-bg-color: #111013;
	--tl-secondary-bg-color-2: #1C1B1E;
	--tl-secondary-bg-color-3: #191919;

	--tl-card-bg-color: #f4f3ff;
	--tl-button-color-dark: #565960;

	--tl-footer-bg-color: #000A1F;
}

/* #endregion Root */

/*----------------------------------------------
2. Button
----------------------------------------------*/

/* #region Button */

.button,
a.button,
.added_to_cart,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
	min-height: 3rem;
	padding: 0 1.25rem;
	background-color: var(--tl-button-color);
	background-image: none;
	border: 2px solid transparent;
	border-radius: var(--tl-border-radius-sm);
	font-size: 0.95em;
	font-weight: 600;
	color: var(--tl-color-white);
	text-decoration: none;
	cursor: var(--tl-cursor-pointer);
	transition: all var(--tl-transition-function) var(--tl-transition-duration);
}

.odd .button,
.odd a.button,
.odd .added_to_cart,
.odd button[type="submit"],
.odd input[type="submit"] {
	--button-color: var(--tl-button-color-dark);
}

.button:hover,
.button:active,
.button:focus,
a.button:hover,
a.button:active,
a.button:focus,
.added_to_cart:hover,
.added_to_cart:active,
.added_to_cart:focus,
button[type="submit"]:hover,
button[type="submit"]:active,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
	background-color: var(--tl-color-primary);
	color: var(--tl-color-white);
}

.button:focus,
.button:active,
a.button:focus,
a.button:active,
.added_to_cart:focus,
.added_to_cart:active,
button[type="submit"]:focus,
button[type="submit"]:active,
input[type="submit"]:focus,
input[type="submit"]:active {
	box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--tl-color-neutral) 15%, transparent);
}

.button svg,
a.button svg,
.added_to_cart svg,
button[type="submit"] svg,
input[type="submit"] svg {
	fill: currentColor;
}

.button.outlined,
a.button.outlined,
.added_to_cart.outlined,
button[type="submit"].outlined,
input[type="submit"].outlined {
	border-color: currentColor;
}

.odd .button.outlined,
.odd a.button.outlined,
.odd .added_to_cart.outlined,
.odd button[type="submit"].outlined,
.odd input[type="submit"].outlined {
	border-color: var(--tl-button-color-dark);
	color: var(--tl-color-white);
}

.button.outlined,
.button.text,
.button.flat,
a.button.outlined,
a.button.text,
a.button.flat,
.added_to_cart.outlined,
.added_to_cart.text,
.added_to_cart.flat,
button[type="submit"].outlined,
button[type="submit"].text,
button[type="submit"].flat,
input[type="submit"].outlined,
input[type="submit"].text,
input[type="submit"].flat {
	background-color: transparent;
	color: var(--tl-button-color);
}

.odd .button.text,
.odd a.button.text,
.odd .added_to_cart.text,
.odd button[type="submit"].text,
.odd input[type="submit"].text {
	color: var(--tl-color-white);
}

.button.outlined:hover,
.button.outlined:active,
.button.outlined:focus,
a.button.outlined:hover,
a.button.outlined:active,
a.button.outlined:focus,
.added_to_cart.outlined:hover,
.added_to_cart.outlined:active,
.added_to_cart.outlined:focus,
button[type="submit"].outlined:hover,
button[type="submit"].outlined:active,
button[type="submit"].outlined:focus,
input[type="submit"].outlined:hover,
input[type="submit"].outlined:active,
input[type="submit"].outlined:focus {
	border-color: currentColor;
}

.button.outlined:hover,
.button.outlined:active,
.button.outlined:focus,
.button.text:hover,
.button.text:active,
.button.text:focus,
.button.flat:hover,
.button.flat:active,
.button.flat:focus,
a.button.outlined:hover,
a.button.outlined:active,
a.button.outlined:focus,
a.button.text:hover,
a.button.text:active,
a.button.text:focus,
a.button.flat:hover,
a.button.flat:active,
a.button.flat:focus,
.added_to_cart.outlined:hover,
.added_to_cart.outlined:active,
.added_to_cart.outlined:focus,
.added_to_cart.text:hover,
.added_to_cart.text:active,
.added_to_cart.text:focus,
.added_to_cart.flat:hover,
.added_to_cart.flat:active,
.added_to_cart.flat:focus,
button[type="submit"].outlined:hover,
button[type="submit"].outlined:active,
button[type="submit"].outlined:focus,
button[type="submit"].text:hover,
button[type="submit"].text:active,
button[type="submit"].text:focus,
button[type="submit"].flat:hover,
button[type="submit"].flat:active,
button[type="submit"].flat:focus,
input[type="submit"].outlined:hover,
input[type="submit"].outlined:active,
input[type="submit"].outlined:focus,
input[type="submit"].text:hover,
input[type="submit"].text:active,
input[type="submit"].text:focus,
input[type="submit"].flat:hover,
input[type="submit"].flat:active,
input[type="submit"].flat:focus {
	color: var(--tl-color-primary);
}

.button.flat:hover,
.button.flat:active,
.button.flat:focus,
a.button.flat:hover,
a.button.flat:active,
a.button.flat:focus,
.added_to_cart.flat:hover,
.added_to_cart.flat:active,
.added_to_cart.flat:focus,
button[type="submit"].flat:hover,
button[type="submit"].flat:active,
button[type="submit"].flat:focus,
input[type="submit"].flat:hover,
input[type="submit"].flat:active,
input[type="submit"].flat:focus {
	background-color: var(--tl-fill-color);
}

.button.text,
a.button.text,
.added_to_cart.text,
button[type="submit"].text,
input[type="submit"].text {
	padding: 0;
	min-height: initial;
	border: 0;
	border-radius: var(--tl-border-radius-sm);
	box-shadow: 0 0 0 0.5rem transparent;
	font-size: 1em;
	transition-delay: 0s !important;
}

.button.text:hover,
.button.text:active,
.button.text:focus,
a.button.text:hover,
a.button.text:active,
a.button.text:focus,
.added_to_cart.text:hover,
.added_to_cart.text:active,
.added_to_cart.text:focus,
button[type="submit"].text:hover,
button[type="submit"].text:active,
button[type="submit"].text:focus,
input[type="submit"].text:hover,
input[type="submit"].text:active,
input[type="submit"].text:focus {
background-color: var(--tl-fill-color);
box-shadow: 0 0 0 0.6rem var(--tl-fill-color);
}

.blogify-align-left {
	text-align: left;
}

.blogify-align-right {
	text-align: right;
}

.blogify-align-center {
	text-align: center;
}

.blogify-align-justify .button {
	width: 100%;
}

.btn-smaller {
	padding: 12px 18px;
	font-size: 0.9rem;
}

.btn:hover .btn-text {
	-webkit-animation: MoveScaleUpInitial 0.25s forwards, MoveScaleUpEnd 0.25s forwards 0.25s;
	animation: MoveScaleUpInitial 0.25s forwards, MoveScaleUpEnd 0.25s forwards 0.25s;
}

/* #endregion Button */