* {
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    color: aliceblue;
    background-color: rgb(31, 63, 86);
    margin-top: 5rem;
}
.btn {
    height: 100px;
    width: 100px;
    border-radius: 1rem;
    border: 2px solid white;
}
.dialog-box {
  display: none; 
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 2px solid #333;
  padding: 20px;
  color: black;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  z-index: 1000;
}
.container {
    margin-top: 1rem;
    display: flex;
}
.container .box_line1{
   margin-right: 1rem;
}
.box_line1 div{
    margin-top: 1rem;
}
.box_line2 div{
    margin-top: 1rem;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.purple {
    background-color: purple;
}

.flash {
    background-color: aliceblue;
}
.user {
    background-color: aquamarine;
}
#info{
    font-weight: 700;
    font-size: 1rem;
    margin-top: 2rem;
    color: aliceblue;
    border: 1px solid white;
    background-color: rgba(61, 98, 173, 0.461);
    border-radius: 1rem;
    height: 2.5rem;
    width: 10rem;
}
button:hover{
    box-shadow: 0 0 5px white;
}