body{margin:0px;padding:0px;overflow:hidden;
    width: 100%;
    height: 100%;
}
  .xyz-base{
    justify-content: center;
    align-items: center;
      width: 100%;
      height: 100%;
  }
  .phone {
    left:50%;
    margin-left: -10%;
    animation: forphone 1s infinite alternate;
      background-color: #dddddd;
      padding: 1.5em;
      border-radius: 2em;
      position: relative;
      box-shadow: -30px 30px 0px rgba(0,0,0,.1);
    height: 40%; 
    width: 20%; 
    top: 10%;
      
  }
  
  @keyframes forphone {
    0%   {transform:rotateZ(0);}
    25%   {transform:rotateZ(5);}
    50%   {transform:rotateZ(0deg);}
    75%   {transform:rotateZ(-5deg);}
    99%   {transform:rotateZ(0deg);}
  }
  
 
  .square-group {
      display: grid;
      width: 94%;
      padding: 0.1em;
      grid-template-areas:
          "square square"
          "square square";
          background-color: #dddddd;
        height: 30%;

      
  }
  .square1 {
    padding: .1em;
    margin: .1em;
    border-radius: .4em;
    background-color: black;

} 
.group{
  justify-items: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 10%;
  border-radius: 0.1em;}
.sai{
  justify-items: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: max-content;
  align-self: center;
  height: 90%;
  margin: auto;
  margin-top: 0.1em;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: brown;
  border-radius: 1em;
}

  .skeleton-title {
      padding: .6em;
      margin: 0.1em;
      margin-bottom: 40%;
      border-radius: .8em;
      height: 20%;
      background-color: blue;
  }
  .skeleton-title2 {
      width: 60%;
  }
  
  .circle-group {
    height: 60%;
    width: 94%;
    padding: 0.1em;
      display: grid;
      grid-template-areas:
          "circle circle circle"
          "circle circle circle";
          background-color: #dddddd;
  
      
  }
  .square2 {
    padding: 0;
    margin: 0.1em;
    border-radius: 50%;
    width: 90%;
    height: 90%;
}
#s2_1{
  animation: forbutton 5.5s infinite alternate;}
#s2_2{
  animation: forbutton 7.134s infinite alternate;}
  #s2_3{
    animation: forbutton 4s infinite alternate;}
    #s2_4{
      animation: forbutton 11s infinite alternate;}
      #s2_5{
        animation: forbutton 9s infinite alternate;}
        #s2_6{
          animation: forbutton 8.6792s infinite alternate;}
          #s2_7{
            animation: forbutton 5s infinite alternate;}
            #s2_8{
              animation: forbutton 6.045s infinite alternate;}
              #s2_9{
                animation: forbutton 2s infinite alternate;}
                #s2_10{
                  animation: forbutton 15s infinite alternate;}
                  #s2_11{
                    animation: forbutton 17s infinite alternate;}
                    #s2_12{
                      animation: forbutton 1.1s infinite alternate;}
@keyframes forbutton {
  0%   {background-color: black;}
  90%   {background-color: black;}
  99%   {background-color: white;}
}