html, body {
  background-color: #808080 ;
  color: #C0C0C0 ;
  display: flex ;
  justify-content: center ;
  padding: 0px ;
  margin: 0px ;
  margin-bottom: 8px ;
  min-height: 100% ;
  }

div {
  padding: 0px ;
  margin: 0px ;
  }

div.main {
  width: 80% ;
  min-height: 100% ;
  max-width: 960px ;
  text-align: left ;
  font-family: Calibri, Arial, Helvetica, Sans Serif ;
  font-size: 13.5pt ;
  }

div.section {
  margin: 8px 0px ;
  }

div.container_biglogo {
  }

.biglogo {
  width: 100% ;
  }

div.content {
  background-color: #404040 ;
  border-radius: 8px ;
  padding: 16px 15% ;	
  text-align: center ;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .6); /* Inner shadow */
  transition: box-shadow 0.3s ease;
  }

p.small {
  font-size: 11pt ;
  padding: 0px 15% ;
  }
span.small {
  font-size: 11pt ;
  }

p {
  text-align: center ;
  margin-bottom: 0px ;
  }
p.textbody {
  font-size: 13pt ;
  text-align: justify ;
  text-indent: 1.25em ;
  display: inline-block ;
  max-width: 500px ;
  }
p.order {
  font-size: 12pt ;
  font-weight: bold ;
  text-align: center ;
  text-indent: 0 ;
  display: inline-block ;
  max-width: 500px ;
  background: #808080 ;
  padding: .3em .6em ;
  border-radius: .4em ;
  color: #404040 ;
  margin-bottom: 1em ;
  }
div.vinyl {
  background-image: url('img/vinyl.png') ;
  background-repeat: no-repeat;
  background-position: center top; /* horizontally centered, vertically top */
  background-size: auto 100%; /* width auto, height 100% of div */
  background-repeat: no-repeat ; 
  height: 4em ;
  display: flex;
  align-items: center;       /* vertically centers content */
  justify-content: center;   /* horizontally centers content, optional */
  text-align: center;        /* centers multi-line text */
  margin: 1em ;
}

a {
  color: #FFFFFF ;
  text-decoration: none ;
  }
a:hover {
  text-decoration: underline ;
  }
a:active {
  text-decoration: underline ;
  color: #FFFFFF;
  }
a:visited {
  color: #FFFFFF;
  }

span.line {
  display: block ;
  }
span.possible-line {
  display: inline-block ;
  }

div.social-group {
  display: flex ;
  flex-wrap: wrap ;
  justify-content: center ;
  }
.social {
  display: inline-block ;
  font-size: 15pt ;
  font-weight: bold ;
  text-align: center ;
  margin: 24px 0px ;
  width: 13ch ;
  }
.social > img {
  width: 48px ;
  }
.social > span {
  display: block ;
  }

@media screen and (prefers-color-scheme: dark) {
  html, body {
    background-color: #808080 ;
    color: #C0C0C0 ;
    }
  div.content {
    background-color: #404040 ;
    }
  }


@media screen and (max-width: 960px) {

  p.small {
    padding: 0px 15% ;
    }
  .social {
    width: 9ch ;
    margin: 12px ;
    }

  @media screen and (max-width: 760px) {
    html, body {
      color: #D0D0D0 ;
      }

    div.main {
      font-size: 13pt ;
      }

    .social {
      font-size: 14pt ;
      }
    .social > img {
      width: 45px ;
      }
    .social > span {
      display: none ;
      }
    .social-group-label {
      display: none ;
      }
    div.content {
      border-radius: 5px ;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, .6); /* Inner shadow */
      transition: box-shadow 0.3s ease;
      }

    @media screen and (max-width: 590px) {
      div.main {
        width: 100% ;
        font-size: 12pt ;
        }
      div.content {
        padding: 16px 12% ;
        }
      .small {
        font-size: 9pt ;
        }
      .social > img {
        width: 52px ;
        }
      .social {
        font-size: 13pt ;
        }
      p {
        margin-bottom: .75em ;
        }

    
      @media screen and (max-width: 460px) {
        div.content {
          border-radius: 3px ;
          box-shadow: inset 0 0 2px rgba(0, 0, 0, .8); /* Inner shadow */
          transition: box-shadow 0.3s ease;
          }
        p.textbody {
         text-align: left ;
         text-indent: 0em ;
         }
        span.possible-line {
          display: inline ;
          }
        span.line {
          display: inline ;
          }

        @media screen and (max-width: 425px) {
        .social > img {
          width: 70% ;
          display: block ;
          }
        .social {
          margin: 12px 20% ;
          padding: 0px ;
          }
        div.social-group {
          display: inline-block ;
          width: 45% ;
          }

        }    
      }
    }
  }