h1 {
  font-size: 38px;
}
/* For desktop displays */
@media only screen and (min-width: 1024px) {
  h1 {
    font-size: 64px;
  }
}
/* For tablet displays and other bigger displays */
@media only screen and (min-width: 415px) and (max-width: 1023px) {
  h1 {
    font-size: 48px;
  }
}
.sub-grid-content {
  grid-template-columns: 100%;
}
.music-platform-grid {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: 50% 50%;
  height: auto;
  padding-left: 25%;
  padding-right: 25%;
}
/* For tablet displays and other bigger displays */
@media only screen and (min-width: 415px) and (max-width: 1023px) {
  .music-platform-grid {
    padding-left: 15%;
    padding-right: 15%;
  }
}
/* For mobile displays and any weirdly small displays*/
@media only screen and (max-width: 414px) {
  .music-platform-grid {
    padding-left: 15%;
    padding-right: 15%;
  }
}
.music-platform-grid div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid black;
  border-image: url(/assets/images/box.svg) 20 round;
}
.platform-img-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}
/* For anything smaller than a laptop*/
@media only screen and (max-width: 1023px) {
  .platform-img-div {
    padding-right: 10%;
  }
}
.platform-img-div img {
  align-self: center;
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  height: 80%;
}
.anchor-button,
.sub-grid-content .anchor-button {
  background-color: white;
  border: 3px solid black;
  border-radius: 10px;
  color: black;
  font-family: OhMaria01, OhMaria02;
  font-size: 36px;
  padding: 10px 25px;
}
.anchor-button:link {
  text-decoration: inherit;
  color: inherit;
}
.anchor-button:visited {
  text-decoration: inherit;
  color: inherit;
}
.anchor-button:hover {
  text-decoration: inherit;
  color: inherit;
  background-color: grey;
}
.anchor-button:active {
  text-decoration: inherit;
  color: inherit;
}
/* For tablet displays and other bigger displays */
@media only screen and (min-width: 415px) and (max-width: 1023px) {
  .anchor-button {
    font-size: 5vw;
    padding: 2vw 3vw;
  }
}
/* For mobile displays */
@media only screen and (min-width: 360px) and (max-width: 414px) {
  .anchor-button {
    font-size: 5vw;
    padding: 3vw 6vw;
  }
}
/* For any weirdly small displays */
@media only screen and (max-width: 359px) {
  .anchor-button {
    font-size: 5vw;
    padding: 3vw 6vw;
  }
}