/* put global CSS variables here */
:root {
  /* l-colour or brand-colour */
  /* .<l-colour> { color: var(--<l-colour>); }
  .bg-<l-colour> { background-color: var(--<l-colour>); }
  .b-<l-colour> { border-color: var(--<l-colour>); }
  .hover-<l-colour>:hover { color: var(--<l-colour>); }
  .hover-bg-<l-colour>:hover { background-color: var(--<l-colour>); }
  .hover-b-<l-colour>:hover { border-color: var(--<l-colour>); } */
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #MIXINS
   ========================================================================== */
.qipsumhead {
  width: 100%;
  height: 280px;
}

.qipsumhead__title {
  max-width: 700px;
  width: 100%;
  margin: 100px auto 30px;
  text-align: center;
  color: black;
  font-family: Serif;
}

.qipsumhead h1 {
  font-size: 48px;
}

.qipsumhead h3 {
  font-size: 32px;
}

.qipsumhead p {
  font-size: 26px;
}

.control-panel {
  position: relative;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: gainsboro;
  border: 2px solid #fee000;
}

.control-panel h3 {
  font-size: 30px;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 10px;
  font-family: Serif;
}

.color-panel__quantity {
  flex: 0 0 100px;
}

.color-panel__quantity input[type=text] {
  text-align: right;
}

.color-panel__quantity input[type=text]:active {
  background-color: RGBA(115, 121, 245, 0.8);
}

.control-panel__units,
.control-panel__format {
  height: 113px;
  background-color: white;
  border: 3px solid #fee000;
  border-radius: 20px;
  border-radius: 6%/10%;
}

.control-panel__units {
  top: 50px;
  left: 225px;
  flex: 0 0 160px;
}

.control-panel__format {
  flex: 0 0 100px;
}

.control-panel label {
  position: relative;
  height: 1em;
  padding-left: 0rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 1.35rem;
  color: #000000;
  letter-spacing: 1px;
}

.control-panel .label {
  display: inline-block;
  width: 100%;
  padding: 3px 6px;
}

.control-panel input[type=radio] {
  position: absolute;
  cursor: pointer;
  height: 0;
  width: 0;
  left: -2000px;
}

.control-panel input:checked ~ .radio {
  background-color: #fee000;
  transition: background 0.3s;
}

.control-panel input:checked ~ .label {
  color: white;
  text-decoration: underline;
  background: #fee000;
  background: RGBA(115, 121, 245, 0.8);
  border-radius: 6%/20%;
  font-weight: 600;
}

.radio {
  position: absolute;
  top: 0.2rem;
  left: 9px;
  height: 1.35rem;
  width: 1.35rem;
  background: #eeeeee;
  border-radius: 50%;
  border: 1px solid black;
  opacity: 0;
}

.control-panel button {
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 200px;
  left: calc(50% - 100px);
  font-size: 1.35rem;
}

main {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='300' height='255' viewBox='0 0 170 30'%3e%3cpath d='M 25,20 C 21.134,20 18,16.866 18,13 18,9.134 21.134,6 25,6 28.866,6 32,9.134 32,13 L 32.031,14 C 32.031,21.732 25.763,28 18.031,28 V 24 C 20.702,24 23.213,22.96 25.102,21.071 25.466,20.707 25.797,20.321 26.097,19.914 25.74,19.97 25.373,20 25,20 Z M 7,20 C 3.134,20 0,16.866 0,13 0,9.134 3.134,6 7,6 10.866,6 14,9.134 14,13 L 14.031,14 C 14.031,21.732 7.763,28 0.031,28 V 24 C 2.702,24 5.213,22.96 7.102,21.071 7.466,20.707 7.797,20.321 8.097,19.914 7.74,19.97 7.373,20 7,20 Z' fill='none' stroke='rgb(140,140,140)' transform='translate(119.16643,4.4416893)' /%3e%3cpath transform='matrix(0.98799553,0,0,0.99669352,13.942644,-26.368803)' d='M 7.031,14 C 10.897,14 14.031,17.134 14.031,21 14.031,24.866 10.897,28 7.031,28 3.165,28 0.031,24.866 0.031,21 L 0,20 C 0,12.268 6.268,6 14,6 V 10 C 11.329,10 8.818,11.04 6.929,12.929 6.565,13.293 6.234,13.68 5.934,14.086 6.291,14.03 6.658,14 7.031,14 Z M 25.031,14 C 28.897,14 32.031,17.134 32.031,21 32.031,24.866 28.897,28 25.031,28 21.165,28 18.031,24.866 18.031,21 L 18,20 C 18,12.268 24.268,6 32,6 V 10 C 29.329,10 26.818,11.04 24.929,12.929 24.565,13.293 24.234,13.68 23.934,14.086 24.292,14.03 24.658,14 25.031,14 Z' fill='none' stroke='rgb(140,140,140)' /%3e%3c/svg%3e"), linear-gradient(135deg, #22e, #252);
  background-repeat: repeat, repeat;
}

.paper {
  max-width: 750px;
  width: 100%;
  background-color: white;
  border-radius: 5px/5px;
  margin: 60px auto;
  padding: 40px;
  opacity: 0;
}

.clipboard {
  position: relative;
  height: 40px;
  opacity: 0;
}

.clipboard button {
  position: absolute;
  right: 220px;
  top: 60px;
  text-align: right;
}

.isvisible {
  opacity: 1;
}

.dd {
  opacity: 1;
}

@media screen and (max-width: 750px) {
  .qipsumhead {
    height: auto;
  }
}