body {
    background-color: #dee1e4;
    background-image: url("https://media.istockphoto.com/id/1699183067/photo/high_quality-seamless-wood-texture.jpg?s=612x612&w=0&k=20&c=Z2sy7HY6Gk4OuHd-fXB7419e2KytX_hz4dp2b8ApMBc=");
    background-size: 100% 100%;
}
button {
    position: relative;
    padding: 10px 20px; /* Spacing inside the button */
    border-radius: 999px; /* Extremely large value for rounded ends */
    border: none; /* Remove default border */
    cursor: pointer; /* Change pointer on hover */
    background-color: #bcd5da;
}
h3 {
    position: relative;
    margin: 1px;
    color: #e66c94;
    text-shadow: 1px 1px 3px #ad88c3;
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
}
p {
    position: relative;
    margin: 5px;
    color: #4c4f53;
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 9;
    font-style: bold;
    font-size: 23px;
}
.schemes {
    padding: 30px 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 3vw;
    height: 375px;
}
.scheme {
    display: flex;
    flex-direction: column;
}
.scheme div {
    flex-grow: 1;
    padding: 17px;
    text-transform: uppercase;
    text-align: left;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50px;
}

@media (max-width: 1100px) {
    .schemes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .schemes {
        grid-template-columns: repeat(1, 1fr);
    }
}

.example li {
    background-color: attr("data-color");
    height: 20px;
}
.graypaint {
    position: relative;
    transform: translate(28%, -411%) scale(0.5);
    
    
}
.hover-message {
    position: absolute;
    display: none;
    width: 204px;
    background-color: #e0e5eb;
    border-radius: 48%;
    padding: 25px;
}
.paintmap {
    position: absolute;
    height: 51px;
    width: 53px;
    border-radius: 50%;
    transform: translate(1130px, -376px) rotate(41deg);
}
.paintmap:hover .hover-message{
   display: block;
}