@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


/* COLOR PRESET */
:root{
	--white-back-color: white;

	--red-back: rgb(167, 65, 65);
	--violent-back: rgb(120, 45, 157);
	--blue-back: rgb(69, 69, 176);
	--green-back: rgb(35, 135, 35);
}


/* REGURAL STUFF */
*{
	margin: 0rem;
	padding: 0rem;

	font-family: 'Lato', sans-serif;
	/* font-weight: 400; */
}
.special{
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: 800;
}

html{
	overflow-x:hidden;
	scroll-behavior: smooth;
}
body{
	overflow-x: hidden;
	font-size: 16px;
	color: rgb(80, 80,80)
}
h1.big{font-size: 300%;}
h2.big{font-size: 200%;}
h3.big{font-size: 150%;}
h3.huge{
	font-size: 200%;
}
h2.huge{
	font-size: 250%;
}
.thin{
	font-weight: 400;
}
a{text-decoration: none;}
.whitest-color a, .white-color a{color: white;}
a.light{
	color: rgb(190, 190, 190)
}
.whitest-color a:hover, .white-color a:hover{color: white;}
a .thebutton{
	color: white;
}


/* position sfuff */
.stick-to-right{float: right;}
.one-column, .two-columns, .five-columns, .three-columns, .four-columns, .one-column, .seven-columns, .six-columns, .eight-columns{display: grid;}
.span-two, .span-two-pc{grid-column: span 2}
.span-three, .span-three-pc{grid-column: span 3}
.span-four{grid-column: span 4;}
.span-five{grid-column: span 5;}
.span-six{grid-column: span 6;}
.span-seven{grid-column: span 7;}
.one-column{grid-template-columns: repeat(1, 1fr);}
.two-columns{grid-template-columns: repeat(2, 1fr);}
.three-columns{grid-template-columns: repeat(3, 1fr);}
.four-columns{grid-template-columns: repeat(4, 1fr);}
.five-columns{grid-template-columns: repeat(5, 1fr);}
.six-columns{grid-template-columns: repeat(6, 1fr);}
.seven-columns{grid-template-columns: repeat(7, 1fr);}
.eight-columns{grid-template-columns: repeat(8, 1fr);}
.relative{position: relative;}
.low-bastds > *{vertical-align: middle !important;}
.really-low-bastds > *{vertical-align: bottom !important;}
.center-text{text-align: center;}
.uncenter-text{text-align: left;}
.centered{margin: 0 auto;width: fit-content;}
.content-width{
	max-width: 1366px;
	margin: 0 auto;
	padding: 0rem 1rem;}
.inline-bastards > *{
	vertical-align: top;
	display: inline-block;}
.vertical-center-chi{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 100%;
}
.total-center-chi{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);}

	


/* sizes stuff */
.padding-hor{padding: 0rem 1rem;}
.no-padding{padding: 0;}
.tight-13{max-width: 13rem;}
.tight-20{max-width: 20rem;}
.tight-30{max-width: 30rem;}
.tight-35{max-width: 35rem;}
.tight-40{max-width: 40rem;}
.tight-60{max-width: 60rem;}
.min-20{min-width: 20rem;}
.screen{min-height: 100vh;}
.stupid-huge{font-size: 350%; line-height: 1.4ch;}
.fit-img > *{
	max-height: 100%;
	max-width: 100%; 
	/* border-radius: .2rem; */
}

.perfect-fit-vert, .perfect-fit{overflow: hidden;}
.perfect-fit > *{width: 100%;}
.perfect-fit-vert > *{height: 100%;}


/* style stuff */
strong{font-weight: 800; color: black;}
.thebutton{
	background-color: var(--green-back);
	text-shadow: none;
	padding: .5rem 1.5rem;
	border-radius: .15rem;
	transition: .3s;
	cursor: pointer;}
.thebutton.small{padding: .3rem 1rem;}
.thebutton.ssmall{padding: .4rem}
.thebutton:hover{transition: .3s;}
.thebutton.blue{background-color: var(--blue-back);}
.thebutton.white{background-color: whitesmoke; color: rgb(22, 22, 22);} 
.thebutton.transparent{background-color: rgb(255, 255, 255, 0); border: 1px solid white}
.thebutton.transparentdark:hover, .thebutton.transparent:hover{background-color: rgb(255, 255, 255, .1);}
.thebutton.transparentdark{background-color: rgb(0, 0, 0, .4);}
.thebutton.violent{background-color: var(--violent-back);}
.thebutton.orange{background-color: rgb(175, 52, 0)}
.thebutton.red{background-color: var(--red-back)}
.consider-header{padding-top: 4rem;}
.full-width{width:100%}
.fit{width: fit-content;}
.theblock{display: block}
.code-block{
	color: rgb(205, 132, 80)HERE;
	border-radius: .3rem;
	background-color: rgb(21, 21, 21);
	padding: 1rem;
}
.block-gray{
	padding: 1rem;
	background-color: rgb(0,0,0, .1);
	border-radius: .3rem;

}
.block-black{
	/* box-shadow: 5px 5px 1rem rgb(0,0,0,0.4); */
	padding: 1rem;
	background-color: white;
	border-radius: .2rem;
	background-color: rgb(30, 30, 30, 0.3);
	backdrop-filter: blur(5px);


}
.block-black .block-black{
	box-shadow: .15rem .15rem .3rem rgb(0,0,0,.4);
}

.block-line{
	border-radius: .5rem;
	padding: .5rem;
	padding: 1rem;
	border: 1px solid rgb(69, 69, 69);
}

.block{
	padding: .3rem;
}
.hide{
	display: none;
	visibility: hidden;
	height: 0;
	width: 0;
}
input.small{
	max-width: 6rem;
}
input.wide, textarea.wide{
	max-width: unset; 
	display: block;
}
input.white{
	border: none;
	border-bottom: 2px solid white;
	color: white;
	padding: .5rem .5rem
}
input.white::placeholder{
	color: rgb(220, 220, 220, 220)
}

input, textarea{
	max-width: 8rem;
    box-sizing: border-box;
	border-radius: .1rem;
	background-color: transparent;
	border: 1px solid rgb(80, 80, 80);
	padding: .6rem;
	
}


input:-webkit-autofill,
input:-webkit-autofill:focus {
  /* background-color: rgba(255, 255, 255, 0.1); */
  transition: background-color 0s 600000s, color 0s 600000s;

}

.darker-color{color: rgb(19, 19, 19) !important;}
.black-color{color: rgb(22, 22, 22);}
.white-color{color: rgb(230, 230, 230);}
.whitest-color{color: white;}
.text-shadow-high{
	/* outline */
	text-shadow: 2px 2px 0 #000,
	-2px -2px 0 #000,
	2px -2px 0 #000,
	-2px 2px 0 #000,
	0px 2px 0 #000,
	2px 0px 0 #000,
	0px -2px 0 #000,
	-2px 0px 0 #000;
  
}
.debug, .debug *{
	/* padding: .1rem; */
	border: 1px solid rgba(240, 128, 128, 0.5);
	background-color: rgb(0, 255, 0, 0.05);
}
.debug .debug{
	border: 1px solid red;
}
canvas.as_background{
	position: absolute;
	width: 100%;
	z-index: 3;
	left: 0;
}
::-webkit-scrollbar{background-color: transparent;max-width: .4rem; max-height: .4rem;}
::-webkit-scrollbar-thumb{background-color: rgb(255, 255, 255, .3);}
::-webkit-scrollbar-thumb:hover{background-color: rgb(255, 255, 255, .7);}
::-webkit-scrollbar-track{background-color: rgb(0,0,0,.5);}


/* phone shit */
.phone-only{
	display: none;
	visibility: hidden;
}

.error-block{
	background-color: rgba(255, 0, 0, 0.1);	
	padding: .4rem;
	border: 1px solid red;
}



/* CHAT SHTI  */
#chat_window_wrapper, #chat_window_open{
	border-radius: .3rem;
	background-color: rgb(50, 50, 50);
	position:fixed;
	right: 0rem;
	bottom: 0;
	max-width: 25rem;
}

#chat_window_wrapper > #header{
	padding: 1rem 1rem;
	background-color: rgb(20, 20, 20);
}

#chat_window_wrapper > #chat{
	min-height: 10rem;
	max-height: 12rem;
	padding: .5rem;
	overflow: auto;
}

.chat_message{
	color: white;
	padding: .5rem 1rem;
	width: fit-content;
	max-width: 60%;

	background-color: rgb(0, 0,0, .2);
	border-radius: .2rem;
}
.from_user, .from_admin{
	display: flex;
	padding: .3rem;
}
.from_admin > div{
	margin-left: auto;
}

.flex{
	display: flex;
	gap: .5rem;
}
/* TRYING OUT UNIQUE STUFF */
.that-one-column > div{
	padding: .2rem .5rem;
	white-space: nowrap;
	border-bottom: 1px solid rgb(0,0,0,.1);
	padding-left: .2rem;
}

.cases-line{
	display: flex;
	gap: 1rem;

	max-width: 100%;
	overflow-x: auto;
	justify-content: center;
	padding: 1rem;
}

.cases-line img{
	display: block;
	max-height: 5rem;
	opacity: .6;
	transition: .5s;
}
.cases-line img:hover{
	opacity: 1;
	transition: .3s;
}


.contact-button:hover{
	background-color: rgb(255,255,255,0.5);
	border: 1px solid rgb(255, 255, 255, 0.9);
	transition: .3s;

}

.contact-button{
	transition: .3s;
	background-color: rgb(0,0,0,0.3);
	border: 1px solid rgb(255, 255, 255, 0.6);

	width: 40px;
	height: 40px;
	border-radius: 100%;
}

.header{
	background-color: rgb(20,20,20, 0.6);
	color: rgb(255,255,255,.6);
	margin: 0 auto;
	display: flex;

	border-radius: 2rem;
	padding: .5rem 1.5rem;
	transition: .2s;
	align-items: center;

}
.header:hover{
	transition: .2s;
	background-color: rgb(0,0,0, 1);
}

.header > div{
	transition: .2s;
	cursor: pointer;
	padding: .2rem 1rem;
}

.header > div:hover{
	transition: .2s;

	color: white;
}


.highlight-text{
	color: #2E5266

}

.the-thing-block{
	background-color: white;
	display: flex;
	flex-direction: column;
	box-shadow: .3rem .3rem 1rem rgb(0,0,0,.3);
	border-radius: .5rem;
	padding: 1.5rem;
}
.the-thing-block .white-ghost{
	padding-top: 2rem;
	padding-bottom: 1rem;
}

.white-ghost{
	color: rgb(255, 255, 255, 0.8);
	font-size: 400%
}

.the_first_back_thing{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient-back-main 15s ease infinite;
}

.white-color{
	color: rgb(255, 255, 255, 0.8) !important;
}

@media only screen and (max-width: 900px) {
	.header{
		padding-top: .0rem;
		padding-bottom: .4rem;
	}
	.right_thing{
		display: block;
	}
	.spacer_thing{
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	.phone-drop-height{
		height: auto;
	}
	.span-two-pc, .span-three-pc{grid-column: unset;}
	.vertical-to-hor{
		flex-direction: row;
	} 
	.phone-dark-back{
		background-color: rgb(30, 30, 30);
	}
	.background-video-thing{
		left: unset;
		right: unset;
		width: unset;
		height: 130vh;
	}

	.flex-no-phone{
		display: unset;
	}
	.images_list_detail{
		align-items: center;
		justify-content: center;
		overflow: auto;
		height: 6rem;
		white-space: nowrap;
		margin-top: 1rem;
	}
	.images_list_detail  div{
		height: 5rem;
		min-width: 10rem;
	}

	.big_image_detail{
		height: fit-content;
	}

	.comments{white-space:initial; overflow: auto; padding-bottom: 2rem;}
	.comments div{margin-left: 0; margin-right: 0rem !important;}

.grid-to-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.grid-to-flex > div{
	max-width: 28rem;
}


	h1.big{font-size: 250%;}
	.phone-consider-header{padding-top: 7rem;}
	.destroy-grid{display: block;}
	.grid-to-one{grid-template-columns: repeat(1, 1fr) !important; }
	.split-grid{grid-template-columns: repeat(2, 1fr);}
	.content-width{padding: 1rem;}
	.phone-center-text{text-align: center;}
	.phone-top-margin-very-lil{margin-top: 1rem;}
	.phone-top-margin-lil{margin-top: 2rem;}
	.phone-top-margin-mid{margin-top: 4rem;}
	.phone-top-bot-padding{padding-top: 4rem; padding-bottom: 4rem;}
	.phone-bottom-padding-mid{padding-bottom: 5rem;}
	.drop-center{
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		max-width:none;
		width: auto;
	}
	
	.phone-only{
		display: block;
		visibility: visible;
		height: auto;
		width: auto;		
	}
	.phone-hide{
		display: none;
		visibility: hidden;
		height: 0;
		width: 0;
		}	
	.phone-center{
		margin: 0 auto;
		width: fit-content;
		display: block;
	}
	.total-center-chi{
		width: 100%;
	}
}

@keyframes slow-back-hover{
	0%{
		background-position: 0% 100%;
	}
	50%{

	}
	100%{
		background-position: 100% 100%;
	}
}

@keyframes call-chat{
	0%{
		background-position: 0% 0%
	}
	100%{
		background-position: 90% 100%
	}	
}
@keyframes gradient-back-main {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}