:root {
  --main_color: rgba(93, 124, 210, 1.0);
  --main_opaque_color: rgba(93, 124, 210, 0.3);
  --second_color: rgba(240, 144, 57, 1.0);
  --second_opaque_color: rgba(240, 144, 57, 0.3);
  --third_color: rgba(107, 192, 106, 1.0);
  --third_opaque_color: rgba(107, 192, 106, 0.3);
  --forth_color: rgba(231, 82, 81, 1.0);
  --white_color: rgba(250, 250, 250, 1.0);
  --bg_color: rgba(240, 240, 240, 1.0);
  --light_color: rgba(85, 85, 85, 1.0);
  --light_opaque_color: rgba(85, 85, 85, 0.3);
  --dark_color: rgba(22, 22, 22, 1.0);
  --menu_size: 320px;
  --navbar_size: 64px;
  --child_size: 250px;
  --switch_size: 30px;
  --h1_size: 3.4rem;
  --h2_size: 3.0rem;
  --h3_size: 2.4rem;
  --h4_size: 2.0rem;
  --p_size: 1.8rem;
  --sub_size: 1.5rem;
  --gap_size: 8px;
  --effect_blur: blur(8px) brightness(50%) saturate(150%);
}

body {
  font-family: "THSarabunIT", sans-serif;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: var(--bg_color);
  overflow-y: hidden;
}

input, select, textarea {
  font-family: "THSarabunIT", sans-serif;
}

.material-symbols-outlined {
  color: var(--white_color);
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: var(--h4_size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.hidden {
  content-visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
}

.container {
  padding: calc(var(--gap_size)*2);
  margin: 5vh auto 0 auto;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white_color);
  border-radius: var(--gap_size);
  box-shadow: 0 0 var(--gap_size) var(--light_color);
  gap: calc(var(--gap_size)*4);
}

.logo {
  margin: calc(var(--gap_size)*8) 0 calc(var(--gap_size)*4) 0;
  width: 90%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.text_input {
  padding: var(--gap_size);
  width: 90%;
  height: var(--h4_size);
  color: var(--dark_color);
  font-size: var(--p_size);
  background-color: var(--white_color);
  border: solid 1px var(--third_color);
  border-radius: var(--gap_size);
}

.operator {
  margin-bottom: calc(var(--gap_size)*4);
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.toggle_container {
  position: relative;
  margin: 10px 0;
  display: flex;
}

.toggle_label {
  margin-bottom: 5px;
  color: var(--light_color);
  font-size: var(--sub_size);
  text-indent: 5px;
  cursor: default;
  user-select: none;
}

.toggle_switch {
	position: relative;
	width: calc(var(--switch_size)*2 - var(--gap_size)/2);
	height: var(--switch_size);
	display: block;
}

.toggle_switch input[type='checkbox'] { 
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle_slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--light_opaque_color);
	-webkit-transition: .1s ease-in;
	transition: .1s ease-in;
	border-radius: calc(var(--switch_size)/2);
	cursor: pointer;
}

.toggle_slider:before {
	position: absolute;
	content: "";
	height: calc(var(--switch_size) - var(--gap_size)/2);
	width: calc(var(--switch_size) - var(--gap_size)/2);
	left: calc(var(--gap_size)/4);
	bottom: calc(var(--gap_size)/4);
	background-color: var(--white_color);
	-webkit-transition: .1s ease-out;
	transition: .1s ease-out;
	border-radius: 50%;
}

input[type='checkbox']:checked + .toggle_slider {
	background-color: var(--third_color);
}

input[type='checkbox']:checked + .toggle_slider:before {
	-webkit-transform: translateX(calc(var(--switch_size) - var(--gap_size)/2));
	-ms-transform: translateX(calc(var(--switch_size) - var(--gap_size)/2));
	transform: translateX(calc(var(--switch_size) - var(--gap_size)/2));
}

input[type='checkbox']:focus + .toggle_slider {
	box-shadow: 0 0 1px var(--third_color);
}

.sign {
  padding: var(--gap_size) calc(var(--gap_size)*2);
  color: var(--white_color);
  text-align: center;
  font-size: var(--p_size);
  background-color: var(--third_color);
  border: none;
  border-radius: var(--gap_size);
  cursor: pointer;
  user-select: none;
}

.loading_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  touch-action: none;
  backdrop-filter: blur(16px) brightness(120%) saturate(100%);
  -webkit-backdrop-filter: blur(16px) brightness(120%) saturate(100%);
  z-index: 10;
}

.loading_container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.loading_left {
  -webkit-animation-name: animated_flip_vertical; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 2.2s; 
  animation-name: animated_flip_vertical; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 2.2s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}

.loading_right {
  -webkit-animation-name: animated_flip_horizon; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 2.4s; 
  animation-name: animated_flip_horizon; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 2.4s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}

@media screen and (min-width: 576px) {

}

@media screen and (min-width: 768px) {
  .container {
    width: calc(var(--menu_size)*2 - var(--gap_size)*4);
  }

  .logo {
    width: 70%;
  }

  .text_input {
    width: 50%;
  }

  .operator {
    width: 50%;
  }
}

@media screen and (min-width: 992px) {

}

@media screen and (min-width: 1200px) {
  
}