.container-att {
    position: relative;
    width: 130vmin;
    height: 130vmin;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-circle-att {
    position: absolute;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background-color: #acbd8a;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: calc(1vmin + 10px);
    font-weight: bold;
}

.surrounding-circles-att {
    position: absolute;
    width: 86.33%;
    height: 86.33%;
}

.circle-att {
    position: absolute;
    width: 14.44%;
    height: 14.44%;
    border-radius: 50%;
    background-color: aliceblue;
    transition: transform 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.circle-att:hover {
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


.surrounding-circles-att .circle-att:nth-child(1) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-brenda.png');
    top: 1%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(2) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-cesar.png');
    top: 6.5%; 
    right: 27.2%; 
    transform: translate(50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(3) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-clare.png');
    top: 21%; 
    right: 10%; 
    transform: translate(50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(4) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-daniel.png');
    top: 40%; 
    right: 1%; 
    transform: translate(50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(5) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-emmet.png');
    bottom: 40%; 
    right: 1%; 
    transform: translate(50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(6) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-jacob.png');
    bottom: 21%; 
    right: 10%; 
    transform: translate(50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(7) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-joey2.png');
    bottom: 6.5%; 
    right: 27.2%; 
    transform: translate(50%, 50%); 
  }

.surrounding-circles-att .circle-att:nth-child(8) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-kendra.png');
    bottom: 1%; 
    left: 50%; 
    transform: translate(-50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(9) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-marshall.png');
    bottom: 6.5%; 
    left: 27.2%; 
    transform: translate(-50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(10) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-mona.png');
    bottom: 21%; 
    left: 10%; 
    transform: translate(-50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(11) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-niv.png');
    bottom: 40%; 
    left: 1%; 
    transform: translate(-50%, 50%); 
  }
.surrounding-circles-att .circle-att:nth-child(12) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-vibi.png');
    top: 40%; 
    left: 1%; 
    transform: translate(-50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(13) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-zaden.png');
    top: 21%; 
    left: 10%; 
    transform: translate(-50%, -50%); 
  }
.surrounding-circles-att .circle-att:nth-child(14) { 
    background-image: url('https://static.igem.wiki/teams/5149/team-doodle/d-aurko.png');

    top: 6.5%; 
    left: 27.2%; 
    transform: translate(-50%, -50%); 
  }

  .indicator-att {
    position: absolute;
    width: 70%;
    height: 70%;
    border: 0.5vmin solid rgba(245, 193, 158, 0.5);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.5s ease-in-out;
}

.indicator-att::after {
    content: '';
    position: absolute;
    top: -1vmin;
    left: 50%;
    width: 2vmin;
    height: 2vmin;
    background-color: #f1ab60;
    border-radius: 50%;
    transform: translateX(-50%);
}

@media (max-width: 600px) {
    .container-att {
        width: 95vmin;
        height: 95vmin;
    }

    .circle-att {
        width: 18%;
        height: 18%;
    }

    .central-circle-att {
        font-size: calc(1.5vmin + 8px);
    }
}