styles.css

.contain {
    aspect-ratio: 1/1;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    justify-content: center;
    display: flex;
    background-color: black;
    color: white;
}

canvas { 
    aspect-ratio: 1/1;
    display: block;
    width: 100%;
}

canvas:hover {
    cursor: grab;
}

canvas:active {
    cursor: grabbing;
}

.mainRender {
    aspect-ratio: 1/1;
    position: relative;
    align-self:center;
    margin: 4vh;
    background-color: white;
    height: 92%;
    border-radius: 5px;
    border : 1px solid white;
    resize: none;
}

.adjustBox {
    overflow: scroll;
    color: white;
    position: relative;
    margin: 4vh;
    margin-left: 0;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 8vh;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 1%;
    height: 90vh;
    width:inherit;
    max-width: 23%;
    background-color: rgb(0, 0, 0);
    padding: 10px;
}

.adjustBox img {
    display: block;
    border-radius: 4px;
    max-width: 100%;
    max-height: 100%;
    border-bottom: 20px;
    overflow: scroll;
}

.equation {
    align-self: center;
    font-family: 'Times New Roman', Times, serif;
    margin: 10px;
    font-size: xx-large;
    overflow: scroll;
}

#power-slider {
    width: 90%;
    height: 10px;
    margin-bottom: 20px;
    background-color: indianred;
}

#c-real-slider {
    position: absolute;
    width: 101%;
    height: 10px;
    bottom: -8%;
    left: 0;
}

#c-imaginary-slider {
    position: absolute;
    right: -58%;
    top : 48%;
    width: 101%;
    height: 10px;
    rotate: -90deg;
}

#iteration-slider {
    width: 90%;
    height: 10px;
    margin-bottom: 20px;
    color: indianred;
}

#horizontal-line {
    position: absolute;
    top: 50%;
    background-color: black;
    height: 1px;
    width: 100%;    
}

#vertical-line {
    position: absolute;
    top: 50%;
    background-color: black;
    height: 1px;
    width: 100%;
    rotate: 90deg;    
}

#hue-slider {
    width: 90%;
    height: 10px;
    margin-bottom: 20px;
}

#smooth-min-slider {
    width: 90%;
    height: 10px;
    margin-bottom: 20px;
}

#smooth-max-slider {
    width: 90%;
    height: 10px;
    margin-bottom: 20px;
}

.vector-pad {
    position: relative;
    aspect-ratio: 1 / 1 ;
    width: 70%;
    background: radial-gradient(#ff57a6 35%, rgb(255, 227, 70) 80%);
    background-color: rgb(46, 46, 46);
    border: 1px solid white;
    margin-left: 13%;
    margin-right: 3%;
    margin-bottom: 10%;
    border-radius: 7px;
    overflow: unset;
}

.d-slider {
    position: absolute;
    display: inline-block;
    height : 10px;
    width : 10px;
    border-radius: 10px;
    border: 2px solid black;
    cursor: grab;
    background-color: white;
}

.d-slider:hover {
    cursor: grab;
}

.d-slider:active {
    cursor: grabbing;
}

#resolution {
    height: 20px;
    width: 140px;
    margin-top: 0;
    background-color: gray;
    border: 1px solid white;
    margin: 2%;
}

.one {
    position: absolute;
    font-size: smaller;
    color: black;
    top: 0;
    left: 0;
}

.two {
    position: absolute;
    font-size: smaller;
    color: black;
    top: 0;
    right: 0;
}

.three {
    position: absolute;
    font-size: smaller;
    color: black;
    bottom: 0;
    left: 0;
}

.four {
    position: absolute;
    font-size: smaller;
    color: black;
    bottom: 0;
    right: 0;
}

button {
    border: none;
    border-radius: 5px;
    margin-bottom: 3%;
    width: 90%;
    height: 40px;
    font-size: large;
    background: linear-gradient(45deg, rgb(45, 255, 45), rgb(90, 0, 143));
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: rgb(75, 75, 75);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

button:hover {
    background: linear-gradient(90deg, rgb(45, 255, 45), white,  rgb(90, 0, 143));
    transition: 400ms;
    font-size: larger;
    font-weight: 300;
    box-shadow: 0 0 0 0;
}

button:active {
    transition: 5ms;
    background: linear-gradient(90deg, rgb(255, 147, 147), rgb(98, 221, 98));
    box-shadow: 0 0 0 0;
    background-color: rgb(165, 165, 165);
    color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}