@charset "utf-8";
.container {
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
  background: lightblue;
}
.sun {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:1px dotted grey;
/*  transform:rotateX(90deg) rotate(90deg); */
  transform: rotate(90deg);
  background:
    linear-gradient(blue,red) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.sun:before {
  content:"";
  position:absolute;
  top:calc(50% - 20px);
  left:-20px;
  width:40px;
  height:40px;
  background:yellow;
  border-radius:50%;
  box-shadow: 0 0 10px orange,
                0 0 60px orange,
                0 0 200px yellow,
                inset 0 0 80px yellow;
  z-index:12;
  align:center;
  z-index:-99;
}
.container_m {
/*  position: relative;
  top: -300x; */
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
  background: navy;
}
.moon {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:3px dotted grey;
  transform:rotateX(90deg) rotate(90deg);
/*  transform: rotate(90deg); */
  background:
    linear-gradient(blue,black) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.moon:before {
  content:"";
  position:absolute;
  top:calc(50% - 7px);
  left:-10px;
  width:40px;
  height:40px;
  background:transparent;
  /* margin-left: -35px; */
  border-radius: 50%;
  box-shadow: -10px -10px 0 0  #ccf2ff;
}