body {
  height: 100vh;
  font-family: sans-serif;
}

.main {
  height: 98vh;
  width: 99vw;
  display: flex;
  flex-direction: column;
}

.table {
  height: 21.66vw;
  min-height: 21.66vw;
  display: flex;
  flex-direction: column;
}

.detail {
  display: flex;
}

.detailedElement {
  background-color: lightgrey;
  height: 21.66vw;
  width: 21.66vw;
  font-size: 1.1vw;
  text-align: center;
  margin-right: 0.3vw;
}

.detailDetail {
  height: 1.35vw;
}

#nameDetail {
  height: 2.4vw;
  font-size: 2vw;
}

.list {
  background-color: lightgrey;
  width: 77.14vw;
  height: 21.66vw;
  font-size: 1.1vw;
}

.row {
  display: flex;
}

.elementFrame {
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  background-color: red;
  height: 85%;
  width: 85%;
  text-align: center;
}

.atomicNumberSpace, .symbolSpace {
  height: 50%;
  font-size: 1.1vw;
}

.attributeRow {
  background-color: lightgrey;
  display: flex;
  flex-direction: row;
}

.attributeRowName {
  margin: 0.5vw;
  width: 8vw;
}

.attributeValue {
  margin: 0.4vw;
  text-align: center;
  border: 2px solid black;
  padding: 0.2vw;
  background-color: white;
  min-width: 2vw;
  max-width: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
}