index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body {
     width: 100vw;
     height: 100vh;
     margin: 0;
     overflow: hidden;
     font-family: 'Poppins', sans-serif;
}
button {
     font-size: 30px;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     color: yellow;
     background-color: #e65454;
     border: 0px solid white;
     border-radius: 5px;
     margin: 0.5rem;
}
.controls {
     margin: 1rem;
     position: fixed;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}
[data-tooltip] {
     position: relative;
     cursor: default;
}
[data-tooltip]::after {
     font-size: medium;
     position: absolute;
     width: 180px;
     content: attr(data-tooltip);
     color: white;
     background-color: rgb(211, 65, 65);
     border-radius: 5px;
     padding: 0.4rem;
     visibility: hidden;
     opacity: 0;
     -webkit-transform: translate(2rem, 1px);
     -ms-transform: translate(2rem, 1px);
     transform: translate(2rem, 1px);
     font-family: 'Poppins', sans-serif;
}
[data-tooltip]:hover::after {
     position: absolute;
     width: 180px;
     content: attr(data-tooltip);
     visibility: visible;
     opacity: 1;
}
footer {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     position: absolute;
     bottom: 0px;
     right: 0px;
     height: 35px;
     background: #e65454;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     font-size: larger;
     color: #000;
     text-align: right;
     padding: 20px 40px;
     border-top-left-radius: 5px;
}