@font-face {
  font-family: Technology;
  src: url(Technology.ttf);
}

body {
  background-image: url(img/MarioScarton2023e-AdrianElsener-web.jpg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 33%;
  background-color: #000;
}

h1,
a,
p {
  letter-spacing: 0.1em;
}

h1 a {
  font-family: Technology;
  color: #edfaf29e;
  font-size: clamp(0.5em, 6vw, 2em);
}

p {
  font-family: Technology;
}

.cover {
  width: 150px;
  max-width: 100%;
}

main {
  position: relative;
  margin: 30px 5% 1% 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 94vh;
}

.box {
  background-color: #edfaf29e;
  display: flex;
  margin-top: 30vh;
  width: 100%;
  max-width: 900px;
}

.box > article {
  padding: 20px;
}

.box > article:not(:last-child) {
  border-right: dotted 1px;
}

.box p {
  margin-bottom: 0;
}

.box a,
.box a:visited {
  color: #000;
}

#insta {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  opacity: 0.7;
  filter: drop-shadow(2px 4px 6px black);
}

#insta img {
  width: 100%;
}

.spot {
  background-color: #ff00a6;
  padding: 3px 5px 1px 5px;
  text-decoration: none;
}

/*********** SOUND *****************/

.track {
  display: flex;
  align-items: baseline;
  padding: 4px 4px;
  border-radius: 3px;
  margin-top: 5px;
  cursor: pointer;
}

.track:hover {
  box-shadow: 0px 0px 0px 1px;
}

.track p {
  margin: 0;
}

.track:first-of-type {
  margin-top: 12px;
}

.playing {
  background-color: #fff;
  filter: invert(1);
}

.play {
  background: transparent;
  border-color: transparent transparent transparent #202020;
  border-style: solid;
  border-width: 6px 0px 6px 10px;
  margin-left: 2px;
  margin-right: 6px;
}

a.coding {
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: #8e8e8e;
  font-family: "Technology";
  font-size: 15px;
  text-decoration: none;
}

a.coding span {
  font-size: 13px;
  color: rgba(0, 0, 0, 0);
}

a.coding:hover {
  color: #ff00a6;
}

a.coding:hover span {
  color: #8e8e8e;
}

/*********** MEDIA QUERIES ***********/

@media (max-width: 900px) {
  .box {
    flex-direction: column;
    margin-top: 50vh;
  }

  .box > article:not(:last-child) {
    border-right: none;
    border-bottom: dotted 1px;
  }
}