styles.css

*{
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    padding: 0;
    position: relative;
}
#drawing-board{
    width: 600px;
    height: 600px; 
    background-color: rgb(235, 255, 83);
    position: relative;
    display: inline-block;
    overflow: hidden;
}
#mycanvas{
    border: 1px solid red;
    /* display:block;  */
    display: none;
}
.cover{  
    box-sizing: border-box;
    position: absolute;  
}
.cover:hover{
    /* outline: 1px dotted black; */
    position: absolute;
}
.cover-img{
    width: 100px;
    position: absolute;
}
.cover-img:hover{
    outline: 1px dotted black;
    position: absolute;
}
.circle{
    width: 100%;
    height: 100%;
    border-radius: 50%; 
    cursor: move;
}
.image{
    width: 100%;
    height: 100%;  
    cursor: move;
}

.input-text{ 
    border: none;
    border-radius: 0;
    font-size: 20px;
    background: transparent; 
    font-family: 'Times New Roman', Times, serif;
}
.input-text:focus{
    outline: 1px solid #333333; 
    
}

.resizer{
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid #333333;
    background-color: none;
    position: absolute;
}
.cover:hover .resizer{
    display: inline-block;
}
.nw{
    position: absolute;
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}
.ne{
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.sw{
    position: absolute;
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.se{
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}
 .rect{
    width: 100%;
    height: 100%; 
    background-color: red;
    z-index: -1;
    cursor: move; 

 }
 .selected{
    /* border: 0.1px dashed red; */
    outline: 1px dashed red;
 }

 /* Add Button */
 button{
    cursor: pointer;
    border-radius: 5px;
 }
 .layers{
    padding: 10px;
    border: 1px solid #333333;
 }
 #layer-container{
    position: absolute;
    width: 200px; 
    border: 1px solid red;
    top: 50px;
    right: 300px;
    cursor: grab;
 }
 .add-container{ 
    bottom: 10px;
    right: 10px;
    /* width: 300px;  */
    padding: 10px; 
    box-sizing: border-box; 
    grid-gap: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap
    /* display: grid;
    grid-template-columns: repeat(4,1fr);  
    grid-template-areas: 
                        "f f f f"
                        "i i cr cr" 
                        "p p p p"
                        "re re c c"
                        "t t n n"
                        "do do de de"
                        "o o o o" */
                         ;
 }

 #font-family{
    width: 100%;
 }

 .shape-button{ 
    width: 45px;
    height: 45px;
    padding: 5px 5px;
    box-sizing: border-box;
    cursor: pointer; 
    background-color: white;
    border: 1px solid #333333;
    transition: 200ms;
 }
 .shape-button:hover{
    background-color: #333333;
    color: white;
 }
 #add-rect{ 
    cursor: pointer; 
    grid-area: re;
 }
 #add-circle{ 
    cursor: pointer;
    grid-area: c;
 }
 #file-input{    
    grid-area: f;
    width: 100%;
 }
 #add-file{ 
    cursor: pointer; 
    grid-area: i; 
 }
 #crop{
    width: 45px ;
    height: 45px; 
    border: 1px solid #333333;
 }
 #crop:hover{
    color: white;
    background-color: #333333;
 }

 #add-text{ 
    display: block; 
    cursor: pointer; 
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
 }
 
 #color-picker{ 
    width: 50%;
    outline: none;
    border: none;
    grid-area: p;
 }
 .error{
    display: block; 
    color: red;
    font-size: 20px;
    height: 25px;
    font-family: Arial, Helvetica, sans-serif;
    /* bottom: 700px; */
 }
 #download{
    width: 45px;
    height: 45px; 
    cursor: pointer;
    padding: 5px; 
    border: 1px solid #333333;
 }
 #download:hover{
    background-color: #333333;
    color: white;
 }
 
 .crop{
    border-radius: 50%; 
    overflow: hidden;
    grid-area: cr;
 }
 .uncrop{
    border-radius: 0;
 }
 #text-box{
    width: 50px;
 }
 #delete{
    width: 45px;
    height: 45px;
    border: 1px solid 	#DC3545;
    color: 	#DC3545;
    grid-area: de;
    cursor: pointer;
 }
 #delete:hover{
    background-color: 	#DC3545;
    color: white;
    font-weight: 600;
 }
 #save{
    width: 45px;
    height: 45px; 
    border: 1px solid #333333;
 }
 #save:hover{
    color: white;
    background-color: #333333;
 }
 #font-size{ 
    padding-left: 5px;
    width: 40%;
 }

.editor{
    box-sizing: border-box;
    width: 250px;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: whitesmoke;  
    padding:5px;
    height: calc(100vh - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.storage-container{ 
    margin-top: 50px;
    background-color: white;
    /* width: 300px; */
    height: 200px; 
    /* padding: 10px; */
    box-sizing: border-box;
    overflow: auto;
}
.storage-container > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #333333;
    margin: 5px;
    padding: 5px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
.storage-container > div:hover{
    border: 1px solid lightgray;
    background-color: lightgray; 
}
.storage-container > div >span{ 
    display: inline-block;
}
.delete-file{
    width: 20px;
    height: 20px;
    border: 1px solid #DC3545;
    padding: auto;
    color: #DC3545;  
    font-weight: 600;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}
.delete-file:hover{
    background-color: #DC3545;
    color: aliceblue;
    border: 1px solid #DC3545;
}

/* Nav Bar */
.nav-bar{
    box-sizing: border-box;
    border-bottom: 1px solid #333333;
    font-family: Arial, Helvetica, sans-serif;
    background-color: whitesmoke;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%; 
    z-index: 10;
    box-shadow: #333333;
}
.nav-bar > input{
    margin: 10px;
    padding: 5px;
}
.button{
    padding: 3px 10px;
    box-sizing: border-box;
    cursor: pointer;
}
#percentage-value{ 
    margin-left: auto;
    margin-right: 20px;
}