@import "reset.css";

body{
    background-color: #F6F9FC;
    font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display : flex;
    flex-direction : column;
    align-items: center;
    padding: 50px 0px;
}

.canvas{
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 1px 1px #1f1f1f;
}

.controls{
    margin-top : 30px;
    display : flex;
    flex-direction: column;
    align-items: center;
    
}

.controls .controls_colors{
    display : flex;
}

.controls_btns{
    margin-bottom : 30px;
}

.controls_btns button{
   all : unset;
   cursor: pointer;
   background-color : white;
   padding : 5px 10px;
   margin: 5px 10px;
   width: 60px;
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(50,50,93,0.1);
   border : 2px solid black;
   font-weight: 600;
   font-size: 14px;
}

.controls_btns button:active{
    transform: scale(0.98);
}

.controls_color{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
    margin : 0px 5px;
}

.controls .controls_range{
    margin-bottom : 30px;
}