::-webkit-scrollbar {
  inline-size: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* css hacks over */


::selection {
  color: white;
  background: grey;
}
:root{
	--clr: #fff;
	--clr1: rgba(240, 240, 240, .9);
}

/* css reset start */
@font-face {
  font-family: sometype;
  src: url('../../assets/SometypeMono-Regular.woff2') format('woff2');
  font-display: swap;
}
*, *::before, *::after {
  font-family: sometype;
  box-sizing: border-box;
  margin: 0;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
html, body {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
  block-size: 100vh;
}
body {
  line-block-size: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
  object-fit: cover;
  block-size: auto;
}
input, button, textarea, select {
  font: inherit;
}
button {
	cursor: pointer;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
#root, #__next {
  isolation: isolate;
}

/* css reset over */


body {
	display: flex;
	gap: 30px;

	max-inline-size: 1540px;
	margin-inline: auto;
	overflow: auto;
	padding-inline: 25px;
	padding-block: 15px;
	background: var(--clr1);
}
.mobile {
	display: none;
}
.cont {
	display: grid;

	color: var(--clr1);
	block-size: 100%;
	border-radius: 1rem;
	background: #302929d5;
	padding-block: 20px;
	padding-inline: 30px;
	font-size: .5rem;
	box-shadow: 0px 7px 9px rgba(99, 93, 93, 0.25), -8px 6px 9px rgba(99, 93, 93, 0.25), 8px 6px 9px rgba(99, 93, 93, 0.25);
}
.main-heading {
	font-size: 1.2rem;
	text-align: center;
}

.left-cont {
	flex: 1;

	grid-template-rows: 10% 60% 20% 10%;

	position: relative;

	backdrop-filter: blur(7px);
	padding-inline: 30px;
}

.left-sub-cont {
	display: grid;
	grid-auto-flow: row;
	align-content: space-evenly;

	inline-size: 100%;
}
.left-sub-cont button {
	border: 0;
	background: var(--clr1);
	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
	border-radius: .3rem;
	padding-block: 5px;
	transition: box-shadow .3s ease-in-out, transform .3s ease-in-out, background .3s ease;
}
.left-sub-cont button:hover {
	transform: translateY(-1px);
	box-shadow: 0px 8px 10px rgba(0, 0, 0, .51);
}

.left-cont .input-conts{
	display: grid;
	grid-template-columns: minmax(7ch, 15ch) minmax(9ch, 9ch);
	justify-content: space-between;
	align-items: center;
}
.left-cont .input-conts label {
	inline-size: auto;
}
.left-cont .input-conts input, select {
  text-align: center;
  inline-size: 100%;
	padding: 0;
	text-decoration: underline;
	background: transparent;
	color: var(--clr1);
	border: 0;
	text-overflow: ellipsis;
	transition: color .3s ease;
}


/* -----------right---------------- */
.right-cont {
	flex: 3;

	grid-template-rows: 10% auto;
	align-items: start;
}

.right-header-cont {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.right-header-cont button {
	aspect-ratio: 1;
	background: transparent;
	color: var(--clr1);
	border: none;

	position: relative;
}

.right-header-cont path {
	transition: .3s cubic-bezier(0.18, -0.15, 0.27, 3.55);
}


/* tooltip */
.right-header-cont button::before {
	display: none;
	position: absolute;
	top: -80%;
	left: -40px;
	inline-size: 100px;
	text-align: center;
}
.right-header-cont button:nth-child(1)::before {
	content: "options";
}

.right-header-cont .quick-options button:nth-child(1)::before {
	content: "download";
}
.right-header-cont .quick-options button:nth-child(1):hover path:nth-child(2) {
	transform: translate(0, -2px);
}

.right-header-cont .quick-options button:nth-child(2)::before {
	content: "share";
}
.right-header-cont button:hover::before {
	display: initial;
}
/* tooltip over */

.right-header-cont .quick-options {
	justify-self: right;
	inline-size: max-content;
}

.canvas-cont {
	display: grid;
	place-items: center;

	inline-size: 100%;
	block-size: 100%;
}
.canvas-cont #canvas{
	display: block;
	background: transparent;

	-webkit-transform3d: translate(0,0,0);
  -moz-transform3d: translate(0,0,0);
  transform3d: translate(0,0,0);
}