@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
@import url("./styles/status.css");

:root {
    --gray: green;
    --succes: greenyellow;
    --fail: red;
    --bg: #f7fbf5;
    --bg2: #e0e4de;
    --fc: #181818;
    --red: darkred;
}


::-moz-selection {
  background: var(--gray);
  color: #fff;
}

::selection {
  background: var(--gray);
  color: #fff;
}

body {
  margin: 0;
  font-size: 22px;
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--fc);
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./media/nav_bg.jpg);
  border-bottom: 3px solid var(--gray);
}

nav>h1 {
  color: var(--gray);
}

input, select {
  height: 40px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--gray);
  outline: none;
  width: 250px;
}

select {
  border: 2px solid var(--gray);
}

input[type="checkbox"] {
  width: 20px;
}

input[type="text"], input[type="number"], select {
  color: var(--gray);
  font-size: 20px;
}

label {
  width: 10vw;
  min-width: 200px;
  max-width: 400px;
}