*, body, section {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  font-size: 16px;
  color: white;
  font-family: "Josefin Sans", "Roboto", sans-serif;
  overflow: auto;
  background: radial-gradient(#636669, #252627);
}
@media screen and (max-width: 1450px) {
  body {
    justify-content: normal;
  }
}

main {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100dvh;
  min-width: 1329px;
  max-width: 1450px;
}
@media screen and (max-width: 1450px) {
  main {
    justify-content: normal;
  }
}
@media screen and (max-aspect-ratio: 1/5) {
  main {
    height: 50vw;
  }
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

li {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

.flex-row-wrap {
  display: flex;
  flex-flow: row wrap;
}

.flex-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

.flex-column-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

.flex-column-wrap {
  display: flex;
  flex-flow: column wrap;
}

.group-period {
  height: 100%;
  width: 100%;
  position: relative;
}

.group__list,
.period__list {
  background: #2b2d2e;
  box-shadow: 0 0 0.5rem #252627;
}
.group__item,
.period__item {
  cursor: default;
}
.group__item span,
.period__item span {
  transition: all 0.2s ease;
}
.group__item:hover span,
.period__item:hover span {
  box-shadow: 0 0 1rem #3b3a3a;
  font-size: 1.5rem;
}

.group__list {
  position: sticky;
  top: 0;
  display: grid;
  grid-template: repeat(1, 46.6666666667px)/repeat(18, 70px);
  justify-content: center;
  width: 1320px;
  height: 46.6666666667px;
  font-size: 1rem;
  z-index: 10;
  transform: translate(22px, -10px);
}
.group__list.--is-fixed {
  z-index: 20;
}
.group__list.--is-fixed .group-1::before {
  display: none;
}
@media screen and (max-width: 1450px) {
  .group__list.--is-fixed .group-1::after {
    transform: translateX(-25%) rotate(0);
  }
}
.group__item {
  width: 70px;
  justify-content: center;
  align-items: center;
  border-right: 1px solid white;
}
.group__item span:nth-of-type(2) {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.75rem;
}
.group__item.group-1 {
  border-left: 1px solid white;
  transition: all 0.2s ease;
}
.group__item.group-1::after {
  content: "Group";
  position: absolute;
  top: 50%;
  font-size: 0.75rem;
  left: -40px;
  transform: translateY(-50%);
  cursor: auto;
  transition: all 0.2s ease;
}
@media screen and (max-width: 1450px) {
  .group__item.group-1::after {
    top: 1.25rem;
    left: -35px;
    transform: translateY(-50%) rotate(45deg);
  }
}
.group__item.group-1::before {
  transition: all 0.2s ease;
}
@media screen and (max-width: 1450px) {
  .group__item.group-1::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 1px;
    background-color: white;
    transform: rotate(45deg);
    left: -55px;
  }
}
.group__item.group-15 span:nth-of-type(1), .group__item.group-16 span:nth-of-type(1), .group__item.group-17 span:nth-of-type(1) {
  margin-top: 0.75rem;
}

.period__list {
  position: absolute;
  display: grid;
  grid-template: repeat(8, 70px)/repeat(1, 46.6666666667px);
  width: 100%;
  min-width: 46.6666666667px;
  max-width: 46.6666666667px;
  padding-top: 7px;
  font-size: 1rem;
}
.period__list.--is-fixed {
  z-index: 10;
}
.period__list.--is-fixed .period-1::before {
  content: "";
  position: absolute;
  background: #2b2d2e;
  width: 100%;
  height: 75%;
  box-shadow: 0 0 0.5rem #252627;
  transform: translate(0, -125%);
}
.period__list.--is-fixed .period-1::after {
  transform: translateX(25%) rotate(0);
}
.period__item {
  width: 46.6666666667px;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid white;
}
.period__item.period-1 {
  border-top: 1px solid white;
}
@media screen and (min-width: 1590px) {
  .period__item.period-1::before {
    content: "";
    position: absolute;
    background: #2b2d2e;
    width: 100%;
    height: 75%;
    box-shadow: 0 0 0.5rem #252627;
    transform: translate(0, -125%);
  }
}
.period__item.period-1::after {
  content: "Period";
  position: absolute;
  font-size: 0.75rem;
  top: -.9em;
  transform: translateY(-50%);
  cursor: auto;
  transition: all 0.2s ease;
}
@media screen and (max-width: 1450px) {
  .period__item.period-1::after {
    top: -1.25rem;
    left: -3px;
    transform: translateY(-50%) rotate(45deg);
  }
}

.dynamic-periodic-table {
  display: grid;
  position: absolute;
  top: 46.6666666667px;
  grid-gap: 5px;
  grid-template: repeat(10, 70px)/repeat(18, 70px);
  align-self: center;
  justify-self: center;
  justify-content: center;
  width: 1260px;
  margin-top: 1em;
}
@media screen and (max-width: 1447.5px) {
  .dynamic-periodic-table {
    justify-content: normal;
    margin-left: 53px;
  }
}

.element {
  border: 2px solid;
  font-family: "Montserrat", sans-serif;
}
.element__abbr,
.element__name {
  flex-basis: 100%;
  text-align: center;
}
.element__name {
  text-align: center;
  word-break: break-word;
}
.element__abbr {
  font-size: 1rem;
}
.element__atomic-number {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  font-size: 0.65rem;
}
.legend {
  position: relative;
  align-self: center;
  justify-self: center;
  justify-content: space-between;
  align-items: center;
  grid-area: 1/4/3/11;
  width: 650px;
  height: 122.5px;
}
.legend__element-type {
  width: 508px;
  justify-content: space-between;
  height: 100%;
}
.legend__element-type-box {
  cursor: default;
}
.legend__element-type__metals, .legend__element-type__nonmetals {
  position: relative;
  align-self: flex-end;
  justify-content: space-between;
  height: 85%;
}
.legend__element-type__metals__alkali-metal, .legend__element-type__metals__alkali-earth-metal, .legend__element-type__metals__transition-metal, .legend__element-type__metals__post-transition-metal, .legend__element-type__nonmetals__alkali-metal, .legend__element-type__nonmetals__alkali-earth-metal, .legend__element-type__nonmetals__transition-metal, .legend__element-type__nonmetals__post-transition-metal {
  justify-content: center;
  width: 42px;
  height: 100%;
  text-align: center;
  margin-right: 5px;
  border: 2px solid;
  transition: all 0.2s ease;
}
.legend__element-type__metals__alkali-metal:hover, .legend__element-type__metals__alkali-earth-metal:hover, .legend__element-type__metals__transition-metal:hover, .legend__element-type__metals__post-transition-metal:hover, .legend__element-type__nonmetals__alkali-metal:hover, .legend__element-type__nonmetals__alkali-earth-metal:hover, .legend__element-type__nonmetals__transition-metal:hover, .legend__element-type__nonmetals__post-transition-metal:hover {
  transform: scale(1.075);
}
.legend__element-type__metals__alkali-metal span, .legend__element-type__metals__alkali-earth-metal span, .legend__element-type__metals__transition-metal span, .legend__element-type__metals__post-transition-metal span, .legend__element-type__nonmetals__alkali-metal span, .legend__element-type__nonmetals__alkali-earth-metal span, .legend__element-type__nonmetals__transition-metal span, .legend__element-type__nonmetals__post-transition-metal span {
  float: left;
  font-size: 0.85rem;
  width: 100px;
}
.legend__element-type__metals__lanthanoid-actinoid, .legend__element-type__nonmetals__lanthanoid-actinoid {
  align-content: space-between;
  justify-content: center;
  width: 105px;
  margin-right: 5px;
}
.legend__element-type__metals__lanthanoid-actinoid .lanthanoid,
.legend__element-type__metals__lanthanoid-actinoid .actinoid, .legend__element-type__nonmetals__lanthanoid-actinoid .lanthanoid,
.legend__element-type__nonmetals__lanthanoid-actinoid .actinoid {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48%;
  border: 2px solid;
  transition: all 0.2s ease;
}
.legend__element-type__metals__lanthanoid-actinoid .lanthanoid span,
.legend__element-type__metals__lanthanoid-actinoid .actinoid span, .legend__element-type__nonmetals__lanthanoid-actinoid .lanthanoid span,
.legend__element-type__nonmetals__lanthanoid-actinoid .actinoid span {
  font-size: 0.85rem;
}
.legend__element-type__metals__lanthanoid-actinoid .lanthanoid:hover,
.legend__element-type__metals__lanthanoid-actinoid .actinoid:hover, .legend__element-type__nonmetals__lanthanoid-actinoid .lanthanoid:hover,
.legend__element-type__nonmetals__lanthanoid-actinoid .actinoid:hover {
  transform: scale(1.075);
}
.legend__element-type__metals__lanthanoid-actinoid .lanthanoid, .legend__element-type__nonmetals__lanthanoid-actinoid .lanthanoid {
  border-color: #f4c3a9;
  color: #f4c3a9;
}
.legend__element-type__metals__lanthanoid-actinoid .actinoid, .legend__element-type__nonmetals__lanthanoid-actinoid .actinoid {
  border-color: #ea9971;
  color: #ea9971;
}
.legend__element-type__metals__alkali-metal, .legend__element-type__nonmetals__alkali-metal {
  border-color: #e74d3c;
  color: #e74d3c;
}
.legend__element-type__metals__alkali-metal span, .legend__element-type__nonmetals__alkali-metal span {
  transform: rotate(90deg) translate(0, 30px);
}
.legend__element-type__metals__alkali-earth-metal, .legend__element-type__nonmetals__alkali-earth-metal {
  border-color: #e77e23;
  color: #e77e23;
}
.legend__element-type__metals__alkali-earth-metal span, .legend__element-type__nonmetals__alkali-earth-metal span {
  transform: rotate(90deg) translate(0, 31px);
  line-height: .9em;
}
.legend__element-type__metals__transition-metal, .legend__element-type__nonmetals__transition-metal {
  border-color: #f1c40e;
  color: #f1c40e;
}
.legend__element-type__metals__transition-metal span, .legend__element-type__nonmetals__transition-metal span {
  transform: rotate(90deg) translate(0, 127%);
  line-height: .9em;
}
.legend__element-type__metals__post-transition-metal, .legend__element-type__nonmetals__post-transition-metal {
  margin-right: 0;
  border-color: #1abc9c;
  color: #1abc9c;
}
.legend__element-type__metals__post-transition-metal span, .legend__element-type__nonmetals__post-transition-metal span {
  transform: rotate(90deg) translate(0, 127%);
  line-height: .9em;
}
.legend__element-type__metals::after, .legend__element-type__nonmetals::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: -3px;
  border-right: 2px solid white;
  border-left: 2px solid white;
  transform: translateY(-100%);
}
.legend__element-type__metals {
  width: 306px;
}
.legend__element-type__metals::after {
  content: "Metals";
}
.legend__element-type__nonmetals {
  width: 92px;
}
.legend__element-type__nonmetals__other-nonmetal, .legend__element-type__nonmetals__noble-gas {
  width: 42px;
  text-align: center;
  transition: all 0.2s ease;
}
.legend__element-type__nonmetals__other-nonmetal span, .legend__element-type__nonmetals__noble-gas span {
  transform: rotate(90deg) translate(35px, 13px);
  line-height: .9em;
}
.legend__element-type__nonmetals__other-nonmetal:hover, .legend__element-type__nonmetals__noble-gas:hover {
  transform: scale(1.075);
}
.legend__element-type__nonmetals__other-nonmetal {
  margin-right: 5px;
  border: 2px solid #95a6a7;
  color: #95a6a7;
}
.legend__element-type__nonmetals__noble-gas {
  border: 2px solid #8d43ad;
  color: #8d43ad;
}
.legend__element-type__nonmetals__noble-gas span {
  transform: rotate(90deg) translate(35px, 0px);
}
.legend__element-type__nonmetals span {
  float: left;
  font-size: 0.85rem;
}
.legend__element-type__nonmetals::after {
  content: "Non-metals";
}
.legend__element-type__metalloid {
  height: 100%;
  width: 42px;
  color: #3398db;
  border: 2px solid #3398db;
  transition: all 0.2s ease;
}
.legend__element-type__metalloid span {
  float: left;
  font-size: 0.85rem;
  width: 100px;
  transform: rotate(90deg) translate(70%, 30px);
}
.legend__element-type__metalloid:hover {
  transform: scale(1.075);
}
.legend__element-type__unknown {
  width: 42px;
  height: 100%;
  border: 2px solid #b7950b;
  color: #b7950b;
  transition: all 0.2s ease;
}
.legend__element-type__unknown span {
  float: left;
  font-size: 0.85rem;
  width: 100px;
  transform: rotate(90deg) translate(0, 52%);
  line-height: .9em;
}
.legend__element-type__unknown:hover {
  transform: scale(1.075);
}
.legend__element-state {
  justify-content: space-between;
  align-content: space-between;
  width: 125px;
  height: 100%;
}
.legend__element-state__gas, .legend__element-state__liquid, .legend__element-state__solid, .legend__element-state__unknown {
  justify-content: center;
  align-items: center;
  width: 58.75px;
  height: 58.75px;
  border: 2px white;
  transition: all 0.2s ease;
}
.legend__element-state__gas span, .legend__element-state__liquid span, .legend__element-state__solid span, .legend__element-state__unknown span {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.85rem;
}
.legend__element-state__gas:hover, .legend__element-state__liquid:hover, .legend__element-state__solid:hover, .legend__element-state__unknown:hover {
  transform: scale(1.075);
}
.legend__element-state__gas {
  border-style: dashed;
}
.legend__element-state__liquid {
  border-style: solid;
}
.legend__element-state__solid {
  border: double;
}
.legend__element-state__unknown {
  border-style: dotted;
}

.temperature {
  align-items: center;
  justify-content: space-between;
  grid-area: 3/3/3/12;
  margin-left: 15px;
  margin-bottom: 10px;
  font-weight: 600;
  button {
    font-weight: 600;
  }
}
.temperature__inputs {
  align-items: center;
}
.temperature__inputs__slider {
  position: relative;
  width: 397.5px;
  height: 3.3333333333px;
  border-radius: 5px;
  background-color: white;
  padding: 0;
  margin: 0 10px 0 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
}
.temperature__inputs__slider::after {
  content: "Drag and drop to modify temperature and element's state";
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Josefin Sans", "Roboto", sans-serif;
  color: white;
}
.temperature__inputs__slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 50%;
  background-color: #6f7376;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.temperature__inputs__slider::-webkit-slider-thumb::after {
  background-color: #6f7376;
}
.temperature__inputs__slider::-webkit-slider-thumb:hover {
  background-color: #a3a6a8;
}
.temperature__inputs__slider::-webkit-slider-thumb:active::-webkit-slider-thumb {
  background-color: #eee;
}
.temperature__inputs__slider::-moz-range-thumb {
  width: 17.5px;
  height: 17.5px;
  -moz-appearance: none;
       appearance: none;
  border-radius: 50%;
  background-color: #6f7376;
  cursor: pointer;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.temperature__inputs__slider::-moz-range-thumb:hover {
  background-color: #a3a6a8;
}
.temperature__inputs__slider::-moz-range-thumb::-moz-range-thumb {
  background-color: #898c90;
}
.temperature__inputs ::-moz-range-track {
  background: white;
  border: 0;
}
.temperature__inputs input::-moz-focus-inner,
.temperature__inputs input::-moz-focus-outer {
  border: 0;
}
.temperature__inputs__result {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 35px;
  color: white;
  border: 2px solid #6f7376;
}
.temperature__inputs__result::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  border-top: 5px solid transparent;
  border-right: 7.5px solid #6f7376;
  border-bottom: 5px solid transparent;
  transform: translate(-100%, -100%);
}
.temperature__unit-conversion {
  align-content: space-evenly;
  text-align: center;
  width: 105px;
  transform: translateY(-1px);
}
.temperature__unit-conversion p {
  flex-basis: 100%;
  opacity: 0.5;
}
.temperature .reset__temperature {
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  align-content: center;
  position: relative;
  width: 112px;
  height: 46.6666666667px;
  overflow: hidden;
  background: transparent;
  margin-right: .6em;
  font-family: "Josefin Sans", "Roboto", sans-serif;
  color: #b6c6d3;
  border: 2px solid #b6c6d3;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  z-index: 0;
  transition: all 0.3s ease;
}
.temperature .reset__temperature span {
  position: relative;
  z-index: 100;
}
.temperature .reset__temperature.--is-visible {
  opacity: 1;
  visibility: visible;
}
.temperature .reset__temperature::before, .temperature .reset__temperature::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  background-color: #d1dce4;
  border-radius: 50%;
}
.temperature .reset__temperature::before {
  left: -1.25rem;
  transform: translate(-50%, -50%);
}
.temperature .reset__temperature::after {
  right: -1.25rem;
  transform: translate(50%, -50%);
}
.temperature .reset__temperature:hover {
  -webkit-animation: focus 0.001s 0.8s forwards;
          animation: focus 0.001s 0.8s forwards;
}
.temperature .reset__temperature:hover::before {
  -webkit-animation: criss-cross-left 1s both alternate, lighten-background 0.001s 0.8s forwards;
          animation: criss-cross-left 1s both alternate, lighten-background 0.001s 0.8s forwards;
}
.temperature .reset__temperature:hover::after {
  -webkit-animation: criss-cross-right 1s both alternate, lighten-background 0.001s 0.8s forwards;
          animation: criss-cross-right 1s both alternate, lighten-background 0.001s 0.8s forwards;
}
.temperature .reset__temperature:active {
  transform: scale(0.95);
}

.element {
  position: relative;
  width: 70px;
  height: 70px;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}
.element[data-element-type=other-nonmetal] {
  color: #95a6a7;
  border-color: #95a6a7;
}
.element[data-element-type=alkali-metal] {
  color: #e74d3c;
  border-color: #e74d3c;
}
.element[data-element-type=alkali-earth-metal] {
  color: #e77e23;
  border-color: #e77e23;
}
.element[data-element-type=transition-metal] {
  color: #f1c40e;
  border-color: #f1c40e;
}
.element[data-element-type=Lanthanoid] {
  color: #f4c3a9;
  border-color: #f4c3a9;
}
.element[data-element-type=Actinoid] {
  color: #ea9971;
  border-color: #ea9971;
}
.element[data-element-type=post-transition-metal] {
  color: #1abc9c;
  border-color: #1abc9c;
}
.element[data-element-type=metalloid] {
  color: #3398db;
  border-color: #3398db;
}
.element[data-element-type=noble-gas] {
  color: #8d43ad;
  border-color: #8d43ad;
}
.element[data-element-type=unknown] {
  color: #b7950b;
  border-color: #b7950b;
}
.element[data-element-state=gas] {
  border-style: dashed;
}
.element[data-element-state=liquid] {
  border-style: solid;
}
.element[data-element-state=solid] {
  border: double;
}
.element[data-element-state=unknown] {
  border-style: dotted;
}
.element[data-element-name=Hydrogen] {
  grid-area: 1/1;
  margin-top: 1px;
}
.element[data-element-name=Lithium] {
  grid-area: 2/1;
}
.element[data-element-name=Sodium] {
  grid-area: 3/1;
}
.element[data-element-name=Potassium] {
  grid-area: 4/1;
}
.element[data-element-name=Rubidium] {
  grid-area: 5/1;
}
.element[data-element-name=Caesium] {
  grid-area: 6/1;
}
.element[data-element-name=Francium] {
  grid-area: 7/1;
}
.element[data-element-name=Beryllium] {
  grid-area: 2/2;
}
.element[data-element-name=Magnesium] {
  grid-area: 3/2;
}
.element[data-element-name=Calcium] {
  grid-area: 4/2;
}
.element[data-element-name=Stronium] {
  grid-area: 5/2;
}
.element[data-element-name=Barium] {
  grid-area: 6/2;
}
.element[data-element-name=Radium] {
  grid-area: 7/2;
}
.element[data-element-name=Scandium] {
  grid-area: 4/3;
}
.element[data-element-name=Yttrium] {
  grid-area: 5/3;
}
.element[data-element-name=Lanthanoids] {
  grid-area: 6/3;
}
.element[data-element-name=Actinoids] {
  grid-area: 7/3;
}
.element[data-element-name=Titanium] {
  grid-area: 4/4;
}
.element[data-element-name=Zirconium] {
  grid-area: 5/4;
}
.element[data-element-name=Hafnium] {
  grid-area: 6/4;
}
.element[data-element-name=Rutherfordium] {
  grid-area: 7/4;
}
.element[data-element-name=Vanadium] {
  grid-area: 4/5;
}
.element[data-element-name=Niobium] {
  grid-area: 5/5;
}
.element[data-element-name=Tantalum] {
  grid-area: 6/5;
}
.element[data-element-name=Dubnium] {
  grid-area: 7/5;
}
.element[data-element-name=Chromium] {
  grid-area: 4/6;
}
.element[data-element-name=Molybdenum] {
  grid-area: 5/6;
}
.element[data-element-name=Tungsten] {
  grid-area: 6/6;
}
.element[data-element-name=Seaborgium] {
  grid-area: 7/6;
}
.element[data-element-name=Manganese] {
  grid-area: 4/7;
}
.element[data-element-name=Technetium] {
  grid-area: 5/7;
}
.element[data-element-name=Rhenium] {
  grid-area: 6/7;
}
.element[data-element-name=Bohrium] {
  grid-area: 7/7;
}
.element[data-element-name=Iron] {
  grid-area: 4/8;
}
.element[data-element-name=Ruthenium] {
  grid-area: 5/8;
}
.element[data-element-name=Osmium] {
  grid-area: 6/8;
}
.element[data-element-name=Hassium] {
  grid-area: 7/8;
}
.element[data-element-name=Cobalt] {
  grid-area: 4/9;
}
.element[data-element-name=Rhodium] {
  grid-area: 5/9;
}
.element[data-element-name=Iridium] {
  grid-area: 6/9;
}
.element[data-element-name=Meitnerium] {
  grid-area: 7/9;
}
.element[data-element-name=Nickel] {
  grid-area: 4/10;
}
.element[data-element-name=Palladium] {
  grid-area: 5/10;
}
.element[data-element-name=Platinum] {
  grid-area: 6/10;
}
.element[data-element-name=Darmstadtium] {
  grid-area: 7/10;
}
.element[data-element-name=Copper] {
  grid-area: 4/11;
}
.element[data-element-name=Silver] {
  grid-area: 5/11;
}
.element[data-element-name=Gold] {
  grid-area: 6/11;
}
.element[data-element-name=Roentgenium] {
  grid-area: 7/11;
}
.element[data-element-name=Zinc] {
  grid-area: 4/12;
}
.element[data-element-name=Cadmium] {
  grid-area: 5/12;
}
.element[data-element-name=Mercury] {
  grid-area: 6/12;
}
.element[data-element-name=Copernicium] {
  grid-area: 7/12;
}
.element[data-element-name=Boron] {
  grid-area: 2/13;
}
.element[data-element-name=Aluminium] {
  grid-area: 3/13;
}
.element[data-element-name=Galium] {
  grid-area: 4/13;
}
.element[data-element-name=Indium] {
  grid-area: 5/13;
}
.element[data-element-name=Thallium] {
  grid-area: 6/13;
}
.element[data-element-name=Nihonium] {
  grid-area: 7/13;
}
.element[data-element-name=Carbon] {
  grid-area: 2/14;
}
.element[data-element-name=Silicon] {
  grid-area: 3/14;
}
.element[data-element-name=Germanium] {
  grid-area: 4/14;
}
.element[data-element-name=Tin] {
  grid-area: 5/14;
}
.element[data-element-name=Lead] {
  grid-area: 6/14;
}
.element[data-element-name=Flerovium] {
  grid-area: 7/14;
}
.element[data-element-name=Nitrogen] {
  grid-area: 2/15;
}
.element[data-element-name=Phosphorus] {
  grid-area: 3/15;
}
.element[data-element-name=Arsenic] {
  grid-area: 4/15;
}
.element[data-element-name=Antimony] {
  grid-area: 5/15;
}
.element[data-element-name=Bismuth] {
  grid-area: 6/15;
}
.element[data-element-name=Moscovium] {
  grid-area: 7/15;
}
.element[data-element-name=Oxygen] {
  grid-area: 2/16;
}
.element[data-element-name=Sulfur] {
  grid-area: 3/16;
}
.element[data-element-name=Selenium] {
  grid-area: 4/16;
}
.element[data-element-name=Tellurium] {
  grid-area: 5/16;
}
.element[data-element-name=Polonium] {
  grid-area: 6/16;
}
.element[data-element-name=Livemorium] {
  grid-area: 7/16;
}
.element[data-element-name=Fluorine] {
  grid-area: 2/17;
}
.element[data-element-name=Chlorine] {
  grid-area: 3/17;
}
.element[data-element-name=Bromine] {
  grid-area: 4/17;
}
.element[data-element-name=Iodine] {
  grid-area: 5/17;
}
.element[data-element-name=Astatine] {
  grid-area: 6/17;
}
.element[data-element-name=Tennessine] {
  grid-area: 7/17;
}
.element[data-element-name=Helium] {
  grid-area: 1/18;
}
.element[data-element-name=Neon] {
  grid-area: 2/18;
}
.element[data-element-name=Argon] {
  grid-area: 3/18;
}
.element[data-element-name=Krypton] {
  grid-area: 4/18;
}
.element[data-element-name=Xenon] {
  grid-area: 5/18;
}
.element[data-element-name=Radon] {
  grid-area: 6/18;
}
.element[data-element-name=Oganesson] {
  grid-area: 7/18;
}
.element[data-element-name=Lanthanum] {
  grid-area: 9/3;
}
.element[data-element-name=Cerium] {
  grid-area: 9/4;
}
.element[data-element-name=Praseodymium] {
  grid-area: 9/5;
}
.element[data-element-name=Neodymium] {
  grid-area: 9/6;
}
.element[data-element-name=Promethium] {
  grid-area: 9/7;
}
.element[data-element-name=Samarium] {
  grid-area: 9/8;
}
.element[data-element-name=Europium] {
  grid-area: 9/9;
}
.element[data-element-name=Gadolinium] {
  grid-area: 9/10;
}
.element[data-element-name=Terbium] {
  grid-area: 9/11;
}
.element[data-element-name=Dysprosium] {
  grid-area: 9/12;
}
.element[data-element-name=Holmium] {
  grid-area: 9/13;
}
.element[data-element-name=Erbium] {
  grid-area: 9/14;
}
.element[data-element-name=Thulium] {
  grid-area: 9/15;
}
.element[data-element-name=Ytterbium] {
  grid-area: 9/16;
}
.element[data-element-name=Lutetium] {
  grid-area: 9/17;
}
.element[data-element-name=Actinium] {
  grid-area: 10/3;
}
.element[data-element-name=Thorium] {
  grid-area: 10/4;
}
.element[data-element-name=Protactinium] {
  grid-area: 10/5;
}
.element[data-element-name=Uranium] {
  grid-area: 10/6;
}
.element[data-element-name=Neptunium] {
  grid-area: 10/7;
}
.element[data-element-name=Plutonium] {
  grid-area: 10/8;
}
.element[data-element-name=Americium] {
  grid-area: 10/9;
}
.element[data-element-name=Curium] {
  grid-area: 10/10;
}
.element[data-element-name=Berkelium] {
  grid-area: 10/11;
}
.element[data-element-name=Californium] {
  grid-area: 10/12;
}
.element[data-element-name=Einsteinium] {
  grid-area: 10/13;
}
.element[data-element-name=Fermium] {
  grid-area: 10/14;
}
.element[data-element-name=Mendelevium] {
  grid-area: 10/15;
}
.element[data-element-name=Nobelium] {
  grid-area: 10/16;
}
.element[data-element-name=Lawrencium] {
  grid-area: 10/17;
}
.element .tooltip {
  position: absolute;
  padding: 0.25rem;
  text-align: center;
  background-color: white;
  border-radius: 1px;
  visibility: hidden;
  z-index: 100;
  transition: visibility 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 90%;
  color: #444444;
  span {
    display: block;
    font-size:120%;
    color: white;
  }
}
.element .tooltip.--is-hidden {
  display: none;
}
.element .tooltip.right-tooltip {
  left: 100%;
  margin-left: 0.75rem;
}
.element .tooltip.right-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  border-top: 5px solid transparent;
  border-right: 7.5px solid white;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.element .tooltip.left-tooltip {
  right: 100%;
  margin-right: 0.75rem;
}
.element .tooltip.left-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border-top: 5px solid transparent;
  border-left: 7.5px solid white;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.element .tooltip.top-tooltip {
  top: -0.75rem;
  transform: translateY(-100%);
}
.element .tooltip.top-tooltip::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  border-top: 7.5px solid white;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: translate(-50%, -100%);
}
.element .tooltip.bottom-tooltip {
  bottom: -0.75rem;
  transform: translateY(100%);
}
.element .tooltip.bottom-tooltip::after {
  content: "";
  position: absolute;
  bottom: unset;
  top: 1px;
  left: 50%;
  border-bottom: 7.5px solid white;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: translate(-50%, -100%);
}
.element:hover:not([data-element-name=Lanthanoids]):not([data-element-name=Actinoids]), .element.--is-active {
  box-shadow: 0 0 1rem -3px #eeeeee;
  transform: scale(1.05);
}
.element.--is-inactive {
  opacity: 0.25;
}
.element.--is-triggered {
  z-index: 10;
}
.element:hover[data-element-name=Lanthanoids], .element:hover[data-element-name=Actinoids] {
  transform: scale(1.075);
}
.element:hover .tooltip {
  visibility: visible;
}

.modal {
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(59, 58, 72, 0.975);
  z-index: 1000;
  will-change: visibility, opacity;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__dialog {
  position: relative;
  max-width: 750px;
  width: 100%;
  max-height: 90%;
  height: 100%;
  padding: 1.2rem;
  border: none;
  background: none;
  z-index:2;
}
.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  opacity: 0;
  border: 3px solid transparent;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content.--is-visible {
  opacity: 1;
  border: 3px solid transparent;
  color: white;
}
.modal__content.--is-visible::before, .modal__content.--is-visible::after {
  transform: scale(1);
}
.modal__content::before, .modal__content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  transform: scale(0);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content::before {
  border-bottom: 3px solid #d3dce1;
  border-left: 3px solid #d3dce1;
  transform-origin: 0 100%;
}
.modal__content::after {
  border-top: 3px solid #d3dce1;
  border-right: 3px solid #d3dce1;
  transform-origin: 100% 0%;
}
.modal__content__properties {
  display: grid;
  gap: 0 0.5rem;
  height: 100%;
}
.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.15rem;
  background: transparent;
  cursor: pointer;
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__close svg {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid #d3dce1;
  fill: #d3dce1;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__close:hover svg {
  background: #d3dce1;
  fill: #3b3a3a;
}
.modal.--modal__background {
  background: #888686;
}
.modal.--is-visible {
  visibility: visible;
  opacity: 1;
}

.modal__content__properties .content {
  text-transform: math-auto;
}
.modal__content__properties .element-property {
  text-align: center;
  gap: 0.25rem;
}
.modal__content__properties .element-property .title {
  border-bottom: 1px solid #d3dce1;
  margin: 0 1rem;
  color: #d3dce1;
  font-weight: 600;
}
.modal__content__properties .element-name {
  grid-row: 3;
  grid-column: 1/3;
}
.modal__content__properties .element-symbol {
  grid-row: 3;
  grid-column: 3/5;
}
.modal__content__properties .element-atomic-number {
  grid-row: 3;
  grid-column: 5/7;
}
.modal__content__properties .element-atomic-weight {
  grid-row: 3;
  grid-column: 7/10;
}
.modal__content__properties .element-group {
  grid-row: 4;
  grid-column: 1/2;
}
.modal__content__properties .element-period {
  grid-row: 4;
  grid-column: 2/3;
}
.modal__content__properties .element-category {
  grid-row: 4;
  grid-column: 3/8;
}
.modal__content__properties .element-block {
  grid-row: 4;
  grid-column: 8/10;
}
.modal__content__properties .element-electron-configuration {
  grid-row: 5;
  grid-column: 1/4;
}
.modal__content__properties .element-electron-per-shell {
  grid-row: 5;
  grid-column: 4/7;
}
.modal__content__properties .element-phase-at-STP {
  grid-row: 5;
  grid-column: 7/10;
}
.modal__content__properties .element-melting-point {
  grid-row: 6;
  grid-column: 1/3;
}
.modal__content__properties .element-boiling-point {
  grid-row: 6;
  grid-column: 3/6;
}
.modal__content__properties .element-oxidation-states {
  grid-row: 6;
  grid-column: 6/10;
}
.modal__content__properties .element-electronegativity {
  grid-row: 7;
  grid-column: 1/3;
}
.modal__content__properties .element-ionization-energy {
  grid-row: 7;
  grid-column: 3/6;
}
.modal__content__properties .element-covalent-radius {
  grid-row: 7;
  grid-column: 6/10;
}
.modal__content__properties .element-van-der-waals-radius {
  grid-row: 8;
  grid-column: 1/5;
}
.modal__content__properties .element-crystal-structure {
  grid-row: 8;
  grid-column: 5/10;
}
.modal__content__properties .element-thermal-conductivity {
  grid-row: 9;
  grid-column: 1/4;
}
.modal__content__properties .element-magnetic-order {
  grid-row: 9;
  grid-column: 4/7;
}
.modal__content__properties .element-magnetic-susceptibility {
  grid-row: 9;
  grid-column: 7/10;
}
.modal__content__properties .element-miscellaneous {
  grid-row: 10;
  grid-column: 1/11;
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -1.5rem;
  }
  50% {
    left: 50%;
    width: 15px;
    height: 15px;
  }
  100% {
    left: 50%;
    width: 150%;
    height: 150%;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -1.5rem;
  }
  50% {
    left: 50%;
    width: 15px;
    height: 15px;
  }
  100% {
    left: 50%;
    width: 150%;
    height: 150%;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -1.5rem;
  }
  50% {
    right: 50%;
    width: 15px;
    height: 15px;
  }
  100% {
    right: 50%;
    width: 150%;
    height: 150%;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -1.5rem;
  }
  50% {
    right: 50%;
    width: 15px;
    height: 15px;
  }
  100% {
    right: 50%;
    width: 150%;
    height: 150%;
  }
}
@-webkit-keyframes focus {
  to {
    border: 2px solid #d1dce4;
    color: #d1dce4;
    font-weight: 600;
    box-shadow: 0 0 1rem #d1dce4;
  }
}
@keyframes focus {
  to {
    border: 2px solid #d1dce4;
    color: #d1dce4;
    font-weight: 600;
    box-shadow: 0 0 1rem #d1dce4;
  }
}
@-webkit-keyframes lighten-background {
  to {
    background-color: #6f7376;
  }
}
@keyframes lighten-background {
  to {
    background-color: #6f7376;
  }
}
@-webkit-keyframes clockwise-rotation-1 {
  from {
    transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
  }
}
@keyframes clockwise-rotation-1 {
  from {
    transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes clockwise-rotation-2 {
  from {
    transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
  }
  to {
    transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
  }
}
@keyframes clockwise-rotation-2 {
  from {
    transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
  }
  to {
    transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
  }
}
@-webkit-keyframes up-and-down {
  0% {
    margin-top: -1rem;
  }
  50% {
    margin-top: 1rem;
  }
  100% {
    margin-top: -1rem;
  }
}
@keyframes up-and-down {
  0% {
    margin-top: -1rem;
  }
  50% {
    margin-top: 1rem;
  }
  100% {
    margin-top: -1rem;
  }
}
.periodic-container,.legend__element-type {
  .element.flex-row-wrap, .legend-box {
    background: currentColor;
    border-color: #eee;
    border-width: 2px;
    font-weight: 600;
    cursor: pointer;
    abbr, span {
        filter: invert(.5) brightness(10%);
    }
  }
}
.periodic-container {
  display: grid;
}
#game-container {
  position: relative;
  top: 64px;
  left: 893px;
  width: 0px;
  z-index:100;
  #start-game-btn {
    padding: 10px 17px;
    opacity: 1;
    visibility: visible;
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
  }
  #level-selection, #game-ui-container {
    transition: display .3s ease-in-out allow-discrete;
    position: absolute;
    right: calc(100% + 10px);
    top: -12px;
    height: 205px;
    width: 675px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    .btn-container {
      margin-top: 1em;
    }
  }
  #level-selection {  
    .btn-container {
      margin-top: 1.4em;
    }
    h3 {
      margin-top: 1em;
      opacity: .9;
    }
  }
  #game-ui-container {
    #question-text {
      font-size: 150%;
      line-height: 120%;
      font-weight: 600;
      text-align: center;
    }
    #submit-answer-btn {
      margin-top: 1em;
      transition: opacity .3s ease;
      opacity: 0;
    }
    #question-clue-container {
      position: absolute;
    }
  }
}
#game-timer, #score {
  position: absolute;
  left: 0;
  bottom: 0;
}
#score {
  bottom: 15px;
  left: 10px;
}
div.scoring {
  display: flex;
  gap: .4em;
  align-items: center;
  img {
    width: 40px;
    height: 52px;
  }
  span {
    font-size: 200%;
    font-weight: 600;
  }
}
.leaderboard-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  #player-name {
    padding: 7.5px 12.5px;
  }
}
#game-timer {
  left: 50%;
  transform: translateX(-50%);
}
#question-timer {
  position: absolute;
  bottom: 0;
  right: 0;
  .circle_animation {
    stroke-dasharray: 220; 
    stroke-dashoffset: 220;
    transition: all 1s linear;
  }
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 2px));
    font-size: 140%;
  }
}
#question-clue-container {
    display: flex;
    align-items: center;
    gap: 10px;
    right: 0;
    span {
      position: absolute;
      left: 60px;
      top: 16px;
      width: 265px;
    }
}
#clue-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    right: -42px;
    top: 20px;
}
/*Change Skin*/
.element:not([data-element-name="Lanthanoids"]):not([data-element-name="Actinoids"]) span.element__name {
    display: none;
}
.element__abbr{
  font-size: 1.25rem;
  transform: translateY(7px);
}
.dynamic-periodic-table {
  >.legend, >.element, >.temperature {
    transition: display .3s ease-in-out allow-discrete;
  }
}
body.start-clicked:not([data-game-state=finished]) {
  .dynamic-periodic-table {
    >.legend, >.element, >.temperature {
      display: none;
    }
  }
}
.kave-btn {
  position: relative;
  border: solid 1px rgba(191, 207, 236, 0.5);
  background: none;
  color: rgba(191, 207, 236, 0.75);
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1.8px;
  width: 150px;
  height: 48px;
  padding: 0;
  transition: all 0.25s ease;
  outline: none;
  cursor: pointer;
}
.kave-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 60px;
  height: 1px;
  transform: translateY(-1px);
  background: rgba(191, 207, 236, 1);
  transition: all 0.25s ease;
}
.kave-btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 60px;
  height: 1px;
  transform: translateY(1px);
  background: rgba(191, 207, 236, 1);
  transition: all 0.25s ease;
}
.kave-btn:hover {
  box-shadow: 1px 1px 8px rgba(142, 238, 255, 0.3);
  color: #c0f6ff;
  text-shadow: 0 0 8px rgba(134, 225, 241, 0.4);
}
.kave-btn:hover.kave-btn:before {
  left: 0;
  width: 20px;
}
.kave-btn:hover.kave-btn:after {
  right: 0;
  width: 20px;
}
.kave-btn:hover .kave-line:before {
  bottom: 0;
}
.kave-btn:hover .kave-line:after {
  top: 0;
}
.kave-line:before {
  content: "";
  position: absolute;
  bottom: 30%;
  right: 0;
  width: 1px;
  height: 20px;
  transform: translateX(1px);
  background: rgba(191, 207, 236, 1);
  transition: all 0.25s ease;
}
.kave-line:after {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 1px;
  height: 20px;
  transform: translateX(-1px);
  background: rgba(191, 207, 236, 1);
  transition: all 0.25s ease;
}

.game-started {
  .periodic-container {
    .element.flex-row-wrap:not(.selected) {
      background: rgba(255, 255, 255, .85);
      abbr, span {
          filter: invert(.5) brightness(20%);
      }
      span {
        display: none;
      }
      abbr {
        transform: scale(1.05);
      }
      &:hover {
      background: rgba(255, 255, 255, .95);
      }
      &.nop {
        span:nth-child(2) {
          display: inherit;
        }
      }
    }
    .selected {
      border-color: black;
    }
  }
  #submit-answer-btn {
    opacity: 1!important;
  }
}
section.aprendoeasy {
  position: fixed;
  left: 51%;
  top: 55%;
  transform: translate(-50%, -50%);
}
section.aprendoeasy:hover *:not(.electron) {
  animation-play-state: paused;
}

[class^=ring] {
  animation: glow 3s linear infinite;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
  height: 30em;
  position: absolute;
  transition: 1s transform ease-in-out;
  width: 32em;
  top: -15em;
  left: -16em;
}
[class^=ring] .electron, [class^=ring] .center {
  animation: rotate 0.75s linear infinite;
  border-radius: 50%;
  height: 100%;
  position: relative;
  width: 100%;
}
[class^=ring] .electron:after, [class^=ring] .center:after {
  animation: squash 0.75s linear infinite;
  transform: scale(2, 1);
  border-radius: 50%;
  content: "";
  left: 50%;
  height: 0.25em;
  opacity: 0.8;
  position: absolute;
  top: 0;
  box-shadow: 0 0 10px inherit;
  width: 2em;
}

.ring1 {
  transform: rotate(120deg) scale(0.333, 1);
}
.ring1 div:after {
  background: #2ecc71;
  box-shadow: 0 0 20px #2ecc71;
}

.ring2 {
  transform: rotate(240deg) scale(0.333, 1);
}
.ring2 div:after {
  background: #3498db;
  box-shadow: 0 0 20px #3498db;
}

.ring3 {
  transform: rotate(360deg) scale(0.333, 1);
}
.ring3 div:after {
  background: #e74c3c;
  box-shadow: 0 0 20px #e74c3c;
}

.center {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  height: 3em;
  box-shadow: 0 0 15px -4px rgba(64, 224, 208, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.3);
  transition: 1s transform ease-in-out;
  width: 3em;
  animation: pulse 3.75s linear infinite;
}

.ring1 {
  animation: vertical 7.5s linear infinite;
}

.ring2 {
  animation: horizontal 7.5s linear infinite;
}

.ring3 {
  animation: lateral 7.5s linear infinite;
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }
}
@keyframes pulse {
  0%, 10% {
    transform: translate(-50%, -50%) scale(1);
  }
  45%, 55% {
    transform: translate(-50%, -50%) scale(0.75);
  }
  90%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: scaleY(0.86) rotate(0deg);
  }
  100% {
    transform: scaleY(0.86) rotate(360deg);
  }
}
@keyframes squash {
  0%, 50%, 100% {
    transform: scale(1, 1);
    top: -2.6em;
  }
  25%, 75% {
    transform: scale(2, 1);
    top: -1.2em;
  }
}
@-webkit-keyframes horizontal {
  from {
    -webkit-transform: rotate(240deg) rotateX(0deg) scale(0.333, 1);
  }
  to {
    -webkit-transform: rotate(240deg) rotateX(360deg) scale(0.333, 1);
  }
}
@keyframes vertical {
  from {
    -webkit-transform: rotate(120deg) rotateX(0deg) scale(0.333, 1);
  }
  to {
    -webkit-transform: rotate(120deg) rotateX(360deg) scale(0.333, 1);
  }
}
@keyframes lateral {
  from {
    -webkit-transform: rotate(0deg) rotateX(0deg) scale(0.333, 1);
  }
  to {
    -webkit-transform: rotate(0deg) rotateX(360deg) scale(0.333, 1);
  }
}
body[data-game-state=finished] {
  .modal__content__properties {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    margin-top: 20px;
    height: auto;
    align-items: center;
    color: #d1dce4;
  }
  .modal__content::before, .modal__content::after {
    display: none;
  }
  #level-selection {
    background: radial-gradient(#3b3d3e, #3b3d3f);
  }
}

/* Answer indicator styles */
.answer-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: fadeInOut 4s ease-in-out;
}

.answer-indicator.correct {
  border: 2px solid #4CAF50;
}

.answer-indicator.incorrect {
  border: 2px solid #f44336;
}

.answer-icon {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.answer-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.answer-explanation {
  font-size: 16px;
  line-height: 1.4;
  max-width: 400px;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.logo {
  position: absolute;
  z-index: 0;
  bottom: 7.5%;
  left: 50%;
  opacity: .5;
  transform: translateX(-50%);
  width: 420px;
  height: 144px;
  transform: translateX(-50%);
}