@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");

body {
  margin: 0;
  background-color: white;
}

#header {
  height: 10vh;
  display: flex;
  align-items: center;
}

#links {
  flex-grow: 1;
}

#logo {
  height: 12vh;
  width: 12vh;
  margin-right: 2em;
}

h1 {
  font-family: "Lato", sans-serif;
  font-size: 2em;
  text-align: center;
}

#main {
  height: 80vh;
  background-color: #e6e7ee;
  display: flex;
  flex-direction: row;
}

#left {
  height: 100%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#qrcode {
  margin: 10px;
  /* height: 90%;
  width: 90%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

#right {
  height: 100%;
  width: 60%;
}

.result {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 16.67%;
}

.txt {
  font-family: "Lato", sans-serif;
  font-size: 1.8em;
  text-align: left;
  margin-left: 1em;
}

.label_container {
  /* width: 300px; */
  margin-right: 5%;
  margin-left: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

label {
  /* margin-left: 2em; */
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color: grey;
  display: flex;
  align-content: center;
  justify-content: center;
  transition: 0.25s;
}

label:hover {
  cursor: pointer;
}

.small_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 5em;
}

.big_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5em;
}

.small_label {
  margin-top: 1.5em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transition: 0.25s;
  display: flex;
  align-content: center;
  justify-content: center;
}

p {
  margin-top: 0px;
  font-family: "Lato", sans-serif;
  font-size: 1em;
}

.bi_small {
  color: rgb(66, 65, 65);
  font-size: 2.5em;
}
.bi_small::before {
  /* neu */
  vertical-align: 0 !important;
}

.bi {
  color: rgb(66, 65, 65);
  font-size: 3.5em;
}

.bi::before {
  /* neu */
  vertical-align: 0 !important;
}

#footer {
  height: 8vh;
  display: flex;
  align-items: center;
}