/*
============================================================================================================
  IMPORT DEVICES
============================================================================================================
*/

    @import url("./solar-system-desktop-1-00.css") screen and (min-width: 769px);
    @import url("./solar-system-mobile-1-00.css") screen and (max-width: 768px);

/*
============================================================================================================
  THE SOLAR SYSTEM STYLE
============================================================================================================
*/

#solar-system {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF5EB;
}

#solar-system .orbits {
  display: flex;
  align-items: center;
  justify-content: center;
}

#solar-system .orbit {
  position: absolute;
  border: solid 3px white;
  border-radius: 50%;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:orbit;

  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  -moz-animation-name:orbit;
  
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-name:orbit;
}

#solar-system .orbit-3 { width: 300px; height: 300px; z-index: 1002; transform: rotate(0deg); -webkit-animation-duration:7s; -moz-animation-duration:9s; animation-duration:9s;}
#solar-system .orbit-2 { width: 450px; height: 450px; z-index: 1002; transform: rotate(0deg); -webkit-animation-duration:8s; -moz-animation-duration:11s; animation-duration:11s;}
#solar-system .orbit-1 { width: 600px; height: 600px; z-index: 1001; transform: rotate(0deg); -webkit-animation-duration:9s; -moz-animation-duration:13s; animation-duration:13s;}

#solar-system .orbit > div {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
}

#solar-system .orbit .pos-a { transform: rotate(120deg); }
#solar-system .orbit .pos-b { transform: rotate(240deg); }
#solar-system .orbit .pos-c { transform: rotate(360deg); }

#solar-system .planets {

}

#solar-system .planet {
  background-color: white;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  position: relative;
  top: -32.5px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2.1875px 8.75px rgba(38, 42, 62, 0.08);
}

#solar-system .planet img {
  width: 40px;
  height: 40px;
}

#solar-system .the_sun {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: -webkit-linear-gradient(141deg, rgba(255, 255, 255, 0.8) -9.26%, rgba(255, 255, 255, 0.8) 63.04%);
  background-image: -moz-linear-gradient(141deg, rgba(255, 255, 255, 0.8) -9.26%, rgba(255, 255, 255, 0.8) 63.04%);
  background-image: -o-linear-gradient(141deg, rgba(255, 255, 255, 0.8) -9.26%, rgba(255, 255, 255, 0.8) 63.04%);
  background-image: linear-gradient(231deg, rgba(255, 255, 255, 0.8) -9.26%, rgba(255, 255, 255, 0.8) 63.04%);
  box-shadow: 0px 20px 40px -10px #2A2A2A26,
    0px 2px 4px -1px #2929290D;
}

@-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-moz-keyframes orbit { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
@keyframes orbit { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }