css.css

@font-face {
	font-family: noto sans sinhala;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(//fonts.gstatic.com/ea/notosanssinhala/v1/NotoSansSinhala-Regular.eot);
	src: url(//fonts.gstatic.com/ea/notosanssinhala/v1/NotoSansSinhala-Regular.eot?#iefix)
		format("embedded-opentype"),
	  url(//fonts.gstatic.com/ea/notosanssinhala/v1/NotoSansSinhala-Regular.woff2)
		format("woff2"),
	  url(//fonts.gstatic.com/ea/notosanssinhala/v1/NotoSansSinhala-Regular.woff)
		format("woff"),
	  url(//fonts.gstatic.com/ea/notosanssinhala/v1/NotoSansSinhala-Regular.ttf)
		format("truetype");
  }
  :root {
	--bg: #fff;
	--color: #5f6368;
	--btncolor: #fafafa;
	--btntext: #5f6368;
	--btnboader: rgb(138 141 145);
	--btnhoverbk: #00a2ff50;
	--fcbackground: #ffffff;
	--fcboader: rgb(138 141 145);
	--tgbtn: #333;
	--sbtrak: #5f6368;
	--thumb: #c3c3c3;
  }
  .dark {
	--bg: #303134;
	--color: rgb(238, 238, 238);
	--btncolor: #303134;
	--btntext: rgb(238, 238, 238);
	--btnboader: rgb(138 141 145);
	--btnhoverbk: #00a2ff50;
	--fcbackground: #303134;
	--fcboader: #8899ac;
	--tgbtn: rgb(250 250 250);
	--sbtrak: #737373;
	--thumb: #555;
  }
  :focus {
	outline: none;
  }
  ::-webkit-scrollbar {
	width: 8px;
  }
  /* Track */
  
  ::-webkit-scrollbar-track {
	background: var(--sbtrak);
  }
  /* Handle */
  
  ::-webkit-scrollbar-thumb {
	background: var(--thumb);
  }
  /* Handle on hover */
  
  ::-webkit-scrollbar-thumb:hover {
	background: var(--thumb);
  }
  body {
	font-family: noto sans sinhala, BlinkMacSystemFont, -apple-system, "Segoe UI",
	  Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
	  "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	background-color: var(--bg);
	border-top: #00a2ff 2px solid;
	font-size: 15px;
	color: var(--color);
  }
  .btn {
	background-color: var(--btncolor);
	border-color: var(--btnboader);
	color: var(--btntext);
	border-radius: 5px;
	font-size: 14px;
  }
  .btn:hover {
	background-color: var(--btnhoverbk);
	border-color: var(--btnboader);
	color: var(--btntext);
	border-radius: 5px;
  }
  
  textarea.form-control {
	height: 240px;
  }
  .form-control {
	background-color: var(--fcbackground);
	color: var(--color);
	font-family: noto sans sinhala, sans-serif;
	font-size: 18px;
	border: 0.5mm solid var(--fcboader);
	border-radius: 5px;
	flex-direction: column;
	display: flex;
	margin-bottom: 5px;
  }
  .form-control:hover {
	border: 0.1mm solid var(--fcboader);
	color: var(--color);
	background-color: var(--fcbackground);
  }
  .form-control:visited,
  .form-control:focus {
	background-color: var(--fcbackground);
	color: var(--color);
  }
  .popover {
	border: 0.5mm solid var(--fcboader);
	opacity: 0.99;
  }
  .row {
	margin: auto 14%;
  }
  .modal-body,
  .modal-header,
  .modal-footer {
	background-color: var(--fcbackground);
	font-family: noto sans sinhala, sans-serif;
  }
  h1 {
	font-size: 1.2rem;
  }
  .h2 {
	
	font-size: 1.1rem;
  }
.h3 {
	
	font-size: 1.2rem;
  }
  .mt-3 {
	font-size: 12px;
  }
  p {
	font-size: 14px;
	font-weight: 400;
  }
  h2 {
	font-size: 1.1rem;
  }
h3 {
	font-size: 1.2rem;
  }
  a {
	color: #ffffff;
  }
  
  .homeb {
	margin: auto 5%;
  }
  
  
  @media only screen and (max-width: 480px) {
	textarea.form-control {
	  height: 230px;
	}
	body {
	  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
		Arial, sans-serif;
	}
  }
  
  @media screen and (max-width: 900px) {
	.row {
	  margin: 0em;
	}
	body {
	  overflow-x: hidden;
	}
	.h1 {
	  font-size: 1.5rem;
	}
	.homeb {
	  margin: auto;
	}
  }
  
  @media (min-width: 1920px) and (max-width: 2560px) {
	textarea.form-control {
	  height: 360px;
	}
  }