*:not(input, select, option) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

body {
  background-color: green;
  padding: 10px;
}

main {
  width: calc(100% - 20px);
}

span {
  font-size: 40px;
  font-weight: bold;
}

.flex1 {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
}

.left {
  width: 90%;
}

.top-left {
  background-color: blue;
}

.top-right {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

hr {
  width: 100%;
  height: 5px;
  color: red;
  background-color: red;
}

#top-hr {
  margin-top: 40px;
}

.right {
  width: 10%;
}

.flex2 {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
}

.bottom-left {
  display: flex;
  flex-direction: row;
}

.bottom-left-left {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
  width: 30%;
  gap: 30px;
  padding-bottom: 30px;
}

.bottom-left-right form {
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 20px;
}

.bottom-right {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
  background-color: blue;
  gap: 30px;
  padding-bottom: 30px;
}

label:not(.check) {
  font-weight: bold;
}

#btns {
  color: black !important;
}

#reg {
  border: 2px solid black;
}