styles.css

table, th, td {
    border: 5px solid #3f88a4;
    border-collapse: collapse;
    background-color: #76b5dbad;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
    font-family: Sans-serif;
}

.deleteNode {
    color: white;
    background-color: #dd4c4c;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.div {
    background-color: #a4cdddd1;
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    display: block;
    position: relative;
}

#calc-button {
    background-color: #1ff47ca8;
    color:white;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.default-text-style {
    font-family: Sans-serif;
    color: white;
}

.edit-icon {
    vertical-align: middle;
    padding-bottom: 6px;
}
.edit-icon:hover path {
    fill: #dd924c;
}

#result-table {
    width: 100%;
}

input { box-sizing:border-box; padding: 5px;border-radius: 5px;font-family: Sans-serif;font-weight: bold;}

h1 {
    font-family: Sans-serif;
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,.5);
    text-align: center;
}
    hr {
        color: white;
}

body {
    background-color: rgb(238, 238, 238);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-image: url("./res/images/background.png");
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-attachment: scroll;
  }

  canvas {
    background-color: white;
    height: 150px;
    display: block;
    margin-top: 10px;
    border: 5px solid rgb(0, 0, 0);
    width: 100%;
    margin-right: 5px;
  }

@media screen and (max-width: 600px) {
    .indexSpan, .start, .end, #control-start, #control-end {
        width: 100%;
        margin-top: 0;
    }

    .indexSpan {
        display: block;
        width: fit-content;
    }

    .deleteNode {
        position: absolute;
        top: 0;
        right: 0;
    }

    #calc-button {
        width: 100%;
    }
}