*{
   font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
}
body{
    background-color: #7272ab5b;
}
.outline{
    background-color: #700548;
    height:94vh;
    width: 1000px;
    margin-left: auto;
    margin-right:auto;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.123);
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    justify-content: center;
}
h1{
    color: white;
    text-align: center;
    margin-top: 1.5em;

}
#canvas{
    background-color: white;
    height: 570px;
    width: 570px;
    justify-content: center;
    align-self: center;
    display:flex;
    flex-wrap: wrap;
}
input[type="color"] {
    border:none;
    width: 32px;
    height: 32px;
    outline:none;
}
.controls{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    align-items: center;
}
.middle{
    display:flex;
    justify-content: space-around;
}
.grid{
    display: flex;
    flex-direction: column;
    text-align: center;
}
span{
    color: white;
}
button{
    border-radius: 25px;
    padding: 5px 25px;
    font-size: 17px;
    border: none;
    transition-duration: 0.4s;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.123);
}
button:focus{
    box-shadow: 0 1px 10px 0 rgb(255, 255, 255);
}
.rainbowbtn{
    background-image:linear-gradient(to right, #F86065 , aqua,#FFED66,#7899D4);
}
.rainbowbtn:hover{
    background-image: none; 
    color:#F86065;
}
.graybtn{
    background-color: #FFED66;
    
}
.graybtn:hover{
    background-color: white; 
    color: black; 
    outline: 4px solid #FFED66;
    
}
.lightbtn{
    background-color:#F86065;
    color: white;
}
.lightbtn:hover{
    background-color: white; 
    color: black; 
    outline: 4px solid #F86065;
   
}
.erasebtn{
    background-color: aqua;
}
.erasebtn:hover{
    background-color: white; 
    color: black; 
    outline: 4px solid aqua;
}
.clearbtn{
    background-color: #7899D4;
    color: white;
}
.clearbtn:hover{
    background-color: white; 
    color: black; 
    outline: 4px solid  #7899D4;
}
.newbtn{
    background-color:#99f47d;
    color: black;
}
.newbtn:hover{
    background-color: white; 
    color: black; 
    outline: 4px solid #99f47d;
   
}
h3{
    text-align: center;
}
.square{
    flex: 1;
}