html, body {
  background-color: #eaeaea;
  padding: 0;

  font-family: 'Onest', sans-serif;
}

#root {
  display: flex;
  justify-content: center;
}

input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dadada;
  border-radius: 2px;

  transition: border 0.1s, margin 0.1s;
  font-family: 'Onest', sans-serif;
  font-size: 16px;
}

input:focus {
  border: 1px solid #209afa;
  outline: none;
}

.grade-converter {
  background-color: white;
  border-radius: 8px;

  box-shadow: 0px 0px 26px 0px rgba(87,87,87,0.25);
  -webkit-box-shadow: 0px 0px 26px 0px rgba(87,87,87,0.25);
  -moz-box-shadow: 0px 0px 26px 0px rgba(87,87,87,0.25);
}

.mr-1 {
  margin-right: 8px;
}

.text-sm {
  font-size: 10px;
}

.flex {
  display: flex;
  flex: 1;
}

.flex-0 {
  flex: 0;
}

.row {
  flex-direction: row;
}

.sp-b {
  justify-content: space-between;
}

.center-v {
  align-items: center;
}


.item {
  padding: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 2px;
}

.group .item {
  margin-top: 0px;
  margin-bottom: 0px;
}

.group {
  margin-top: 12px;
  margin-bottom: 12px;
}

.item:first-item {
  margin-top: 0px;
}

.item:last-item {
  margin-bottom: 0px;
}

.beginner {
  background-color: #75dd53;
}

.intermediate {
  background-color: #f9c818;
}

.experienced {
  background-color: #ff8923;
}

.info {
  background-color: #ddf1ff;
}

.expert {
  background-color: #ff395e;
  color: white;
}

.elite {
  background-color: #8244e5;
  color: white;
}


@media (min-width: 800px) {
  #root {
    margin-top: 100px;
  }

  .grade-converter {
    min-width: 600px;
    padding: 40px;
  }
}

@media (max-width: 800px) {
  #root {
    margin-top: 20px;
  }

  .grade-converter {
    width: 100%;
    padding: 8px;
  }

  .item:last-child {
    flex-wrap: wrap;
  }

  .m-f-wrap {
    flex-wrap: wrap;
  }
}