paint.css

body{
    margin:0;
    padding:0;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;

}
.container {
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: greenyellow;
 
    position: relative;
    align-items: center;
  }
.screen
{
    height: 500px;
    width: 500px;
    border: 1px solid black;
    background-color: white;
  margin: auto;
  padding: 5px;
   
    

}
.side-menu
{
    height: 100%;
    width: 15%;
    border: 1px solid black;
    background-color: grey;
    position: relative;
    justify-items: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  
}
.colors{
 display: flex;
 flex-direction: column;
align-items: center;
}
.row{
  display: flex;
  flex-direction:row;
  width: 100%;;
}
.color
{
    height: 60px;
    width: 60px;
    border-radius: 100%;
    margin:5px 10px;
  
}
.blue
{
  background-color: blue;
}
.red
{
  background-color: red;
}
.green
{
  background-color: green;
}
.black
{
  background-color: black;
}
.orange
{
  background-color: orange;
}
.yellow
{
  background-color: yellow;
}
.size
{
    height: 100px;
    width: 100%;
    text-align: center;
    position: relative;
  justify-items: center;
  align-items: center;
  display: flex;
  flex-direction: column;

}
.button{
  width: 40%;
  height: 26%;
  font-size: 15px;
  text-align: center;
  margin: 2px;
}
.text{
  width: 100%;
  height: 10px;
  font-size: 20px;
  text-align: center;
}
.one{
  width: 38%;
  height: 20px;
  font-size: 15px;
  text-align: center;
  margin: 2px;
}
.two
{
  height: 20px;
    width: 50px;
}
.eraser{
  background-color: white;
  width: 40%;
  height: 6%;
    border: 1px solid black;
 align-items: center;
    text-align: center;
    position: relative;
  justify-items: center;
  margin: 8px;
}
.eraseAll{
  background-color: white;
  width: 40%;
  height: 6%;
    border: 1px solid black;
 align-items: center;
    text-align: center;
    position: relative;
  justify-items: center;
  margin: 8px;
}

.canvas-size
{
    height: 40px;
    width: 20px;
    text-align: center;
    position: relative;
  justify-items: center;
  margin-top: 5px;

}
.width{
  width: 60px;
}
.heigth{
  width: 60px;
}

.shapes
{
  height: 75px;
    width: 150px;
    display: flex;
    flex-direction: column;
   align-items: center;
   margin-top: 7px;
}
.shape{
  height: 20px;
    width: 144px;
    display: flex;
   align-items: center;
   justify-content: space-evenly;
  
}
.shapetext{
  height: 25px;
  width: 100px;
  text-align: center;
}
.icons
{
  height: 17px;
  width: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
}