/* Style for the main heading */
h1 {
  color: darkgray;
  margin-bottom: 0.5em;
  font-size: 10vw;
}

.s {
    color: green;
    border-right: 10vh;
}
.d {
    color:red;
    border-left: 10vh;
}


/* General body styles */
body {
  font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background: #FFFA8D;
  text-align: center;
}


/* Grid layout for images (Updated for 16 images) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 2em);
  grid-template-rows: repeat(4, 2em);
  gap: .4em;
  justify-content: center;
  margin-bottom: 2em;
}

/* small screen responsive design */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 40px;
    }
    .grid {
        grid-template-columns: repeat(3, 20vw);
        grid-template-rows: repeat(2, 20vh);
    }
}
/* medium screen responsive design */
@media screen and (min-width: 481px) and (max-width: 768px) {
    h1 {
        font-size: 50px;
    }
    .grid {
        grid-template-columns: repeat(3, 20vw);
        grid-template-rows: repeat(2, 20vh);
    }
}
/* Adjustments for larger screens if needed */
@media screen and (min-width: 769px) {
    .grid {
        grid-template-columns: repeat(3, 20vw);
        grid-template-rows: repeat(2, 20vh);
    }
}

.bin {
    margin-left: 6vw;
    margin-right: 6vw;
    margin-bottom: 6vh;
    width: 30vw;
    height: auto;
    transition: transform 0.2s ease;
}
.bin.ready {
    box-shadow: 0 0 .5vh .5vh blue;
    border-radius: 100%;
    transform: scale(1.05);
}
.drag-img {
    -webkit-touch-callout:none;   
    -webkit-user-select:none;     
    user-select:none;

    height: 20vh;
    width: 20vw;
    margin-right: 1vh;
    object-fit: contain;
    cursor: grab;
    filter: brightness(100%);
    transition: transform 0.2s ease, filter 0.3s ease;
    border-radius: 1em;
}

.drag-img.selected {
    filter: brightness(70%);
}
.drag-img:hover {
    transform: scale(1.05);
}