*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: aliceblue;
}

html,body{
    width:100%;
    height: 100%;
}

#main{
    width:100%;
    height:100%;
    background-color: rgb(96, 227, 96);
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel{
    overflow: hidden;
    width:80%;
    height:80%;
    background-color: white;
    border-radius: 10px;
}

#ptop{
    width:100%;
    height: 100px;
    background-color: darkgreen;
    display: flex;
    padding: 0 30%;
    align-items: center;
    justify-content:space-between;
}

.box{
    padding: 10px 20px;
    background-color: white;
    border-radius: 5px;
    color:rgb(14, 51, 14);
    font-weight: 600;
    font-size: 24px;
}

.elem{
    width:10%;
    display: flex;
    align-items: center;
    gap:10px;
}

#pbottom{
    width: 100%;
    height: calc(100% - 100px);
    padding:16px;
    display: flex;
    gap:10px;
    flex-wrap: wrap;
}

.bubble{
    width:38px;
    height: 38px;
    background-color: rgb(81, 126, 14);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble:hover{
    cursor: pointer;
    background-color: rgb(1, 59, 1);
}