body {
  height: calc(100vh - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: black;
  color: white;
  gap: 30px;
}

.input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.input input {
  background: black;
  border: 1px white solid;
  color: white;
}

.display {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px white solid;
  border-radius: 10px;
  min-height: 300px;
  min-width: 600px;
}

.carbs {
  background: white;
  height: 5px;
  width: 40px;
  position: relative;
  cursor: pointer;
}
.carbs:hover {
  background-color: rebeccapurple;
}

.odd {
  rotate: -10deg;
}

.even {
  rotate: 10deg;
}

.elems {
  display: flex;
}

.ch3 {
  position: relative;
}
.ch3::after {
  position: absolute;
  content: " ";
  width: 5px;
  height: 40px;
  background: white;
}

.oh {
  position: relative;
}
.oh::after {
  position: absolute;
  content: " ";
  width: 5px;
  height: 40px;
  background: white;
}
.oh::before {
  position: absolute;
  content: " OH";
  top: 40px;
}

.o {
  position: relative;
}
.o::after {
  position: absolute;
  content: " ";
  width: 5px;
  height: 40px;
  border-left: 2px white solid;
  border-right: 2px white solid;
}
.o::before {
  position: absolute;
  content: " O";
  top: 40px;
}

.no2 {
  position: relative;
}
.no2::after {
  position: absolute;
  content: " ";
  width: 5px;
  height: 40px;
  background: white;
}
.no2::before {
  position: absolute;
  content: " NO2";
  top: 50px;
  right: 20px;
  rotate: 90deg;
}

.menu {
  position: absolute;
  visibility: hidden;
  border: 2px white solid;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  top: 210px;
}
.menu div {
  border-bottom: 2px white solid;
  padding-left: 15px;
  padding-right: 30px;
  cursor: pointer;
}
.menu div:hover {
  color: green;
}
.menu .O {
  border: none;
}

.last {
  background: purple;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.last:hover {
  background-color: rebeccapurple;
}

.nomen {
  display: flex;
  gap: 19px;
  align-items: center;
  visibility: hidden;
}
.nomen input {
  border: none;
  background-color: rgb(48, 29, 132);
  color: white;
  padding: 7px;
  border-radius: 20px;
  cursor: pointer;
}
.nomen .name {
  min-width: 179px;
  height: 23px;
  border: 1px white solid;
  padding: 2px;
  display: flex;
  vertical-align: middle;
  justify-content: center;
}

.warning {
  padding: 40px;
  font-size: x-large;
  font-weight: bolder;
  text-align: center;
  color: rgb(125, 3, 113);
}
.warning span {
  font-size: large;
  font-weight: lighter;
  color: white;
}/*# sourceMappingURL=style.css.map */


@media only screen and (max-width: 768px) {
  .display{
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 40px;

  }
}