TIC TAC TOE
- sep 7, 2024
- 14
We'll show you how to make an interactive periodic table that chemistry students can easily understand using just HTML and CSS.
How to Design a periodic table:
Make an HTML file first, preferably with a simple grid structure. For every chemical element, use <div> elements.
Let's add CSS styles for the layout, To align the items in the right periodic table locations, use CSS Grid.
Add functionality For instance, a pop-up window may appear with comprehensive information about an element when a user clicks on it.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Periodic Table of Elements - HTML/CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<input class="category-toggle" type="radio" id="alkali-metals" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="alkaline-earth-metals" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="lanthanoids" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="actinoids" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="transition-metals" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="post-transition-metals" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="metalloids" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="other-nonmetals" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="noble-gasses" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<input class="category-toggle" type="radio" id="unknown" name="categories"/>
<input class="category-cancel" type="radio" id="cancel" name="categories"/>
<div class="periodic-table">
<div class="element other-nonmetal c1 r1">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Hydrogen</div>
</div>
<div class="atomic-mass">1.008</div>
<ul class="atomic-weight">
<li>1</li>
</ul>
</div>
</div>
<div class="element noble-gas c18 r1">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">2</div>
<div class="label">
<div class="symbol">He</div>
<div class="name">Helium</div>
</div>
<div class="atomic-mass">4.0026</div>
<ul class="atomic-weight">
<li>2</li>
</ul>
</div>
</div>
<div class="element alkali-metal c1 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">3</div>
<div class="label">
<div class="symbol">Li</div>
<div class="name">Lithium</div>
</div>
<div class="atomic-mass">6.94</div>
<ul class="atomic-weight">
<li>3</li>
</ul>
</div>
</div>
<div class="element alkaline-earth-metal c2 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">4</div>
<div class="label">
<div class="symbol">Be</div>
<div class="name">Beryllium</div>
</div>
<div class="atomic-mass">9.0122</div>
<ul class="atomic-weight">
<li>2</li>
<li>2</li>
</ul>
</div>
</div>
<div class="element metalloid c13 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">5</div>
<div class="label">
<div class="symbol">B</div>
<div class="name">Boron</div>
</div>
<div class="atomic-mass">10.81</div>
<ul class="atomic-weight">
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c14 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">6</div>
<div class="label">
<div class="symbol">C</div>
<div class="name">Carbon</div>
</div>
<div class="atomic-mass">12.011</div>
<ul class="atomic-weight">
<li>2</li>
<li>4</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c15 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">7</div>
<div class="label">
<div class="symbol">N</div>
<div class="name">Nitrogen</div>
</div>
<div class="atomic-mass">14.007</div>
<ul class="atomic-weight">
<li>2</li>
<li>5</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c16 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">8</div>
<div class="label">
<div class="symbol">O</div>
<div class="name">Oxygen</div>
</div>
<div class="atomic-mass">15.999</div>
<ul class="atomic-weight">
<li>2</li>
<li>6</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c17 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">9</div>
<div class="label">
<div class="symbol">F</div>
<div class="name">Flourine</div>
</div>
<div class="atomic-mass">18.998</div>
<ul class="atomic-weight">
<li>2</li>
<li>7</li>
</ul>
</div>
</div>
<div class="element noble-gas c18 r2">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">10</div>
<div class="label">
<div class="symbol">Ne</div>
<div class="name">Neon</div>
</div>
<div class="atomic-mass">20.18</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
</ul>
</div>
</div>
<div class="element alkali-metal c1 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">11</div>
<div class="label">
<div class="symbol">Na</div>
<div class="name">Sodium</div>
</div>
<div class="atomic-mass">22.99</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>1</li>
</ul>
</div>
</div>
<div class="element alkaline-earth-metal c2 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">12</div>
<div class="label">
<div class="symbol">Mg</div>
<div class="name">Magnesium</div>
</div>
<div class="atomic-mass">24.305</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>2</li>
</ul>
</div>
</div>
<div class="element post-transition-metal c13 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">13</div>
<div class="label">
<div class="symbol">Al</div>
<div class="name">Aluminium</div>
</div>
<div class="atomic-mass">26.982</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>3</li>
</ul>
</div>
</div>
<div class="element metalloid c14 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">14</div>
<div class="label">
<div class="symbol">Si</div>
<div class="name">Silicon</div>
</div>
<div class="atomic-mass">28.085</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>4</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c15 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">15</div>
<div class="label">
<div class="symbol">P</div>
<div class="name">Phosphorus</div>
</div>
<div class="atomic-mass">30.974</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>5</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c16 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">16</div>
<div class="label">
<div class="symbol">S</div>
<div class="name">Sulfur</div>
</div>
<div class="atomic-mass">32.06</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>6</li>
</ul>
</div>
</div>
<div class="element other-nonmetal c17 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">17</div>
<div class="label">
<div class="symbol">Cl</div>
<div class="name">Chlorine</div>
</div>
<div class="atomic-mass">35.45</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>7</li>
</ul>
</div>
</div>
<div class="element noble-gas c18 r3">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">18</div>
<div class="label">
<div class="symbol">Ar</div>
<div class="name">Argon</div>
</div>
<div class="atomic-mass">39.948</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>8</li>
</ul>
</div>
</div>
<div class="element alkali-metal c1 r4">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">19</div>
<div class="label">
<div class="symbol">K</div>
<div class="name">Potassium</div>
</div>
<div class="atomic-mass">39.098</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>8</li>
<li>1</li>
</ul>
</div>
</div>
<div class="element alkaline-earth-metal c2 r4">
<input class="activate" type="radio" name="elements"/>
<input class="deactivate" type="radio" name="elements"/>
<div class="overlay"></div>
<div class="square">
<div class="model">
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</div>
<div class="orbital">
<div class="electron"></div>
<div class="electron"></div>
</div>
</div>
<div class="atomic-number">20</div>
<div class="label">
<div class="symbol">Ca</div>
<div class="name">Calcium</div>
</div>
<div class="atomic-mass">40.078</div>
<ul class="atomic-weight">
<li>2</li>
<li>8</li>
<li>8</li>
<li>2</li>
</ul>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
body {
background: #101318;
text-shadow: 0 0 0.4vw currentColor;
}
.wrapper {
position: relative;
overflow: hidden;
padding: 2%;
}
.wrapper > input {
-webkit-appearance: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.periodic-table {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(18, 1fr);
}
.element {
position: relative;
font-size: 0.5vw;
padding-bottom: 100%;
cursor: pointer;
color: #fff;
transition: 500ms;
}
.element .overlay {
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #101318;
opacity: 0;
pointer-events: none;
transition: 500ms;
}
.element .square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
background: #101318;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition-property: transform, z-index, left, right, top, bottom;
transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;
transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;
}
.element .atomic-number {
position: absolute;
left: 0;
top: 0;
padding: 2px;
}
.element .label {
text-align: center;
transition: 200ms;
}
.element .symbol {
font-size: 1.7vw;
}
.element .name {
font-size: 0.7vw;
}
.element .atomic-mass {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2px;
text-align: center;
}
.element .atomic-weight {
position: absolute;
right: 0;
top: 0;
list-style: none;
margin: 0;
padding: 2px;
opacity: 0;
transition: 200ms;
text-align: right;
}
.element .model {
display: none;
position: absolute;
left: -500%;
right: -500%;
top: -500%;
bottom: -500%;
transform: scale(0.1);
}
.element .model .orbital {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid;
border-radius: 50%;
opacity: 0.25;
}
.element .model .orbital:nth-child(1) {
margin: 10%;
animation-duration: 40s;
}
.element .model .orbital:nth-child(2) {
margin: 15.5%;
animation-duration: 34s;
}
.element .model .orbital:nth-child(3) {
margin: 21%;
animation-duration: 28s;
}
.element .model .orbital:nth-child(4) {
margin: 26.5%;
animation-duration: 22s;
}
.element .model .orbital:nth-child(5) {
margin: 32%;
animation-duration: 16s;
}
.element .model .orbital:nth-child(6) {
margin: 37.5%;
animation-duration: 10s;
}
.element .model .orbital:nth-child(7) {
margin: 43%;
animation-duration: 4s;
}
.element .model .orbital .electron {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.element .model .orbital .electron::before {
content: "";
position: absolute;
left: calc(50% - 0.7vw);
top: -0.7vw;
width: 1.4vw;
height: 1.4vw;
background-color: currentColor;
border-radius: 50%;
opacity: 0.75;
}
.element .model .orbital .electron:nth-last-child(1):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(2):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(2):first-child ~ .electron:nth-child(2) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(2) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(3) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(2) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(3) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(4) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(2) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(3) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(4) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(5) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(2) {
transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(3) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(4) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(5) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(6) {
transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(2) {
transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(3) {
transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(4) {
transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(5) {
transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(6) {
transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(7) {
transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(2) {
transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(3) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(4) {
transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(5) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(6) {
transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(7) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(8) {
transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(2) {
transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(3) {
transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(4) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(5) {
transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(6) {
transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(7) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(8) {
transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(9) {
transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(2) {
transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(3) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(4) {
transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(5) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(6) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(7) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(8) {
transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(9) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(10) {
transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(2) {
transform: rotate(32.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(3) {
transform: rotate(65.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(4) {
transform: rotate(98.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(5) {
transform: rotate(130.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(6) {
transform: rotate(163.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(7) {
transform: rotate(196.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(8) {
transform: rotate(229.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(9) {
transform: rotate(261.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(10) {
transform: rotate(294.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(11) {
transform: rotate(327.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(2) {
transform: rotate(30deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(3) {
transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(4) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(5) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(6) {
transform: rotate(150deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(7) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(8) {
transform: rotate(210deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(9) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(10) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(11) {
transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(12) {
transform: rotate(330deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(2) {
transform: rotate(27.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(3) {
transform: rotate(55.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(4) {
transform: rotate(83.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(5) {
transform: rotate(110.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(6) {
transform: rotate(138.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(7) {
transform: rotate(166.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(8) {
transform: rotate(193.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(9) {
transform: rotate(221.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(10) {
transform: rotate(249.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(11) {
transform: rotate(276.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(12) {
transform: rotate(304.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(13) {
transform: rotate(332.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(2) {
transform: rotate(25.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(3) {
transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(4) {
transform: rotate(77.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(5) {
transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(6) {
transform: rotate(128.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(7) {
transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(8) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(9) {
transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(10) {
transform: rotate(231.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(11) {
transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(12) {
transform: rotate(282.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(13) {
transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(14) {
transform: rotate(334.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(2) {
transform: rotate(24deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(3) {
transform: rotate(48deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(4) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(5) {
transform: rotate(96deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(6) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(7) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(8) {
transform: rotate(168deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(9) {
transform: rotate(192deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(10) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(11) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(12) {
transform: rotate(264deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(13) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(14) {
transform: rotate(312deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(15) {
transform: rotate(336deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(2) {
transform: rotate(22.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(3) {
transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(4) {
transform: rotate(67.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(5) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(6) {
transform: rotate(112.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(7) {
transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(8) {
transform: rotate(157.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(9) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(10) {
transform: rotate(202.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(11) {
transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(12) {
transform: rotate(247.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(13) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(14) {
transform: rotate(292.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(15) {
transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(16) {
transform: rotate(337.5deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(2) {
transform: rotate(21.1764705882deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(3) {
transform: rotate(42.3529411765deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(4) {
transform: rotate(63.5294117647deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(5) {
transform: rotate(84.7058823529deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(6) {
transform: rotate(105.8823529412deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(7) {
transform: rotate(127.0588235294deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(8) {
transform: rotate(148.2352941176deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(9) {
transform: rotate(169.4117647059deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(10) {
transform: rotate(190.5882352941deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(11) {
transform: rotate(211.7647058824deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(12) {
transform: rotate(232.9411764706deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(13) {
transform: rotate(254.1176470588deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(14) {
transform: rotate(275.2941176471deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(15) {
transform: rotate(296.4705882353deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(16) {
transform: rotate(317.6470588235deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(17) {
transform: rotate(338.8235294118deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(2) {
transform: rotate(20deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(3) {
transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(4) {
transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(5) {
transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(6) {
transform: rotate(100deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(7) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(8) {
transform: rotate(140deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(9) {
transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(10) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(11) {
transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(12) {
transform: rotate(220deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(13) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(14) {
transform: rotate(260deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(15) {
transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(16) {
transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(17) {
transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(18) {
transform: rotate(340deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(2) {
transform: rotate(18.9473684211deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(3) {
transform: rotate(37.8947368421deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(4) {
transform: rotate(56.8421052632deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(5) {
transform: rotate(75.7894736842deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(6) {
transform: rotate(94.7368421053deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(7) {
transform: rotate(113.6842105263deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(8) {
transform: rotate(132.6315789474deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(9) {
transform: rotate(151.5789473684deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(10) {
transform: rotate(170.5263157895deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(11) {
transform: rotate(189.4736842105deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(12) {
transform: rotate(208.4210526316deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(13) {
transform: rotate(227.3684210526deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(14) {
transform: rotate(246.3157894737deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(15) {
transform: rotate(265.2631578947deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(16) {
transform: rotate(284.2105263158deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(17) {
transform: rotate(303.1578947368deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(18) {
transform: rotate(322.1052631579deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(19) {
transform: rotate(341.0526315789deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(2) {
transform: rotate(18deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(3) {
transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(4) {
transform: rotate(54deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(5) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(6) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(7) {
transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(8) {
transform: rotate(126deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(9) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(10) {
transform: rotate(162deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(11) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(12) {
transform: rotate(198deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(13) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(14) {
transform: rotate(234deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(15) {
transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(16) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(17) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(18) {
transform: rotate(306deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(19) {
transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(20) {
transform: rotate(342deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(2) {
transform: rotate(17.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(3) {
transform: rotate(34.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(4) {
transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(5) {
transform: rotate(68.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(6) {
transform: rotate(85.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(7) {
transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(8) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(9) {
transform: rotate(137.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(10) {
transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(11) {
transform: rotate(171.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(12) {
transform: rotate(188.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(13) {
transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(14) {
transform: rotate(222.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(15) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(16) {
transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(17) {
transform: rotate(274.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(18) {
transform: rotate(291.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(19) {
transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(20) {
transform: rotate(325.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(21) {
transform: rotate(342.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(2) {
transform: rotate(16.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(3) {
transform: rotate(32.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(4) {
transform: rotate(49.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(5) {
transform: rotate(65.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(6) {
transform: rotate(81.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(7) {
transform: rotate(98.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(8) {
transform: rotate(114.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(9) {
transform: rotate(130.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(10) {
transform: rotate(147.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(11) {
transform: rotate(163.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(12) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(13) {
transform: rotate(196.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(14) {
transform: rotate(212.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(15) {
transform: rotate(229.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(16) {
transform: rotate(245.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(17) {
transform: rotate(261.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(18) {
transform: rotate(278.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(19) {
transform: rotate(294.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(20) {
transform: rotate(310.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(21) {
transform: rotate(327.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(22) {
transform: rotate(343.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(2) {
transform: rotate(15.652173913deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(3) {
transform: rotate(31.3043478261deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(4) {
transform: rotate(46.9565217391deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(5) {
transform: rotate(62.6086956522deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(6) {
transform: rotate(78.2608695652deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(7) {
transform: rotate(93.9130434783deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(8) {
transform: rotate(109.5652173913deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(9) {
transform: rotate(125.2173913043deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(10) {
transform: rotate(140.8695652174deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(11) {
transform: rotate(156.5217391304deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(12) {
transform: rotate(172.1739130435deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(13) {
transform: rotate(187.8260869565deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(14) {
transform: rotate(203.4782608696deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(15) {
transform: rotate(219.1304347826deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(16) {
transform: rotate(234.7826086957deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(17) {
transform: rotate(250.4347826087deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(18) {
transform: rotate(266.0869565217deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(19) {
transform: rotate(281.7391304348deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(20) {
transform: rotate(297.3913043478deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(21) {
transform: rotate(313.0434782609deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(22) {
transform: rotate(328.6956521739deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(23) {
transform: rotate(344.347826087deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(2) {
transform: rotate(15deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(3) {
transform: rotate(30deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(4) {
transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(5) {
transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(6) {
transform: rotate(75deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(7) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(8) {
transform: rotate(105deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(9) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(10) {
transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(11) {
transform: rotate(150deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(12) {
transform: rotate(165deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(13) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(14) {
transform: rotate(195deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(15) {
transform: rotate(210deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(16) {
transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(17) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(18) {
transform: rotate(255deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(19) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(20) {
transform: rotate(285deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(21) {
transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(22) {
transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(23) {
transform: rotate(330deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(24) {
transform: rotate(345deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(2) {
transform: rotate(14.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(3) {
transform: rotate(28.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(4) {
transform: rotate(43.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(5) {
transform: rotate(57.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(6) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(7) {
transform: rotate(86.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(8) {
transform: rotate(100.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(9) {
transform: rotate(115.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(10) {
transform: rotate(129.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(11) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(12) {
transform: rotate(158.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(13) {
transform: rotate(172.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(14) {
transform: rotate(187.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(15) {
transform: rotate(201.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(16) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(17) {
transform: rotate(230.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(18) {
transform: rotate(244.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(19) {
transform: rotate(259.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(20) {
transform: rotate(273.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(21) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(22) {
transform: rotate(302.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(23) {
transform: rotate(316.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(24) {
transform: rotate(331.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(25) {
transform: rotate(345.6deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(2) {
transform: rotate(13.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(3) {
transform: rotate(27.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(4) {
transform: rotate(41.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(5) {
transform: rotate(55.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(6) {
transform: rotate(69.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(7) {
transform: rotate(83.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(8) {
transform: rotate(96.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(9) {
transform: rotate(110.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(10) {
transform: rotate(124.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(11) {
transform: rotate(138.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(12) {
transform: rotate(152.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(13) {
transform: rotate(166.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(14) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(15) {
transform: rotate(193.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(16) {
transform: rotate(207.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(17) {
transform: rotate(221.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(18) {
transform: rotate(235.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(19) {
transform: rotate(249.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(20) {
transform: rotate(263.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(21) {
transform: rotate(276.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(22) {
transform: rotate(290.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(23) {
transform: rotate(304.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(24) {
transform: rotate(318.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(25) {
transform: rotate(332.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(26) {
transform: rotate(346.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(2) {
transform: rotate(13.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(3) {
transform: rotate(26.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(4) {
transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(5) {
transform: rotate(53.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(6) {
transform: rotate(66.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(7) {
transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(8) {
transform: rotate(93.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(9) {
transform: rotate(106.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(10) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(11) {
transform: rotate(133.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(12) {
transform: rotate(146.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(13) {
transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(14) {
transform: rotate(173.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(15) {
transform: rotate(186.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(16) {
transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(17) {
transform: rotate(213.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(18) {
transform: rotate(226.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(19) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(20) {
transform: rotate(253.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(21) {
transform: rotate(266.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(22) {
transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(23) {
transform: rotate(293.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(24) {
transform: rotate(306.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(25) {
transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(26) {
transform: rotate(333.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(27) {
transform: rotate(346.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(2) {
transform: rotate(12.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(3) {
transform: rotate(25.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(4) {
transform: rotate(38.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(5) {
transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(6) {
transform: rotate(64.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(7) {
transform: rotate(77.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(8) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(9) {
transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(10) {
transform: rotate(115.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(11) {
transform: rotate(128.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(12) {
transform: rotate(141.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(13) {
transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(14) {
transform: rotate(167.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(15) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(16) {
transform: rotate(192.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(17) {
transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(18) {
transform: rotate(218.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(19) {
transform: rotate(231.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(20) {
transform: rotate(244.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(21) {
transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(22) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(23) {
transform: rotate(282.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(24) {
transform: rotate(295.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(25) {
transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(26) {
transform: rotate(321.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(27) {
transform: rotate(334.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(28) {
transform: rotate(347.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(2) {
transform: rotate(12.4137931034deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(3) {
transform: rotate(24.8275862069deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(4) {
transform: rotate(37.2413793103deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(5) {
transform: rotate(49.6551724138deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(6) {
transform: rotate(62.0689655172deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(7) {
transform: rotate(74.4827586207deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(8) {
transform: rotate(86.8965517241deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(9) {
transform: rotate(99.3103448276deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(10) {
transform: rotate(111.724137931deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(11) {
transform: rotate(124.1379310345deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(12) {
transform: rotate(136.5517241379deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(13) {
transform: rotate(148.9655172414deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(14) {
transform: rotate(161.3793103448deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(15) {
transform: rotate(173.7931034483deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(16) {
transform: rotate(186.2068965517deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(17) {
transform: rotate(198.6206896552deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(18) {
transform: rotate(211.0344827586deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(19) {
transform: rotate(223.4482758621deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(20) {
transform: rotate(235.8620689655deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(21) {
transform: rotate(248.275862069deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(22) {
transform: rotate(260.6896551724deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(23) {
transform: rotate(273.1034482759deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(24) {
transform: rotate(285.5172413793deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(25) {
transform: rotate(297.9310344828deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(26) {
transform: rotate(310.3448275862deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(27) {
transform: rotate(322.7586206897deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(28) {
transform: rotate(335.1724137931deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(29) {
transform: rotate(347.5862068966deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(2) {
transform: rotate(12deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(3) {
transform: rotate(24deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(4) {
transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(5) {
transform: rotate(48deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(6) {
transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(7) {
transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(8) {
transform: rotate(84deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(9) {
transform: rotate(96deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(10) {
transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(11) {
transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(12) {
transform: rotate(132deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(13) {
transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(14) {
transform: rotate(156deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(15) {
transform: rotate(168deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(16) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(17) {
transform: rotate(192deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(18) {
transform: rotate(204deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(19) {
transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(20) {
transform: rotate(228deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(21) {
transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(22) {
transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(23) {
transform: rotate(264deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(24) {
transform: rotate(276deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(25) {
transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(26) {
transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(27) {
transform: rotate(312deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(28) {
transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(29) {
transform: rotate(336deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(30) {
transform: rotate(348deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(2) {
transform: rotate(11.6129032258deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(3) {
transform: rotate(23.2258064516deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(4) {
transform: rotate(34.8387096774deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(5) {
transform: rotate(46.4516129032deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(6) {
transform: rotate(58.064516129deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(7) {
transform: rotate(69.6774193548deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(8) {
transform: rotate(81.2903225806deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(9) {
transform: rotate(92.9032258065deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(10) {
transform: rotate(104.5161290323deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(11) {
transform: rotate(116.1290322581deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(12) {
transform: rotate(127.7419354839deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(13) {
transform: rotate(139.3548387097deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(14) {
transform: rotate(150.9677419355deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(15) {
transform: rotate(162.5806451613deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(16) {
transform: rotate(174.1935483871deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(17) {
transform: rotate(185.8064516129deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(18) {
transform: rotate(197.4193548387deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(19) {
transform: rotate(209.0322580645deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(20) {
transform: rotate(220.6451612903deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(21) {
transform: rotate(232.2580645161deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(22) {
transform: rotate(243.8709677419deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(23) {
transform: rotate(255.4838709677deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(24) {
transform: rotate(267.0967741935deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(25) {
transform: rotate(278.7096774194deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(26) {
transform: rotate(290.3225806452deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(27) {
transform: rotate(301.935483871deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(28) {
transform: rotate(313.5483870968deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(29) {
transform: rotate(325.1612903226deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(30) {
transform: rotate(336.7741935484deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(31) {
transform: rotate(348.3870967742deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(1) {
transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(2) {
transform: rotate(11.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(3) {
transform: rotate(22.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(4) {
transform: rotate(33.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(5) {
transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(6) {
transform: rotate(56.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(7) {
transform: rotate(67.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(8) {
transform: rotate(78.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(9) {
transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(10) {
transform: rotate(101.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(11) {
transform: rotate(112.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(12) {
transform: rotate(123.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(13) {
transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(14) {
transform: rotate(146.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(15) {
transform: rotate(157.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(16) {
transform: rotate(168.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(17) {
transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(18) {
transform: rotate(191.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(19) {
transform: rotate(202.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(20) {
transform: rotate(213.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(21) {
transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(22) {
transform: rotate(236.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(23) {
transform: rotate(247.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(24) {
transform: rotate(258.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(25) {
transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(26) {
transform: rotate(281.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(27) {
transform: rotate(292.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(28) {
transform: rotate(303.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(29) {
transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(30) {
transform: rotate(326.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(31) {
transform: rotate(337.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(32) {
transform: rotate(348.75deg);
}
.element input[type=radio] {
-webkit-appearance: none;
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
outline: none;
}
.element input[type=radio].activate:hover ~ .square {
z-index: 2;
transform: scale(1.35);
transition-delay: 0ms;
outline: none;
pointer-events: none;
}
.element input[type=radio].activate:checked + input[type=radio].deactivate {
z-index: 3;
pointer-events: all;
}
.element input[type=radio].activate:checked ~ .overlay {
opacity: 0.75;
}
.element input[type=radio].activate:checked ~ .square {
z-index: 3;
transform: scale(3);
transition-duration: 500ms, 0ms, 200ms, 200ms, 200ms, 200ms;
transition-delay: 0ms;
outline: none;
cursor: auto;
}
.element input[type=radio].activate:checked ~ .square .label {
transition-duration: 500ms;
transform: scale(0.75);
}
.element input[type=radio].activate:checked ~ .square .atomic-weight {
opacity: 1;
transition: 500ms;
}
.element input[type=radio].activate:checked ~ .square .model {
display: block;
animation: fade-in;
animation-duration: 1s;
}
.element input[type=radio].activate:checked ~ .square .orbital {
animation-name: rotate;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.element input[type=radio].deactivate {
position: fixed;
display: block;
z-index: 1;
opacity: 0;
pointer-events: none;
}
.element input[type=radio].deactivate:checked ~ .square {
z-index: 1;
}
.placeholder {
position: relative;
z-index: -1;
font-size: 1vw;
padding-bottom: 100%;
color: #fff;
transition: 500ms;
}
.placeholder .square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0.5;
}
.gap {
position: relative;
padding-bottom: 100%;
transition: 500ms;
}
.gap::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: calc(200% + 5px * 2 - 4px);
border-width: 0 0 2px 2px;
border-style: solid;
margin-left: -1px;
color: #fff;
opacity: 0.2;
}
.alkali-metal {
color: #ecbe59;
}
.alkaline-earth-metal {
color: #dee955;
}
.lanthanoid {
color: #ec77a3;
}
.actinoid {
color: #c686cc;
}
.transition-metal {
color: #fd8572;
}
.post-transition-metal {
color: #4cddf3;
}
.metalloid {
color: #3aefb6;
}
.other-nonmetal {
color: #52ee61;
}
.noble-gas {
color: #759fff;
}
.unknown {
color: #cccccc;
}
.r1 {
grid-row: 1;
}
.r2 {
grid-row: 2;
}
.r3 {
grid-row: 3;
}
.r4 {
grid-row: 4;
}
.r5 {
grid-row: 5;
}
.r6 {
grid-row: 6;
}
.r7 {
grid-row: 7;
}
.r8 {
grid-row: 8;
}
.r9 {
grid-row: 9;
}
.r10 {
grid-row: 10;
}
.c1 {
grid-column: 1;
}
.c2 {
grid-column: 2;
}
.c3 {
grid-column: 3;
}
.c4 {
grid-column: 4;
}
.c5 {
grid-column: 5;
}
.c6 {
grid-column: 6;
}
.c7 {
grid-column: 7;
}
.c8 {
grid-column: 8;
}
.c9 {
grid-column: 9;
}
.c10 {
grid-column: 10;
}
.c11 {
grid-column: 11;
}
.c12 {
grid-column: 12;
}
.c13 {
grid-column: 13;
}
.c14 {
grid-column: 14;
}
.c15 {
grid-column: 15;
}
.c16 {
grid-column: 16;
}
.c17 {
grid-column: 17;
}
.c18 {
grid-column: 18;
}
.r1 input[type=radio].activate:checked ~ .square {
top: 100%;
}
.r10 input[type=radio].activate:checked ~ .square {
top: -100%;
}
.c1 input[type=radio].activate:checked ~ .square {
left: 100%;
}
.c18 input[type=radio].activate:checked ~ .square {
left: -100%;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes noise {
0%, 100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0% 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}
.key {
position: relative;
z-index: 1;
grid-row: 1;
grid-column-start: 3;
grid-column-end: 17;
font-size: 0.8vw;
line-height: 1.5;
display: flex;
align-items: center;
pointer-events: none;
user-select: none;
}
.key .row {
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
}
.key .row label {
opacity: 0.85;
cursor: pointer;
transition: 120ms;
pointer-events: all;
}
.key .row label:hover {
opacity: 1 !important;
}
#alkali-metals:checked ~ .periodic-table .element:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .element:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .element:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .element:not(.actinoid),
#transition-metals:checked ~ .periodic-table .element:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .element:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .element:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .element:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .element:not(.noble-gas),
#unknown:checked ~ .periodic-table .element:not(.unknown),
#alkali-metals:checked ~ .periodic-table .placeholder,
#alkaline-earth-metals:checked ~ .periodic-table .placeholder,
#lanthanoids:checked ~ .periodic-table .placeholder:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .placeholder:not(.actinoid),
#transition-metals:checked ~ .periodic-table .placeholder,
#post-transition-metals:checked ~ .periodic-table .placeholder,
#metalloids:checked ~ .periodic-table .placeholder,
#other-nonmetals:checked ~ .periodic-table .placeholder,
#noble-gasses:checked ~ .periodic-table .placeholder,
#unknown:checked ~ .periodic-table .placeholder {
opacity: 0.15;
pointer-events: none;
}
#alkali-metals:checked ~ .periodic-table .key label:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .key label:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .key label:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .key label:not(.actinoid),
#transition-metals:checked ~ .periodic-table .key label:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .key label:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .key label:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .key label:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .key label:not(.noble-gas),
#unknown:checked ~ .periodic-table .key label:not(.unknown) {
opacity: 0.65;
}
.category-toggle:not(#lanthanoids):not(#actinoids):checked ~ .periodic-table .gap {
opacity: 0.5;
}
.category-toggle:checked ~ .category-cancel {
visibility: visible;
pointer-events: all;
cursor: pointer;
}
Leave Comments