.header-container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.drowing-board-container{
    display: grid;
    position:sticky;
    background-color: white;
    width: 600px;
    height: 600px;
    margin: auto;
    box-shadow: 0 5px 5px 5px silver ;
    margin-bottom: 20px;
}
.color-mode-and-div-width-setter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
button{
    margin-left: 15px;
    margin-top: 25px;
    margin-bottom: 20px;
    width: 80px;
    height: 60px;
    background-color: white;
    box-shadow:  0 3px 3px 3px silver;
    border: white;
}

footer{
    text-align: center;
    margin-top: 30px;
}
.colorPicker{
    margin-top: 5px;
    width: 75px;
    height: 60px;
    background-color: white;
    box-shadow:  0 3px 3px 3px silver;
    border: white;  
}
.rainbow-mode:hover{
    background-image:     linear-gradient(
       to right, 
       #E7484F,
       #E7484F 16.65%,
       #F68B1D 16.65%,
       #F68B1D 33.3%,
       #FCED00 33.3%,
       #FCED00 49.95%,
       #009E4F 49.95%,
       #009E4F 66.6%,
       #00AAC3 66.6%,
       #00AAC3 83.25%,
       #732982 83.25%,
       #732982 100%,
       #E7484F 100%
      
      
      
     );
   animation:slidebg 2s linear infinite;
 }
 
 
 @keyframes slidebg {
   to {
     background-position:20vw;
   }
 }