/* Fonts */
@font-face {
font-family:"roc-grotesk";
src:url("./assets/fonts/RocGrotesk/Bold.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}

@font-face {
font-family:"roc-grotesk";
src:url("./assets/fonts/RocGrotesk/Medium.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
font-family:"roc-grotesk";
src:url("./assets/fonts/RocGrotesk/Regular.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"permanent-marker";
src:url("./assets/fonts/PermanentMarker/PermanentMarkerRegular.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

/* Colors */
:root {
	--blue: #0265FF;
	--dark-blue: #002965;
	--light-blue: #EBF3FF;
	--dark-gray: #646464;
	--extra-dark-gray: #3F3F3F;
	--black: #000000;
	--gray: #B2B2B2;
	--light-gray: #EFEFEF;
	--extra-light-gray: #F8F8F8;
  --extra-extra-light-gray: #FBFBFB;
	--white: #FFFFFF;
	--red: #FF0000;
	--red-error: #FD3838;
	--light-red: #FDEBEB;
	--green: #2FB100;
	--light-green: #EBFFE5;
}

/* Shadows */
:root {
	--outer-shadow-center: 0px 0px 6px 0px rgba(0,0,0,0.05);
	--outer-shadow-bottom: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
	--outer-shadow-top: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
}

/* Font size */
:root {
  --body-small: 16px;
  --title-large: 24px;
}

:root { 
  --line-height-single: 1;
  --line-height-double: 2;
  --line-height-hairline: 1.2;
  --line-height-normal: 1.4;
}

/* Styles */
html, body {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
	letter-spacing: 0.03em;
	color: var(--black);
  margin: 0;
	box-sizing: border-box;
	font-family: "roc-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	touch-action: none;
	overflow: hidden;
	background-color: #FFFFFF;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /*Handle iPhone notch*/
}
* {
	font-family: "roc-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
  font-size: 12px;
  padding: 10px;
  margin: 0;
	box-sizing: border-box;
	border: 1px solid var(--light-gray);
	border-radius: 12px;
  color: var(--black);
}
textarea::placeholder, input::placeholder{
  color: var(--gray);
}
textarea:focus, textarea:active, input:focus, input:active{
  outline: none;
  border-color: var(--blue);
}
textarea{
  resize: none;
  min-height: 100px;
}

input:disabled {
  background-color: var(--light-gray);
  color: var(--gray);
}

button {
	color: #333;
	background: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	opacity: 0.8;
}

button:focus {
	border-color: #666;
}

.container{
  padding: 0 36px;
}
main {
  text-align: center;
  padding: 0;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
h1 {
  color: #ff3e00;
  text-transform: capitalize;
  font-size: 4em;
  font-weight: 100;
}
@media (min-width: 640px) {
  main {
    max-width: none;
  }
}

@supports (-webkit-touch-callout: none) { /*Fixes iOS Webkit bug*/
  main{
    height: -webkit-fill-available !important;
  }
}

/* Text Styles */
.title_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.16;
}
.title_desc_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}
.percentage_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.menu_item_title, .bill_element_text, .button_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.money_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
.info_text{
  font-family: "roc-grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.conditions_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
}

.money_wide_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}
.title_wide_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.72px;
}
/* .title_wide_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  padding: 0 10px;
} */
.sub_title_wide_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 0 10px;
}
.info_card_title_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.money_info_text{
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
}
.nav_text{
  font-family: "permanent-marker", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
	vertical-align: top;
}
.exclamation_text{
  font-family: "permanent-marker", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
	vertical-align: top;
}