@charset "UTF-8";

.metronome-box {
display: inline-flex;
vertical-align: top;
width: 24%; border: 2px solid #ccc;
border-radius: 10px;
background: #f9f9f9;
box-sizing: border-box;
text-align: center;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
} @media (max-width: 600px) {
.metronome-box {
width: 48%;
}
} @media (min-width: 601px) and (max-width: 1024px) {
.metronome-box {
width: 32%;
}
} .metronome-header {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.metronome-center {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.metronome-volume-btn,
.metronome-play-btn,
.metronome-stop-btn {
border: none;
border-radius: 50%;
padding: 10px;
background: transparent;
font-size: 24px;
cursor: pointer;
transition: background 0.2s;
display: flex;
justify-content: center;
align-items: center;
color: black;
}
.metronome-play-btn {
font-size: 28px;
}
.metronome-volume-btn:hover,
.metronome-play-btn:hover,
.metronome-stop-btn:hover {
background: #d0d0d0;
}
.metronome-footer {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 14px;
font-weight: bold;
padding: 0 10px;
box-sizing: border-box;
}