*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; }
html { box-sizing: border-box; overflow: hidden; }
body { overflow: auto; }

:root { 
         --font-text: 'Inter', sans-serif; 
         --font-code: 'Fira Mono', monospace; 
  
         --bg-base: #fafed7; 
         --bg-overlay: #000000cf; 
         --bg-drawing-hover: #9b9b9b52; 
         --bg-floating: #191919; 
         --bg-surface: #f8f9fa; 
         --bg-overflow: #dee2e6; 
         --bg-btn-inactive: #434343; 
           --bg-btn-inactive-dark: #2e2e2e; 
  
         --fg-muted: #9d9d9d; 
         --fg-muted-on-accent: #8fcabb; 
         --error: #e03131; 
         --accent: #078969; 
         --accent-light: #80c3a0; 
         --accent-dark: #136853; 
         --fg-switch-low: #515151; 
           --fg-switch-high: #f3f3f3; 
  
         --cursor-interactive: default; 
         --line-height-copy: 1.5; 
 }

body {
	font-family: var(--font-text);
	margin: 0;
	background: var(--bg-base);
	position: relative;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-dark);
}

.docs-preview {
	display: flex;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;
}

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	min-width: 150px;
}

.logos {
	display: block;
	width: 250px;
}

.main-spriki {
	display: block;
	margin-left: 10%;
	margin-right: 10%;
}

.home-spriki {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10%;
	margin-left: 10%;
}

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

.spriki-bg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-tutorial {
	width: 80%;
}

.grecaptcha-badge { 
    visibility: hidden;
}

table, th, td {
	border: 3px solid;
	border-collapse: collapse;
	border-color: #136853;
}

.stline {
	background-color: #136853;
	color: #fafed7;
}

@font-face {
	font-family: Billy;
	src: url('../../../public/fonts/Billy-Regular.otf') format('otf');
}

.billy {
	font-family: 'Billy';
}

.color1 {
	width: 150px;
	height: 50px;
	padding: 1px;
	border-radius: 5px;
	background-color: #078969;
	color: white;
}

.color2 {
	margin-top: 5px;
	width: 150px;
	height: 50px;
	padding: 1px;
	border-radius: 5px;
	background-color: #136853;
	color: white;
}

.color3 {
	margin-top: 5px;
	width: 150px;
	height: 50px;
	padding: 1px;
	border-radius: 5px;
	background-color: #fafed7;
	color: black;

}

.color-text {
	display: flex;
	align-items: center;
	justify-content: center;
}

code {
	background-color: #23262F;
    color: #b3b3b3;
	padding: 3px;
	font-family: monospace;
}