style.css

@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text&display=swap');

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
    font-family: 'Big Shoulders Text', cursive;
}

/* CANVAS */
.canvas-container {
    height: 100vh;
    display: flex;
}

.canvas-accordion .card {
    border: 0;
    border-radius: 0;
}
.canvas-accordion .card-header {
    padding: 0;
    /* border: 0; */
}
.canvas-accordion .card-body {
    padding: 0.5rem;
}

.canvas-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
}
.canvas-icons li img {
    width: 50px;
    padding: 0.5rem;
}

.canvas-area {
    width: 100%;
    height: 100%;
    background: #FFF url('img/grid.png') repeat;
}

/* UTILITY */
.vw-100 {
    width: 100vh;
}
.vh-100 {
    height: 100vh;
}
.ph-100 {
    height: 100%;
}
.pw-100 {
    width: 100%;
}
.br-1 {
    border: 1px solid rgba(0,0,0,.125);
}