:root {
	--main-color-light: #f8f5f2;
	--main-color-darker-light: #f3efe9;
	--main-color-dark: #281306;
	--accent-color-light: #dbd3cd;
	--accent-color-dark: #b89d8c;
	--pure-black: #000;
	--pure-white: #fff;
	--main-font-regular: 'Inter';
	--main-font-bold: 'Inter Bold';
	--main-font-italic: 'Inter Italic';
	--main-font-bold-italic: 'Inter Italic Bold';
	--h1-mobile-size: 2em;
	--h1-desktop-size: 4.5em;
	--h2-mobile-size: 1.8em;
	--h2-desktop-size: 2.75em;
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Italic';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Bold';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Italic Bold';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/inter-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('./fonts/inter-v20-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  src: url('./fonts/inter-v20-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  src: url('./fonts/inter-v20-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* base  */

body {
	font-size: 18px;
	background-color: var(--main-color-light);
    overflow-x: hidden;

    @media screen and (min-width: 768px) {
        overflow-x: initial;
    }
}

/* text  */

.container-fluid h1 {
	--fs: var(--h1-mobile-size);
	--icon-size: 70px;
	--url: url('./assets/icons/svg/1.svg');
	font-family: var(--main-font-regular);
	font-size: var(--fs);
	color: var(--main-color-dark);

	text-transform: uppercase;
	font-weight: 100;
	@media screen and (min-width: 768px) {
		--fs: var(--h1-desktop-size);
	}
}

h2 {
	--fs: var(--h2-mobile-size);
	font-family: var(--main-font-regular);
	font-size: var(--fs);
	text-transform: uppercase;
	font-weight: bold;
	color: var(--main-color-dark);
	@media screen and (min-width: 768px) {
		--fs: var(--h2-desktop-size);

	}
}

p {
	font-family: var(--main-font-regular);
	font-size: 1em;
}

.icon-1{
	--url: url('./assets/icons/svg/1.svg');
}

.icon-2{
	--url: url('./assets/icons/svg/2.svg');
}

.icon-3{
	--url: url('./assets/icons/svg/3.svg');
}

.icon-right{
	--icon-position: calc(var(--icon-size)/var(--amount, -0.8));
	position: relative;
	margin-top: calc(var(--icon-position)*-0.90);
	&::before{
		position: absolute;
		top: var(--icon-position);

	}
	
	

	@media screen and (min-width: 768px){
		--amount: -20;
		&::before{
			right: 0;
			top: var(--icon-position);
		}
	}
}

.before-icon {
	--icon-size: 70px;
	&::before {
		content: '';
		background-image: var(--url);
		background-size: contain;
		background-repeat: no-repeat;
		width: var(--icon-size, 40px);
		height: var(--icon-size, 40px);
		margin-right: 10px;
		margin-bottom: 0.6em;
		display: inline-block;
	}

	&:hover::before {
				animation: spin 0.7s 1 forwards ease-in-out;
	}
}

.before-icon::before {
	@media (min-width: 768px) {
		margin-bottom: 0.2em;
	}
}

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

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

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

.text-justify {
	text-align: justify;
}

.text-bold {
	font-weight: bold;
}
.text-bolder {
	font-weight: bolder;
}

/* modifiers */

.container-fluid {
	padding: 0rem;
}

.upperbold {
	text-transform: uppercase;
	font-weight: bold;
}

.flavor-icon {
	max-width: 400px;
	max-height: 400px;
}

.desktop-only {
	display: none;
}

hr.strong{
     border: 1px solid var(--accent-color-dark);
     opacity: 1;
}

.row > div, .row > section, .row:has(section+div), .cont {
  max-width: 1400px;
  
  @media screen and (min-width: 1400px) {
        &:not(.upperbold, .clean){
            margin-inline: auto;
        }
    }
}

html, body {
	overflow-x: hidden;
}

.column-important{
    flex-direction: column !important;
    gap: 0 !important;
}

/* preorder btn */

.preorder-btn {
	background-color: var(--accent-color-light);
	border-radius: 20px;
	color: var(--main-color-dark);
	border: none;
	font-size: 19px;
	padding: 0.375rem 1rem;

	&:hover {
		background-color: var(--main-color-dark);
		color: var(--accent-color-light);
	}

	&:disabled {
		background-color: var(--accent-color-light);
		color: rgb(148, 143, 143);
	}
}

.preorder-form {
	animation: fadeIn 0.2s 1 forwards ease-in-out;
}

/* background */

nav {
	background-color: var(--main-color-light);
}

.navbar:has(.navbar-toggler[aria-expanded="true"]) {
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
}

.navbar-nav a {
	font-size: 20px;
	color: var(--main-color-dark);
}

.navbar-nav a:hover,
.navbar-nav a:focus {
	color: var(--accent-color-dark);
}

.highlight-bg {
	background-color: var(--main-color-darker-light);
}

.cont{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        div:not(:has(.upperbold, .social-links)), img{
            margin: auto;
        }

        img{
            flex-basis: 1;
        }
        @media screen and (min-width: 768px) {
            flex-direction: row;
        }
    }


.cover-img {
	width: 410px;
	@media screen and (min-width: 1440px) {
		width: 500px;
	}
}

/* images */


.quote-block {
&:has(+.quote-block){
    margin-inline-end: 3rem;
}
    /* @media screen and (min-width: 768px) { */
    width: 100%;

    @media screen and (min-width: 960px) {
         width: 33.3%;
    }
}

.quote-img {
    display: flex;
    img {
        margin-inline: auto;
        border: 2px solid var(--accent-color-dark);

        @media screen and (min-width: 960px) {
            margin: 0;
        }
    }
}

.square-portrait,
.quote-img img {
    --size: 260px;
    height: var(--size);
    width: var(--size);
    object-fit: cover;
    max-width: none;

	
}

.quote-block:nth-of-type(2) .quote-img img {
  object-fit: cover;
  object-position: 25% 25%;
}

.quote-block:nth-of-type(3) .quote-img img {
  object-fit: cover;
  object-position: 75% 25%;
}

/* .row.px-5 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: auto;
} */




main>div{
	@media (min-width: 1200px) {
		gap: 5rem;
	}
    
}

/* footer */

footer {
	color: var(--accent-color-dark);

	& h2 {
		font-size: 2em;
		color: var(--accent-color-dark);
	}

	& p {
		margin-bottom: 0em;
	}
}

.btn.btn-outline {
	color: var(--accent-color-dark);
	text-decoration: none;
	/* padding: 0.5rem 1rem; */
	border-radius: 50px;
	outline: 2px solid var(--accent-color-dark);
	transition: background-color 0.2s;
	max-width: 325px;
	/* margin-bottom: 2rem; */
    display: inline-flex;
    justify-content: space-around;
    flex-flow: column wrap;
    @media screen and (min-width: 768px) {
        flex-direction: row;
    }

	&:hover,
	&:focus {
		background-color: var(--accent-color-dark);
		color: var(--main-color-light);
	}
}

.social-links a img {
    max-width: 50px;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--accent-color-dark);

	
}

@media (min-width: 992px) {
	.navbar-nav {
		margin: 1rem 0;

		a {
			margin-right: 2rem;
		}
	}

	.desktop-only {
		display: block;
	}

	.mobile-only {
		display: none;
	}

	.navbar:has(.navbar-toggler[aria-expanded="true"]) {
	box-shadow: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 100%;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}