style.css

* {
box-sizing: border-box;
margin:0;
}

.contentWrapper {
position: relative;
width: 80%;
height: 100vh;
border-right: 4px solid;
float: left;
background: #d6d6d6;
}

#previewWrapper {
float: right;
position: relative;
width: 20%;
height: 89vh;
background: #c3c3c3;
overflow-y: scroll;
padding-top: .65vh;
display: block;
}

h3 {
text-align: center; 
/* background: #d27979; */
border-bottom: 2px solid;
}

#heading,#preview{
background-color: rgb(48, 36, 36); 
}

#heading {
color: white;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 45px;
}

#contentWrapper,#previewWrapper{
background-color:rgb(63, 57, 57);
}
nav {
position: absolute;
width: 100%;
height: 6vh;
background-color: rgb(56, 49, 49); 
border-top: .5vh solid #2f2f2f;
border-bottom: .5vh solid #2f2f2f;
padding-top: 2px;
color: white;
z-index: 2;
}
.nav2 {
bottom:0%;
}

.nav2 h2{
margin-left: 10px;
}


.nav2 button {
padding: 4.5px;
margin: 3px;
border: none;
font-weight: bold;
float: right;
margin-right: 5px;
margin-top: -4px;
border-radius: 80px 80px 80px 80px;
font-family:initial;
font-size: 13px;
}
.nav2 button:hover {
/* background-color: rgb(243, 243, 243); */
background-color: rgb(219, 210, 210);
}
ul {
list-style-type:none;
margin: 0;
padding:0;
overflow: hidden;
}

ul li {
display: inline-block;
padding-left: 5px;
font-family: monospace;
font-size: 15.1px;
padding: 2px;
left: 4px;
position: relative;
font-stretch: extra-expanded;
}

li:hover {
background-color: rgb(182, 171, 171);
}

#myColor {
width: 20px;
height: 20px;
border-radius: 50%;
}
.dropdownContent {
display:none;
position: absolute;
top: -50%;
left: 10px;
background-color: #ffffff;
color: #3b3535;
font-family:initial;
font-weight: bolder;
/* font-size: 13px; */
/* min-width: 60px;
max-width: 200px; */
width: 100px;
height: 300px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}



.dropdownContent input:hover, .dropdownContent button:hover {
background-color: rgb(255, 255, 255);
}



input[type=range] {
-webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 20%;
height: 4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #d27979;
border-radius: 1.3px;
border: 0.2px solid #010101;
margin-top: -10px;
}
input[type=range]::-moz-range-track {
width: 20%;
height: 4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #cc6666;
border-radius: 1.3px;
border: 0.2px solid #010101;
margin-top: -10px;
}
input[type=range]::-ms-track {
width: 20%;
height: 4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #cc6666;
border-radius: 1.3px;
border: 0.2px solid #010101;
margin-top: -10px;
}

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 6px;
width: 6px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 6px;
width: 6px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 6px;
width: 6px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}

.dropdown:hover .dropdownContent {
display:inline-block;
width: 200px;
height: 200px;
}

.dropdownContent  label{
position: absolute;
margin-top: 10px;
}

#canvasWrapper {
position: relative;
width: 100%;
height: 90%;
top: 2.5%;
padding: 50px; 
overflow: hidden;
}

canvas, #canvasBackground {
box-shadow: 8px 8px 50px 10px black;
border-radius: 42px;
position: absolute;
border: 1px solid;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
z-index: 1;
}
#canvasBackground {
background: #fff;
}

#preview {
position: relative;
width:20%;
height: 11vh;
float: left;  
padding-top: 2.5vh;
color: white;
}



.imgW {
position: relative;
width: 38vh;
height:20vh;
left: 50%;
transform: translateX(-50%);
border: 1px solid;
margin-top: 5px;


background: rgba( 255, 255, 255, 0.45 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 20.0px );
-webkit-backdrop-filter: blur( 20.0px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.myImgP {
position:absolute;
width: 100%;
height:100%;
z-index:1;
}
    
.myXBtn {
background-color: black;
color: white;
position: relative;
float: right;
z-index: 2;
}

.myXBtn:hover {
background-color: crimson;
}
.unlist .opacaity{
border: 2px solid green;
}
.unlist{
height: 50px;
}

.unlist button{
position: relative;
margin-top: 10px;
}