*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #26262c;
  height: 100vh;
  width: 100vw;
}

.main {
  display: grid;
  height: 100%;
  grid-template-rows: 65% auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.5rem;
}

.main-player {
  aspect-ratio: 21/9;
  height: 100%;
  margin-inline: auto;
  grid-column: 1/4;
}

.secondary-player {
  position: relative;
  aspect-ratio: 16/9;
  height: 100%;
  margin-inline: auto;
}

button {
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.swap-btn {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF'%3E%3Cpath d='M19.4,36.4l5-4.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2L20,30.2V15a2,2,0,0,0-4,0V30.2l-1.6-1.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l5,4.9A1.9,1.9,0,0,0,19.4,36.4Z'/%3E%3Cpath d='M32,33V17.8l1.6,1.6a1.9,1.9,0,0,0,3-.2,2.1,2.1,0,0,0-.2-2.7l-5-4.9a1.9,1.9,0,0,0-2.8,0l-5,4.9a2.1,2.1,0,0,0-.2,2.7,1.9,1.9,0,0,0,3,.2L28,17.8V33a2,2,0,0,0,4,0Z'/%3E%3Cpath d='M24,42A18,18,0,1,1,42,24,18.1,18.1,0,0,1,24,42m0,4A22,22,0,1,0,2,24,21.9,21.9,0,0,0,24,46Z'/%3E%3C/svg%3E");
  opacity: 0.3;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.secondary-player:hover > .swap-btn {
  display: block;
}

.swap-btn:hover {
  opacity: 0.8;
}