html{
  -webkit-text-size-adjust: 100%; /* Safari on iOS */
  text-size-adjust: 100%;         /* Standard property for Chrome, Edge, and Opera */
}
body {
  margin: 0;
  padding: 0;
  /*background-image: url("assets/diamond2.png");
  background-repeat: no-repeat;
  Background-size: 100% 110%;
  background-attachment: fixed;
  */
  background: var(--box-fill);
  font-family: Arial, Helvetica, sans-serif
}

canvas {
  display: block;
}

:root {
  --box-fill: repeating-linear-gradient(aliceblue, rgb(245, 255, 215) .1%, rgb(184, 221, 255) .5%);
}

.sections {
  margin: 5%;
  text-decoration: underline;
}

.headtainer {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100px;
  min-height: 35px;
  background-color: rgba(219, 238, 255, 0.1);
  border-bottom: 2px solid #000000;
  background-image: url("assets/diamond2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;

}

#headText {
  font-size: 35px;
  position: relative;
  margin-top: -40px;
  margin-left: 2%;
  text-align: left;
  width: 100%;
  height: 100%;
  padding: 4px;
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 1px aliceblue;
  z-index: 0;
}

#sketch-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.bandcamp-mobile {
  display: flex;
  width: 95%;
  height: 760px;
  margin: 2%;
  -webkit-text-size-adjust: 100%; /* Safari on iOS */
  text-size-adjust: 100%;         /* Standard property for Chrome, Edge, and Opera */
}

.video-embed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.video-embed iframe {
  position: relative;
  width: calc(100% - 4%);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: auto;
  margin: 2%;
  border: 0;
  outline: none;
  box-sizing: border-box;
}

.boxes {
  display: flex;  
}
.boxes > div {
  background-color: aliceblue;
  width: 33%;
  border: 1px solid black;
  margin: .8%;
  height: 100%;
  overflow: auto;
  font-size:clamp(10px, 3vw, 18px);
}

/*  uncomment when there are multiple releases
.bandcamp-mobile { display: none; }
.bandcamp-desktop { display: block; }

@media (max-width: 480px) {
.bandcamp-mobile { display: block; }
.bandcamp-desktop { display: none; }
}
*/



@media (max-width: 900px) {
.bandcamp-mobile {height: 550px; }
#headText {font-size: 30px; }
}

@media (max-width: 700px) {
.bandcamp-mobile {height: 480px; }
#sketch-container {visibility: hidden; }
#headText {font-size: 23px; }
}