.header{padding: 20px; 
    background-color: #39acd9;
    border: #f714a0 3px solid; 
    text-align: center; 
    font-family: sans-serif;
color: #fffffffa;}

    .canvas{width: 500px;
        align-items: center;
    height: 300px;
    margin: 30px;
    gap: 20px;
    background-color: #bcd70ea6;
    border: 1px solid #ccc;
    border-radius: 9px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    justify-content: center;}

    .gallery{display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    justify-content: center; 
    padding: 20px;}
    
.one { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #efb762;
  box-shadow: 0 0 3px 3px #efb762;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.two {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #8d37d7;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #78138898;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

.three { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #19cddd;
  box-shadow: 0 0 3px 3px #12ceebae;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

  .four {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #e90b3f;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #8f0401;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

  .five { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #33b30b;
  box-shadow: 0 0 3px 3px #09e90643;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.six {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #4240da;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #5836d3;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

  .seven { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #7617f3;
  box-shadow: 0 0 3px 3px #a73acb7d;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.eight {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #a35311;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #b5820a;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

  .nine { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #ef9162;
  box-shadow: 0 0 3px 3px #b47e6d;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.ten {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #018f46;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #079531;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

.eleven { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #ed192b;
  box-shadow: 0 0 3px 3px #f960a5;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.twelve {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #8f0401;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #8f0401;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

  .thirteen { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #81bf0dbb;
  box-shadow: 0 0 3px 3px #81c585b6;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.fourteen {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #8b5a84;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #a473a7;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}

  .fifteen { filter: blur(2px);
    display: flex;
    width: 375px;
  height: 130px;
  background-color: #62efd0;
  box-shadow: 0 0 3px 3px #62e6ef;
  border-radius: 9px;
margin: 4px auto;
  transform: rotate(-0.5eg)}

.sixteen {filter: blur(2px);
    width: 435px;
  height: 140px;
  background-color: #06453e;
  margin: 15px auto;
  box-shadow: 0 0 3px 3px #044d61;
  border-radius: 8px 10px;
  transform: rotate(0.4deg);}