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

.options-cont{
    height:4rem;
    width:3.5rem;
    background-color:#f1f2f6;
    position:absolute;
    top: 2rem;
    left:2rem;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius: 50%;
    font-size:2rem;
    box-shadow: rgba(33, 40, 48, 0.265)0px 8px 24px; 
}

.tools-cont {
    display: flex;
    height: 5rem;
    width: 55vw;
    background-color:#f1f2f6;
    justify-content: space-around;
    position: absolute;
    top: 2rem;
    left: 25vw;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.scale-tools{
    animation-name:scale-tools;
    animation-duration:1s;
}
@keyframes scale-tools{
    0%{
        transform:scale(0.1);
    }

    100% {
    transform:scale(1);
}
}
.tools-cont>*{
    display:block;
    width:4rem;

}
.pencil-tool{
    height:4rem;
    width:5rem;
    background-color:#f1f2f6;
    box-shadow: rgba(13, 13, 13, 0.091) 0px 8px 24px;
    position:absolute;
    top:7rem;
    left:25vw;
    display:none;
}
.pencil-width-cont{
    height:2rem;
    display:flex;
    justify-content:center;
    align-items: center;
}
.pencil-width-cont input{
    width:80%;

}
.pencil-color-cont{
    background-color:#f1f2f6;
    height:calc(100%-2rem);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0.5rem;
}
.pencil-color{
    width:1rem;
    height:1rem;
    border-radius:50%;
}
.black{
    background-color:black
}
.red{
    background-color:red;
}
.blue{
    background-color:blue
}
.eraser-tool-cont{
    height:2rem;
    width:5rem;
    background-color:#f1f2f6;
    display:none;
    justify-content:center;
    position:absolute;
    top:7rem;
    left:33vw;
    background-color:#f1f2f6;
    box-shadow:rgba(7, 7, 7, 0.091) 0px 8px 24px;
}
.eraser-tool-cont input{
      width:80%;
}
.sticky-cont{
    height:15rem;
    width:15rem;
    position: absolute;
    top:15rem;
    left: 10rem;
}
.header-cont{
height:2rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color:#f1f2f6 ;
}
.header-cont>*{
    height:1rem;
    width:1rem;
    margin-right: 0.5rem;
    border-radius:50% ;
}
.minimize{
background-color: greenyellow;
}
.remove{
background-color: red;
}
.note-cont{
    height:calc(100%-2rem);
    box-shadow:rgba(7, 7, 7, 0.091) 0px 5px 15px;
}
textarea{
   height: 100%; 
   width:100%;
   outline:none;
   border:none;
   resize:none;
}
img{
    height: 100%;
    width:100%;
}