html, body{
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
    height: 100%;          /* Ensures the body takes the full viewport height */
    margin: 0;              /* Removes default body margin */
    background-color: rgb(132, 255, 255);
    width: 100%;
    padding: 0;
}

.main{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}



/*main titles*/
.title{
  color: rgb(19, 19, 214);
}


/*div for all buttons*/
.buttonDiv{
  display: flex;
  justify-content: center;
  /*border: 3px solid black;
  padding: 5px;
  background-color: blueviolet;*/
}


/*3 buttons*/
.yesBtn{
  margin: 10px;
  width: 100px;
 background-color: rgb(0, 170, 255);
 color: blue;
 border-width: 3px;
 border-radius: 10px;
 border-color: blue;
  border-style: dotted;
 font-size: 16px;
 font-weight: bold;
 padding: 10px;
 cursor: pointer;
}

.yesBtn:hover{
  transition: background-color 0.5s ease;
  background-color: blue;
  color: rgb(0, 170, 255);
}

.noBtn{
  margin: 10px;
  width: 100px;
 background-color: rgb(0, 170, 255);
 color: blue;
 border-width: 3px;
 border-radius: 10px;
 border-color: blue;
 border-style: dotted;
 font-size: 16px;
 font-weight: bolder;
 padding: 10px;
 cursor: pointer;
}

.noBtn:hover{
  transition: background-color 0.5s ease;
  background-color: blue;
  color: rgb(0, 170, 255);
}