style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap');
/** GLOBAL CSS **/
*,
*::before,
*::after {
 box-sizing: border-box;
}
body {
 padding: 2rem;
 max-width: 500px;
 margin: 0 auto;
 text-align: center;
 font-family: 'Roboto', sans-serif;
 background-color: #f5f5f5;
}
.main-container {
 background-color: #fff;
 padding: 2rem;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
/** POPUP CSS **/
.popup-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.3);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 10;
}
.popup {
 width: 500px;
 padding: 2rem;
 border-radius: 12px;
 background-color: #fff;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.popup-btn-close {
 position: absolute;
 top: 1rem;
 right: 1rem;
}
/** DRAGGABLE CSS **/
.widget {
 padding: 1rem;
 border: 1px solid #ccc;
 border-radius: 12px;
 background-color: #fff;
 cursor: move;
}
/** TOOLBAR CSS **/
.toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.toolbar-btn {
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 12px;
 padding: 0.5rem 1rem;
 cursor: pointer;
}
.toolbar-btn-active {
 background-color: #aee4f0;
}
/** FONT AWESOME Icons **/
@import "https://kit.fontawesome.com/72adea038a.js";