:root {
  --primary: #40E0D0;
  --secondary: #00c3ff;
  --light: #f8fcff;
  --dark: #b300ff;
  --gray: #ecf2f6;
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;700&display=swap');

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
    "Verdana", "Tahoma", "Geneva", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
    "Garamond", "Palatino Linotype", "Book Antiqua", "Times New Roman",
    "Courier New", "Georgia", "Comic Sans MS", sans-serif, 'Noto Sans Sinhala', sans-serif;


  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #000000;
  background-color: #fbfcff;
}

.error {
  color: #000000;
  padding: 5px 10px;
  border: 1px solid #ff0000;
  background-color: #ff0000;
  font-size: 20px;
  font-weight: bold;
  width: 80%;
  align-self: center;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 3px #ff0000, 0 0 6px #ff0000, 0 0 9px #ff0000, 0 0 12px #ff0000;
  box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000;
  animation: blink 1.5s infinite alternate, glow 1.5s infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    text-shadow: 0 0 3px #ff0000, 0 0 6px #ff0000, 0 0 9px #ff0000, 0 0 12px #ff0000;
  }

  50% {
    text-shadow: 0 0 6px #ff4d4d, 0 0 12px #ff4d4d, 0 0 18px #ff4d4d, 0 0 24px #ff4d4d;
  }

  100% {
    text-shadow: 0 0 3px #ff0000, 0 0 6px #ff0000, 0 0 9px #ff0000, 0 0 12px #ff0000;
  }
}

.positivemessage {
  background-color: #00ff04;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  font-size: 25px;
  padding: 15px 20px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.319);
  border: 1px solid #00ff04;
}

@media only screen and (max-width: 768px) {
  body {
    background-color: #ffffff;
  }

}