body { font-family: "Work Sans", sans-serif; background-color: #121212; color: #eec4e7; padding: 1rem; line-height: 1.5; } #chord-container { display: flex; flex-wrap: wrap; gap: 1.5rem; } .chord-card { border: 1px solid rgb(151, 16, 137); border-radius: 8px; padding: 1rem; background-color: #1a1a1a; width: max-content; } .chord-card h2 { margin-top: 0; font-size: 1.2rem; color: #ffd9f0; } .fretboard { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: .5rem; border: .5px; background-color: #56208bbe; } .fretboard .fret { background-color: #130404!important; } .fret-row { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 2px; } .fret { width: 2.1rem; height: 1.6rem; box-sizing: border-box; border: .5px solid #48b9debd; border-left: 2px solid #55555500; border-right: 2px; display: flex; align-items: center; justify-content: center; font-size: 1rem; text-align: center; line-height: 1.6rem; font-weight: bold; background-color: #1e1e1e; position: relative; color: transparent; } .fret[data-dot]::after { content: ''; width: 0.55rem; height: 0.55rem; background-color: #ff6b6b; border: 1px solid white; border-radius: 50%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:rgba(255, 0, 0, 0.346); border-color:rgb(255, 6, 230) } .fret:empty { background-color: #1e1e1e; } .alternatives { margin-top: 1rem; } .alternatives h3 { color: #ffffff; font-size: 1rem; margin-bottom: 0.5rem; } .alternatives-container { display: flex; gap: 2rem; flex-wrap: wrap; } .alternative-fretboard { margin-inline: 1.8rem; } .alternative-fretboard .fret { width: 1.8rem; height: 1.3rem; }