.elementor-872 .elementor-element.elementor-element-7636d23{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-872 .elementor-element.elementor-element-05c72ce{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-872 .elementor-element.elementor-element-05c72ce.e-con{--align-self:center;}.elementor-872 .elementor-element.elementor-element-d9c8966.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-3d34c97{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:00px;--padding-left:0px;--padding-right:0px;}.elementor-872 .elementor-element.elementor-element-3d34c97:not(.elementor-motion-effects-element-type-background), .elementor-872 .elementor-element.elementor-element-3d34c97 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}.elementor-872 .elementor-element.elementor-element-a547702{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-872 .elementor-element.elementor-element-a547702.e-con{--align-self:center;}.elementor-872 .elementor-element.elementor-element-ce8182a > .elementor-widget-container{padding:0px 0px 4px 0px;border-style:solid;border-width:0px 0px 2px 0px;border-color:#6B7280;}.elementor-872 .elementor-element.elementor-element-ce8182a.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-ce8182a{text-align:center;}.elementor-872 .elementor-element.elementor-element-ce8182a .elementor-heading-title{text-transform:uppercase;color:#6B7280;}.elementor-872 .elementor-element.elementor-element-4afad24 .elementor-heading-title{font-size:61px;color:var( --e-global-color-astglobalcolor4 );}.elementor-872 .elementor-element.elementor-element-abd1da5{text-align:left;color:#6B7280;}.elementor-872 .elementor-element.elementor-element-98c6f6f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-872 .elementor-element.elementor-element-9f2e6d5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-872 .elementor-element.elementor-element-968ac88{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-872 .elementor-element.elementor-element-968ac88.e-con{--align-self:center;}.elementor-872 .elementor-element.elementor-element-69bfa1f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-872 .elementor-element.elementor-element-69bfa1f.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-872 .elementor-element.elementor-element-65eccf4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-872 .elementor-element.elementor-element-65eccf4.e-con{--align-self:center;}.elementor-872 .elementor-element.elementor-element-68f6694{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:15px;--margin-bottom:15px;--margin-left:15px;--margin-right:15px;}.elementor-872 .elementor-element.elementor-element-3bb5c66 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-872 .elementor-element.elementor-element-3bb5c66.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-3bb5c66{text-align:left;}.elementor-872 .elementor-element.elementor-element-3bb5c66 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:var( --e-global-color-astglobalcolor2 );}.elementor-872 .elementor-element.elementor-element-24a08ae.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-24a08ae{text-align:left;}.elementor-872 .elementor-element.elementor-element-24a08ae p{margin-block-end:0px;}.elementor-872 .elementor-element.elementor-element-5d45b88 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-872 .elementor-element.elementor-element-5d45b88.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-5d45b88{text-align:left;}.elementor-872 .elementor-element.elementor-element-5d45b88 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-astglobalcolor2 );}.elementor-872 .elementor-element.elementor-element-904dedd > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-astglobalcolor4 );border-radius:5px 5px 5px 5px;}.elementor-872 .elementor-element.elementor-element-904dedd.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-904dedd .elementor-progress-wrapper .elementor-progress-bar{background-color:#a78bfa;}.elementor-872 .elementor-element.elementor-element-904dedd .elementor-progress-wrapper{background-color:#57A0E900;}.elementor-872 .elementor-element.elementor-element-904dedd .elementor-progress-bar{height:40px;line-height:40px;color:var( --e-global-color-astglobalcolor5 );font-family:"Archivo", Sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:-0.45px;word-spacing:0em;}.elementor-872 .elementor-element.elementor-element-78be2b6 > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-astglobalcolor0 );border-radius:5px 5px 5px 5px;}.elementor-872 .elementor-element.elementor-element-78be2b6.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-78be2b6 .elementor-progress-wrapper .elementor-progress-bar{background-color:var( --e-global-color-astglobalcolor0 );}.elementor-872 .elementor-element.elementor-element-78be2b6 .elementor-progress-wrapper{background-color:#57A0E900;}.elementor-872 .elementor-element.elementor-element-78be2b6 .elementor-progress-bar{height:40px;line-height:40px;color:var( --e-global-color-astglobalcolor5 );font-family:"Archivo", Sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:-0.45px;word-spacing:0em;}.elementor-872 .elementor-element.elementor-element-2879fb8 > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-astglobalcolor2 );border-radius:5px 5px 5px 5px;}.elementor-872 .elementor-element.elementor-element-2879fb8.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-2879fb8 .elementor-progress-wrapper .elementor-progress-bar{background-color:var( --e-global-color-astglobalcolor2 );}.elementor-872 .elementor-element.elementor-element-2879fb8 .elementor-progress-wrapper{background-color:#57A0E900;}.elementor-872 .elementor-element.elementor-element-2879fb8 .elementor-progress-bar{height:40px;line-height:40px;color:var( --e-global-color-astglobalcolor5 );font-family:"Archivo", Sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:-0.45px;word-spacing:0em;}.elementor-872 .elementor-element.elementor-element-57d4d64 > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );border-radius:5px 5px 5px 5px;}.elementor-872 .elementor-element.elementor-element-57d4d64.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-57d4d64 .elementor-progress-wrapper .elementor-progress-bar{background-color:var( --e-global-color-text );}.elementor-872 .elementor-element.elementor-element-57d4d64 .elementor-progress-wrapper{background-color:#57A0E900;}.elementor-872 .elementor-element.elementor-element-57d4d64 .elementor-progress-bar{height:40px;line-height:40px;color:var( --e-global-color-astglobalcolor5 );font-family:"Archivo", Sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:-0.45px;word-spacing:0em;}.elementor-872 .elementor-element.elementor-element-c5c96a6 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-872 .elementor-element.elementor-element-c5c96a6.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-c5c96a6{text-align:left;}.elementor-872 .elementor-element.elementor-element-c5c96a6 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-astglobalcolor2 );}.elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-posts-container article{margin-bottom:35px;}.elementor-872 .elementor-element.elementor-element-94bc9c5.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-post__meta-data span + span:before{content:"|";}.elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-posts--skin-full_content a.elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-posts--skin-archive_full_content a.elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-872 .elementor-element.elementor-element-94bc9c5 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(min-width:768px){.elementor-872 .elementor-element.elementor-element-a547702{--width:50%;}.elementor-872 .elementor-element.elementor-element-98c6f6f{--width:50%;}.elementor-872 .elementor-element.elementor-element-69bfa1f{--width:66.66%;}.elementor-872 .elementor-element.elementor-element-65eccf4{--width:33.33%;}}@media(max-width:1024px){.elementor-872 .elementor-element.elementor-element-05c72ce{--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:10px;}.elementor-872 .elementor-element.elementor-element-3d34c97{--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:10px;--padding-right:010px;}.elementor-872 .elementor-element.elementor-element-a547702{--gap:1px 1px;--row-gap:1px;--column-gap:1px;--flex-wrap:wrap;}.elementor-872 .elementor-element.elementor-element-4afad24 > .elementor-widget-container{padding:0px 8px 0px 8px;}.elementor-872 .elementor-element.elementor-element-4afad24.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-872 .elementor-element.elementor-element-abd1da5 > .elementor-widget-container{padding:0px 8px 0px 8px;}.elementor-872 .elementor-element.elementor-element-abd1da5.elementor-element{--align-self:flex-start;}.elementor-872 .elementor-element.elementor-element-9f2e6d5{--gap:1px 1px;--row-gap:1px;--column-gap:1px;--flex-wrap:wrap;}.elementor-872 .elementor-element.elementor-element-9f2e6d5.e-con{--align-self:center;}.elementor-872 .elementor-element.elementor-element-efcd1dd{width:100%;max-width:100%;}.elementor-872 .elementor-element.elementor-element-efcd1dd.elementor-element{--align-self:center;}.elementor-872 .elementor-element.elementor-element-968ac88{--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-872 .elementor-element.elementor-element-65eccf4{--gap:1px 1px;--row-gap:1px;--column-gap:1px;--flex-wrap:wrap;--align-content:flex-start;}.elementor-872 .elementor-element.elementor-element-68f6694{--grid-auto-flow:row;}.elementor-872 .elementor-element.elementor-element-3bb5c66 > .elementor-widget-container{margin:70px 0px 40px 0px;}.elementor-872 .elementor-element.elementor-element-5d45b88 > .elementor-widget-container{margin:70px 0px 40px 0px;}.elementor-872 .elementor-element.elementor-element-c5c96a6 > .elementor-widget-container{margin:70px 0px 40px 0px;}}@media(max-width:767px){.elementor-872 .elementor-element.elementor-element-3d34c97{--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.elementor-872 .elementor-element.elementor-element-4afad24 > .elementor-widget-container{padding:0px 10px 0px 10px;}.elementor-872 .elementor-element.elementor-element-4afad24.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-872 .elementor-element.elementor-element-4afad24{text-align:center;}.elementor-872 .elementor-element.elementor-element-abd1da5 > .elementor-widget-container{padding:0px 15px 0px 15px;}.elementor-872 .elementor-element.elementor-element-abd1da5.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-872 .elementor-element.elementor-element-abd1da5{text-align:left;}.elementor-872 .elementor-element.elementor-element-efcd1dd{width:100%;max-width:100%;}.elementor-872 .elementor-element.elementor-element-968ac88{--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:010px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-872 .elementor-element.elementor-element-69bfa1f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-872 .elementor-element.elementor-element-68f6694{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:10px;}.elementor-872 .elementor-element.elementor-element-3bb5c66 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-872 .elementor-element.elementor-element-5d45b88 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-872 .elementor-element.elementor-element-904dedd .elementor-progress-bar{font-size:14px;}.elementor-872 .elementor-element.elementor-element-78be2b6 .elementor-progress-bar{font-size:14px;}.elementor-872 .elementor-element.elementor-element-2879fb8 .elementor-progress-bar{font-size:14px;}.elementor-872 .elementor-element.elementor-element-57d4d64 .elementor-progress-bar{font-size:14px;}.elementor-872 .elementor-element.elementor-element-c5c96a6 > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for heading, class: .elementor-element-4afad24 */#adn{ font-size: 35px;
}
.span-contenue{
    color : #F43F5E ;
    
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-efcd1dd */.bg-atom {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atom-wild * {
  transform-style: preserve-3d;
}

section.bg-slate-50 {
  background-color: #111827 !important;
}

.flip-vertical {
  transform: scaleY(-1);
}

.opacityWild-7 {
  opacity: 0.7;
}

*::before {
  box-sizing: border-box;
}

/* h1 {
  position: absolute;
  top: 4vmin;
  color: #0a0a0a;
  font-family: Arial, serif;
  font-weight: normal;
  font-size: 3.5vmin;
  margin: 0;
} */

.atom {
  /* height: 70vmin; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: 0.4s ease 0s;
  cursor: zoom-in;
}

.atom:active {
  transform: scale3d(1.5, 1.5, 1.5);
}

.atom:before {
  content: "";
  width: 50vmin;
  height: 50vmin;
  position: absolute;
  background: radial-gradient(#913ab7 -50%, #fff0 50%);
  transform: translateZ(-6vmin);
  box-shadow: 0 0 5vmin -2vmin #cddc3920, 0 0 10vmin 0vmin #cddc3920,
    0 0 10vmin 0vmin #39dcbe20, 0 0 10vmin 0 #cddc3920 inset,
    0 0 25vmin 0 #39dcbe20 inset;
  border-radius: 100%;
  animation: orbit-cloud 3s ease 0s infinite alternate;
  opacity: 0.25;
}

@keyframes orbit-cloud {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(50deg);
  }
}

/*** NUCLEOUS ***/

.nucleous {
  width: 16vmin;
  height: 16vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.row {
  border-radius: 100%;
  transform: rotateX(80deg);
  position: absolute;
  width: 40%;
  height: 40%;
  margin-top: -8vmin;
  left: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(80deg) rotate(180deg);
  animation: orbit-nucleous 3s linear 0s infinite;
}

.row:nth-child(1) div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  margin-top: -11vmin;
  @apply bg-redWild;
  background: radial-gradient(
      circle at 40% 60%,
      #fff0,
      3vmin,
      #00000040 calc(3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 28% 57%,
      #fff,
      0.3vmin,
      #fff0 calc(0.3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 37% 71%,
      #fff,
      0.5vmin,
      #fff0 calc(0.5vmin + 1px) 100%
    ),
    radial-gradient(
        circle at 40% 60%,
        var(--c2),
        1.65vmin,
        #fff0 calc(1.65vmin + 1px) 100%
      )
      var(--c1);
}

.row:nth-child(2) {
  --znt: 1.3, 1.3, 1.3;
  margin-top: 0vmin;
  animation: orbit-nucleous3 3s linear 0s infinite;
}

@keyframes orbit-nucleous {
  0% {
    transform: rotateX(80deg) rotate(0deg);
  }

  100% {
    transform: rotateX(80deg) rotate(360deg);
  }
}

@keyframes orbit-nucleous3 {
  0% {
    transform: rotateX(80deg) rotate(0deg) scale3d(var(--znt));
  }

  100% {
    transform: rotateX(80deg) rotate(360deg) scale3d(var(--znt));
  }
}

.row div {
  --c1: #bc0003;
  --c2: #fa0001;
  width: 6vmin;
  height: 6vmin;
  border: 1px solid #0006;
  border-radius: 100%;
  background: radial-gradient(
      circle at 40% 60%,
      #fff0,
      3vmin,
      #00000040 calc(3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 28% 57%,
      #ffffff,
      0.3vmin,
      #fff0 calc(0.3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 37% 71%,
      #fff,
      0.5vmin,
      #fff0 calc(0.5vmin + 1px) 100%
    ),
    radial-gradient(
        circle at 40% 60%,
        var(--c2),
        1.65vmin,
        #fff0 calc(1.65vmin + 1px) 100%
      )
      var(--c1);
  position: absolute;
  top: -3vmin;
  animation: orbit-nucleous-particle 3s linear 0s infinite;
}

@keyframes orbit-nucleous-particle {
  0% {
    transform: rotateX(90deg) rotateY(360deg) scale3d(0.75, 0.75, 0.75);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) scale3d(0.75, 0.75, 0.75);
  }
}

.row div.neutron {
  --c1: #082976;
  --c2: #124b9c;
}

.row div:nth-child(2) {
  top: calc(100% - 3vmin);
}

.row div:nth-child(3) {
  left: -3vmin;
  top: calc(50% - 3vmin);
}

.row div:nth-child(4) {
  left: calc(100% - 3vmin);
  top: calc(50% - 3vmin);
}

/*** ELECTRONS ***/

.orbits {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  animation: orbit-spin 180s linear 0s infinite;
}

@keyframes orbit-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.orbits:before,
.orbits:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  animation: orbit-spin 180s linear 0s infinite;
  border: 0.2vmin dotted #f65648;
  filter: blur(1px);
  opacity: 0.5;
}

.orbits:after {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  animation-direction: reverse;
  animation-duration: 90s;
}

.electron {
  --pos: rotateY(0deg);
  --tim: 20s;
  position: absolute;
  width: 100%;
  height: 100%;
  /* box-shadow: -10px 5px 3px -5px #e758b020 inset, 10px 0px 3px -5px #dc399820; */
  box-shadow: -10px 5px 3px -5px rgba(255, 255, 255, 0.2) inset,
    10px 0px 3px -5px rgba(255, 255, 255, 0.15);

  border-radius: 100%;
  transition: all 0.4s ease 0s;
  transform: rotateX(80deg) rotate(180deg);
  animation: orbit-electron var(--tim) linear calc(var(--tim) * -0.5) infinite;
}

@keyframes orbit-electron {
  0% {
    transform: rotateX(80deg) var(--pos) rotate(0deg);
  }

  100% {
    transform: rotateX(80deg) var(--pos) rotate(-360deg);
  }
}

/* .electron:before {
  --c1: #570549;
  --c2: #570549;
  width: 1vmin;
  height: 1vmin;
  content: "";
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 9px 0px #570549;
  border: 1px solid rgba(14, 13, 13, 0.533);
  left: calc(50% - 0.5vmin);
  top: -0.5vmin;
  background: radial-gradient(
      circle at 40% 60%,
      #fff0,
      3vmin,
      #00000040 calc(3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 45% 73%,
      #570549,
      0.3vmin,
      rgba(20, 20, 20, 0) calc(0.3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 27% 58%,
      #570549,
      0.5vmin,
      #fff0 calc(0.5vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 40% 60%,
      var(--c2),
      1vmin,
      #fff0 calc(1vmin + 1px) 100%
    ),
    var(--c1);
  transform: rotateX(90deg);
  animation: orbit-electron-particle var(--tim) linear 0s infinite;
} */
.electron:before {
  --c1: #8bc34a;
  --c2: #cddc39;
  width: 1vmin;
  height: 1vmin;
  content: "";
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 9px 0px #cddc39;
  border: 1px solid #fff8;
  left: calc(50% - 0.5vmin);
  top: -0.5vmin;
  background: radial-gradient(
      circle at 40% 60%,
      #fff0,
      3vmin,
      #00000040 calc(3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 45% 73%,
      #fff,
      0.3vmin,
      #fff0 calc(0.3vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 27% 58%,
      #fff,
      0.5vmin,
      #fff0 calc(0.5vmin + 1px) 100%
    ),
    radial-gradient(
      circle at 40% 60%,
      var(--c2),
      1vmin,
      #fff0 calc(1vmin + 1px) 100%
    ),
    var(--c1);
  transform: rotateX(90deg);
  animation: orbit-electron-particle var(--tim) linear 0s infinite;
}
@keyframes orbit-electron-particle {
  0% {
    transform: rotateX(90deg) rotateY(-360deg);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg);
  }
}

.electron:nth-child(2) {
  --pos: rotateY(70deg);
  --tim: 15.35s;
}

.electron:nth-child(3) {
  --pos: rotateY(40deg);
  --tim: 18.75s;
}

.electron:nth-child(4) {
  --pos: rotateY(110deg);
  --tim: 12.75s;
}

.electron:nth-child(n + 5) {
  width: 67%;
  height: 67%;
  left: 18%;
  top: 18%;
}

.electron:nth-child(5) {
  --pos: rotateY(140deg);
  --tim: 11.25s;
}

.electron:nth-child(6) {
  --pos: rotateY(25deg);
  --tim: 10s;
}

/*** INFO ***/

.info {
  position: absolute;
  width: 98vw;
  height: 60vmin;
  z-index: -1;
  font-family: Arial, serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-shell,
.outer-shell,
.inner-nucleous {
  width: 20.5vmin;
  height: 12vmin;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.05;
  top: 40vmin;
  color: #fff;
  margin-right: 80vmin;
}

.inner-shell {
  margin-top: 0.95vmin;
}

.outer-shell {
  top: 10vmin;
  margin-right: 83.5vmin;
}

.info > div:before {
  content: "";
  position: absolute;
  width: 15vmin;
  height: 15vmin;
  border: 0.25vmin solid #fff0;
  border-left: 0.25vmin dotted #fff;
  border-radius: 100% 0 0 0;
  transform: rotate(-45deg);
  right: -25vmin;
  margin-top: -33vmin;
}

.info > div.outer-shell:before {
  transform: rotate(0deg);
  margin-top: 2vmin;
  right: -30vmin;
  height: 25vmin;
  width: 25vmin;
  clip-path: polygon(0 50%, 100% 100%, 100% 100%, 0% 98%);
}

.inner-nucleous {
  margin-left: 83vmin;
  margin-right: 0 !important;
  top: 19vmin !important;
  height: 17.5vmin !important;
}

.inner-nucleous:before {
  transform: rotate(155deg) !important;
  left: -34.125vmin;
  margin-top: 11vmin !important;
}

.inner-shell:after,
.outer-shell:after,
.inner-nucleous:after {
  content: "";
  position: absolute;
  width: 15vmin;
  height: 0;
  right: -14.5vmin;
  margin-top: -18vmin;
  z-index: 333;
  border-top: 0.25vmin dotted #fff;
  transform: rotate(-23deg);
}

.outer-shell:after {
  right: -6vmin;
  margin-top: 13.1vmin;
  transform: rotate(14deg);
  width: 6vmin;
}

.inner-nucleous:after {
  transform: rotate(0deg);
  left: -21.5vmin;
  margin-top: 2.75vmin;
  width: 21.5vmin;
}

.info-particle {
  position: absolute;
  width: 20vmin;
  height: 11.5vmin;
  left: 0;
  top: 0;
  border: 0.25vmin dotted #fff;
  border-radius: 0.2vmin;
}

.inner-nucleous .info-particle {
  height: 17.25vmin;
}

.inner-shell:hover,
.outer-shell:hover,
.inner-nucleous:hover {
  opacity: 1;
}



.inner-nucleous p:before {
  --c1: #bc0003;
  --c2: #fa0001;
  content: "+";
}

.inner-nucleous p + p:before {
  --c1: #082976;
  --c2: #124b9c;
  content: "";
}

.inner-nucleous p:after {
  content: "( POSITIVE CHARGE )";
}

.inner-nucleous p + p:after {
  content: "( NO CHARGE )";
}

body:has(.outer-shell:hover) .atom .orbits .electron:nth-child(n + 5),
body:has(.outer-shell:hover) .atom .nucleous {
  opacity: 0.15;
}

body:has(.inner-shell:hover) .atom .orbits .electron:nth-child(-n + 4),
body:has(.inner-shell:hover) .atom .nucleous {
  opacity: 0.15;
}

body:has(.inner-nucleous:hover) .atom .orbits .electron {
  opacity: 0.15;
}

.show-info:hover + .info > div {
  opacity: 0.9;
}

.show-info {
  position: absolute;
  bottom: 4vmin;
  font-size: 3.5vmin;
  color: #fff;
  font-weight: bold;
  border: 0.25vmin solid #ffffffc9;
  width: 5vmin;
  height: 5vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.show-info:hover {
  color: #111;
  background: #fff;
  border-color: #111;
}

/*** PORTRAIT ***/

@media only screen and (orientation: portrait) {
  .info {
    height: 98vh;
  }

  .inner-nucleous {
    margin-left: 0vmin !important;
    margin-right: 0 !important;
    top: calc(50% + 32vmin) !important;
  }

  .inner-nucleous:before {
    transform: rotate(247deg) !important;
    left: -1.125vmin;
    margin-top: -75vmin !important;
  }

  .inner-nucleous:after {
    transform: rotate(90deg);
    left: -1.5vmin;
    margin-top: -41.25vmin;
    width: 23vmin;
  }


  .info > div.outer-shell {
    margin-top: calc(50vh - 53.5vmin);
    margin-right: 47.5vmin;
  }

  .outer-shell:after {
    right: -4.5vmin;
    margin-top: 17.75vmin;
    transform: rotate(60deg);
  }

  .info > div.outer-shell:before {
    transform: rotate(52deg);
    margin-top: 33vmin;
    right: -28vmin;
  }

  .info > div.inner-shell {
    margin-right: -36vmin;
    margin-top: calc(50vh - 84vmin);
  }

  .inner-shell:after {
    width: 14vmin;
    right: 15.25vmin;
    margin-top: 25vmin;
    transform: rotate(105deg);
  }

  .inner-shell:before {
    transform: rotate(80deg) !important;
    right: 14vmin !important;
    margin-top: 51vmin !important;
  }
}/* End custom CSS */