 body {
  background-color: rgb(13, 14, 13);
  background-image: url('images/logo1-removebg-preview.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 800px;
  
 }
 
 
 

.centerImage {
     position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

   img {
        width: 40px;
        height: 40px;
    }

    .item{
  width:80px;
  height: auto;
  text-align:center;
  
  background-color: transparent;
  border: 6px solid transparent;
  margin-right: 1px;
  margin-bottom: 1px;
  float:right;
  display: grid;
  column-gap: 50px;
  
  
  
           
}

p {
    color: chartreuse;
}


.container{
        border: 5px solid rgb(8, 189, 8);
            width: 520px;
            height: 490px;
            padding: 10px;
            margin-bottom: 10px;
            overflow:calc(600px);
            
            display: flex;
              flex: 0 0 13.333%;
           flex-direction: column;
           
        }

            
        
 .hidden {
            display: none;
        }


.closebutton {
  float: right;
  cursor: pointer;
}

.closeflag:checked+.container {
  display: none;
}

.backgroundimage {
  position: absolute;
        top: calc(50% - 155px);
        left: calc(50% - 125px);
        width: 250px;
        height: 310px;
        background: rgb(8, 212, 18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: poppins;
        font-weight: 500;
        color: rgb(33, 142, 226);
        border-radius: 4mm;
        font-size: 20px;
        
       
}


.dragging {
            opacity: 0.7;
            transform: rotate(-2deg);
        }
        .over {
            border: 2px dashed #ff8c42;
            background: #fff3e0;
        }

.iconImage {
  display: grid;
  column-gap: 10px;
  grid-template-columns: auto auto auto;
 
  padding: 10px;
  float: right;
}

.contents {
  display: grid;
  column-gap: 1px;
  
 
  padding: 1px;
  
 
}

.contents > div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}



        .dragging {
            opacity: 0.7;
            transform: rotate(-2deg);
        }
        .over {
            border: 2px dashed #ff8c42;
            background: #fff3e0;
        }


.sortable-list {
  display: flex;
      flex-direction: column; /* Arrange items in a column */
      flex-wrap: wrap;       /* Wrap items to the next column when height is exceeded */
      height: 1000px;         /* Example: Set a fixed height for the container */
      /* Add any other styling for your container */
}







