stylemain.css

body{
  background-color: white;
  color: black;
}

.box{
  width: 15%;
}

.start{
    background-color: rebeccapurple;
    border: none;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 5px;
    padding: 20px 30px;
    margin-top: 5%;
    margin-bottom: 5%;
    /* margin-left: 20%; */
    color: white;
}

.start:hover{
  opacity: 0.4

}

.btnn{
  height: 20%;
  width: 80%;
  color: black;
}

.container{

  height: 20%;
  width: 100%;
  background-color: rebeccapurple;
}

.img1{
  margin-left: 12px;
  margin-top: 2%;
  margin-bottom: 2%;
}

footer{
  height: 50px;
    background-color:rebeccapurple;
    text-align: center;
    color: white;

    bottom: 0px;
    width: 100%;
    position: fixed;
  left: 0;
  bottom: 0;

}

.pie{
  height: 300px;

}

.toggle{
  float: right;
  margin-right: 20px;
  margin-top: 30px;
}

.dark-mode {
  background-color: #0a0a0a;
  color: white;
}

.pie{
  margin-top: 100px;
}