@font-face {
    font-family: 'futura';
    src: url('https://sound.codes/wp-content/uploads/fonts/futura.eot');
    src: url('https://sound.codes/wp-content/uploads/fonts/futura.eot?#iefix') format('embedded-opentype'),
          url('https://sound.codes/wp-content/uploads/fonts/futura.woff2') format('woff2'),
          url('https://sound.codes/wp-content/uploads/fonts/futura.woff') format('woff'),
          url('https://sound.codes/wp-content/uploads/fonts/futura.ttf') format('truetype'),
          url('https://sound.codes/wp-content/uploads/fonts/futura.svg#futuramedium') format('svg');
    letter-spacing:2px;
    font-style:lighter;
    font-weight: 100;

  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

::selection {
  color: #2a2c2d;
  background: #16e1ff;
}

body {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'futura';
  color: #16e1ff;
  --padding: 0.5rem;
  letter-spacing:2px;
  font-style:lighter;
  font-weight: 100;
  background: #2a2c2d;
}

p {
  display: flex;
font-style:lighter;
font-weight: 100;
  font-size: 1.1rem;
}
.footer
{
  font-size: 0.7rem;
  font-weight: 100;
  font-style:lighter;
  text-decoration: none;
}
.footer2
{
  font-size: 0.7rem;
  font-weight: 100;
  font-style:lighter;
  text-align:center;
}

a {
  color: #16e1ff;
  text-decoration: none;
}

a:hover {
  background-color: #16e1ff;
  color: #2a2c2d;
}

header {
  display: flex;
/*   padding: var(--padding); */
/*   box-shadow: 0.125rem 0.125rem var(--padding) 0.125rem rgba(255,255, 255, 0.15); */
  align-items: center;
  font-weight: 100;
  font-style:normal;
/*   position: sticky; */
/*   top: 0; */
  background: #2a2c2d;
}

h2 {
  margin: 0;
  padding: 0;
  font-weight: 100;
  font-style:normal;
  flex: 1;
}

main {
  display: flex;
  flex-direction: column;
  padding: var(--padding);
  max-width: 1024px;
  margin: 0 auto;
}

h1 {
  align-self: center;
  font-weight: 100;
}

section {
  display: flex;
/*   display: inline-block; */
/*   width: 100vw; */
  background-color: #16e1ff;
/*   margin-right: 0; */
/*   margin-left: 0; */
}

article.left {
  margin-right: var(--padding);
  background-color: #16e1ff;
  margin-top: 0;
}


article.right {
  margin-right: var(--padding);
  margin-top: auto;
  margin-bottom: auto;
  color: #2a2c2d;
  margin-left: auto;
/*   margin-right: auto; */
}

main > img {
  width: 100%;
  margin: var(--padding) 0;
  height: 50vh;
  object-fit: contain;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 20002;
}

li > input {
  display: none;
  width: min-content;
  font-size: 16px;
}

li {
  margin-bottom: var(--padding);
}

li,
li > label {
  display: flex;
  width: calc(0.25 * 1024px - var(--padding) * 1.5);
  height: calc(0.25 * 1024px - var(--padding) * 1.5);
/*   border-radius: calc(var(--padding) * 0.5); */
  overflow: hidden;
}

li > label:hover:before,
li > label:focus:before,
li > label:active:before {
  position: absolute;
  left: 0;
  top: 0;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(22, 225, 255, 0.85);
  color: #2a2c2d;
  display: flex;
  align-items: center;
  justify-content: center;
  content: attr(data-title);
}

#content {
  display: none;
  position: relative;
  z-index: 200099;
}

#content > p {
  flex: 1;
  overflow: scroll;
}

#content > h4 {
  font-size: 1.1rem;
  font-weight: 400;
}

#content > button {
  position: absolute;
  right: var(--padding);
  top: var(--padding);
  font-size: 16px;
  background: none;
  text-decoration: underline;
  color: #16e1ff;
  font-family: 'futura';
  outline: none;
  border: none;
  cursor: pointer;
}

#content.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  background: #2a2c2d;
  display: flex;
  align-items: center;
  justify-content: center;
/*   padding: calc(2 * var(--padding)); */
  opacity: 0.95;
  border: 0.1px solid #16e1ff;
  transition: 0.7s;
}

#content > .container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
  height: min-content;
  width: 60%;
  overflow: auto;
}

#content > canvas {
  position: absolute;
  z-index: -1;
  mix-blend-mode: overlay;
  filter: hue-rotate(160deg);
  left: 0;
  top: 0;
}

li > label {
  cursor: pointer;
  position: relative;
  margin-right: var(--padding);
  margin-bottom: var(--padding);
}

li > label > img {
  display: flex;
  width: 100%;
  object-fit: cover;
/*   border-radius: calc(var(--padding) * 0.5); */
  overflow: hidden;
}

li > label > p {
  flex: 1;
  margin: calc(var(--padding) * 1.5);
}

input:checked + label > img {
  border: 1px solid #16e1ff;
}

@media only screen
and (min-width: 481px)
and (max-width: 768px) {
  li,
  li > label {
    width: calc(50vw - var(--padding) * 1.5);
    height: calc(50vw - var(--padding) * 1.5);
  }
}

@media only screen and (max-width: 480px) {
  section {
    flex-direction: column;
  }

  article {
    margin-right: 0;
    margin-top: var(--padding);
  }

  li,
  li>label {
    height: auto;
    width: calc(100vw - var(--padding) * 2);
  }

  li>label {
    flex-direction: column;
  }

  li>label>img {
    width: calc(100vw - var(--padding) * 2 - 10px);
    height: calc(100vw - var(--padding) * 2 - 10px);
    border: 5px solid rgba(0,0,0,0);
  }

}


#source {
  visibility: hidden;
}

.logo {
   display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}



aside {
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #2a2c2d;
/*   opacity: 0.95; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

aside .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 768px;
  max-height: 100vh;
  height: -webkit-fill-available;
  text-align: center;
}

aside .container > svg {
  margin-top: 1rem;
  fill: #16e1ff;
}

aside .container > p {
  overflow-y: auto;
}

#playPause {
  width: 15ch;
  font-size: 1.5rem;
  background: none;
  color: #16e1ff;
  border: 1px solid #16e1ff;
  font-family: 'futura';
  outline: none;
  cursor: pointer;
}

#playPause:hover {
  color: #2a2c2d;
  background: #16e1ff;
}

#playPause:active {
  color: #2a2c2d;
  background: #16e1ff;
  opacity: 0.8;
}

#playPause[disabled] {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}