*{
    border: 0px;
    margin: 0px;
    font-family: 'Anton', sans-serif;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#loading{
    width: 200px;
    height: 100px;
    position:absolute;
    border: 5px solid cyan;
    border-left-color: purple;
    border-top-color:blue;
    -webkit-animation: rotate 1s;
    animation: rotate 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes rotate{
    0%{
        border-radius: 0%;
    }
    25%{
        border-radius: 25%;
    }
    50%{
        border-radius: 50%;
    }
    75%{
        border-radius: 75%
    }
    100%{
    transform: rotate(360deg);
    transition: 2s ease-out;
    
    }
    
}
/* buttons */
input{
    width: 50px;
    height: 50px;
    margin: 10px;
    cursor: crosshair;
    border-radius: 10px;
    text-align:center;
    font-size: 20px;
    font-weight: 800;
}
input:hover {
    transition: 0.3s ease-out;
    border-radius: 50%;
  }

/* class for js */
  @media (prefers-color-scheme: dark) {
    /* Dark theme styles go here */
    body{
        background-color: black;
        color: white;
    }
    input{
        background: white;
    }
  }
  
  @media (prefers-color-scheme: light) {
    /* Light theme styles go here */
    body{
        background-color: blanchedalmond;
        color: black;
    }
    input{
        background: burlywood;
    }
    #but{
        background: burlywood;
    }
  }
  

  #but{
    width: 50px;
    height: 30px;
    border-radius: 10px;
    
  }
  #result{
    background-color: aqua;
    margin: 20px;
    font-size: 20px;
    padding: 5px;
    border-radius: 10px;
    cursor: default;
  }

  /* haptic button */

  /* #hap{
    margin-top: 10px;
  } */