body {
  background-image: url('images/badtrans_v0.1.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor:url('https://emojipedia.org/_next/image?url=https%3A%2F%2Fis.zobj.net%2Fimage-server%2Fv1%2Fimages%3Fr%3DvGBtVMLR7BM41VTTxmwh7LckGZ35cIHrVUc5pY83afMFVMh8Ch-QRRTkVgh3o62A8B0y7WtJ-eOuy_1QYD4zL4enmGAOv8MGConJW_yWRnI23kWGta235KAgfiol7x0-aMYlKPGuZe8i3cm_bE8PqAC67xoLo0a8NdSTeWWSUwnAfDSdxK1llu3ohvZQx5iI5-VM5Ae2CHRdI9Erk1pTd8x83G_jnzC2nilijvZW4I2KEwV-1F47TVj7VAo&w=64&q=75') ,auto;
}

header {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  margin: 0px;
  font-family: "win";
  font-weight: bold;
}

.buttonRadio {
  position: fixed;
  z-index: 1;
  height: 80px;
  width: 80px;
  text-align: center;
  top:20%;
  right:20%;
  margin: auto;
  font-size: xxx-large;
  transform: rotate(50deg);
}

.qr {
  width: 500px;
}

button.lien {
  display: block;
  margin: auto;
  margin-top: 2em;
}

button a {
  text-align: center;
  font-family: "win";
  font-size: xx-large;
  text-decoration: none;
  padding: 0.4em;
}

#off {
  display: none;
}

#play {
	box-shadow: 5px 5px 22px 3px rgba(0, 0, 0, 0.50);
}

#title {
  display: block;
  padding-top: 1em;
  margin: auto;
  background-image:radial-gradient(100% 100% at 50% 0%, #777777 0%, #6b6b6b 33.33%, #555555 100%), linear-gradient(180deg, #ffffb5 0%, #fef372 7.33%, #f6d860 22%, #f3bf59 27.67%, #ed894b 39%, #e47346 45%, #d53a42 57%, #c93a51 63.33%, #b1385e 76%, #97385d 82%, #6a324f 94%);
  width: 90%;
  max-width: 900px;
  font-size: large;
  color: white;
  height: 4em;
}

#main {
  margin-top: 5em;
  padding-bottom: 5em;
}

.sticker {
  font-family: Redaction;
  background-color: white;
  border-left:   solid  9px #EEEEEE;
  border-right:  solid  9px #EEEEEE;
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 720px;
  margin-bottom: 4em;
}

h1 {
  font-family: win;
  margin-bottom: 0px;
  margin-top: 0px;
  text-align: center;
  font-size: 3rem;
}

h2 {
  font-family: win;
  font-size: 2.5rem;
  text-decoration: underline;
  font-style: italic;
  padding-left: 2em;
}

h3 {
  font-family: win;
  font-style: italic;
  text-decoration: underline;
  font-size: 2rem;
  padding-left: 1.5em;
}

h4 {
  font-family: win;
  font-size: 1.7rem;
}

h5 {
  font-size: 1.5rem;
}

a, p, li {
  font-family: Redaction;
  font-size: 1.3rem;
}

.sticker img {
  display: block;
  margin: auto;
  width: 70%;
  margin-top: 0px;
}

.full img {
  width: 100%;
  margin: none;
}

code, pre {
  font-family: space-notorious;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  background-color: #222222 ;
  color: white;
  font-size: 1.3rem;
}

#freq, code #freq {
  font-size: 2rem;
  padding: 0.5em 1em;
  text-decoration: none;
  font-style: italic;
}

.qr {
  max-width: 200px;

}

.center {
  padding: 0px;
  text-align: center;
}

#inmemoriam {
  text-align: center;
}

@font-face {
  font-family: Redaction;
  src: url("webfonts/Redaction_50-Regular.woff2");
  font-weight: normal;
}

@font-face {
  font-family: Redaction-bold;
  src: url("webfonts/Redaction_50-Bold.woff2");
  font-weight: bold;
}

@font-face {
  font-family: Redaction-italic;
  src: url("webfonts/Redaction_50-Italic.woff2");
  font-weight: italic;
}

@font-face {
  font-family: win;
  src: url("webfonts/w95fa.woff2");
  font-weight: normal;
}

@font-face {
  font-family: space-notorious;
  src: url("webfonts/space-notorious-rounded.woff");
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  #main {
    width: 95%; 
    margin: auto;
  }
  #title {
    display: block;
    width: 95%;
    margin: auto;
    height: 3rem;
  }
  .sticker {
    width: 90%;
    margin: auto;
    margin-top: 4rem;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 2.2rem;
    text-decoration: underline;
  }
  h4 {
    font-size: 1.8rem;
  }
  h5 {
    font-size: 1.4rem;
  }
  p {
    font-size: 1.4rem;
  }
  .sticker ul {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  li {
    font-size: 1.4rem;
  }
  code, pre {
    font-size: 1.4rem;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
}

@media screen and (max-width: 620px) {
  #main {
    width: 95%; 
    margin: auto;
  }
  #title {
    display: block;
    width: 95%;
    margin: auto;
    height: 3rem;
  }
  .sticker {
    width: 85%;
    margin: auto;
    margin-top: 3rem;
  }

  #title h1 {
    font-size: 6vw;
  }

  h1 {
  }
  h2 {
    padding-left: 5vw;
    font-style: italic;
    font-size: 8vw;
  }
  h3 {
    font-size: 7vw;
    text-decoration: underline;
  }
  h4 {
    font-size: 6vw;
  }
  h5 {
    font-size: 5vw;
  }
  p, a {
    font-size: 4vw;
  }
  .sticker ul {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  li {
    font-size: 4vw;
  }
  code, pre {
    font-size: 4vw;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
  button.buttonRadio {
    position: fixed;
    top: 90vh;
    right: 80vw;
  }
  button.lien a {
    margin-top: 1em;
    font-size: 4vh;
    padding: 0.5em;
  }
}
@media print {
  #main {
    width: 100%;
    margin: 0px;
  }
  .sticker {
    width: 95%;
    max-width: none;
    border: none;
    padding: 4em;
    margin: auto;
  }
  header {
    display: none;
  }
  h1 {
    font-size: xx-large;
  }
  h2 {
    font-size: 14rem;
    font-family: win;
  }
  h3 {
    font-size: 12rem;
    font-family: win;
  }
  h4 {
    font-size: 10rem;
    font-family: win;
  }
  h5 {
    font-size: 8rem;
    font-family: win;
  }
  p, li, a, pre, code {
    font-size: 6rem;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
  code {
    background-color: black;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
  button {
    display: none;
  }
}