/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
  /* Change default typefaces here */
  font-family: "Source Serif 4", serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Copy & Lists */
p {
  line-height: 1.5rem;
}
ul,
ol {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
ul li,
ol li {
  line-height: 1.5rem;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
blockquote {
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  padding-top: 0.5em;
  line-height: 1.5rem;
}
h1 {
  font-size: 4.242rem;
  line-height: 4.5rem;
}
h2 {
  font-size: 2.828rem;
  line-height: 3rem;
}
h3 {
  font-size: 1.414rem;
}
h4 {
  font-size: 0.707rem;
}
h5 {
  font-size: 0.4713333333333333rem;
}
h6 {
  font-size: 0.3535rem;
}
/* Tables */
table {
  margin-top: 1.5rem;
  border-spacing: 0px;
  border-collapse: collapse;
}
table td,
table th {
  padding: 0.5em 1em;
  line-height: 33px;
}
/* Code blocks */
code {
  vertical-align: bottom;
}
/* Leading paragraph text */
.lead {
  font-size: 1.414rem;
}
/* Hug the block above you */
.hug {
  margin-top: 0;
}

tr:hover, 
tr:focus {
  background-color: #F1F1F1;
}

/* Palette URL: http://paletton.com/#uid=557050kllll++2Jw0c2aGuE00SQ */

.color-primary-0 { color: #852C64 }
.color-primary-1 { color: #11000B }
.color-primary-2 { color: #4B002F }
.color-primary-3 { color: #BE7FA7 }
.color-primary-4 { color: #F1F1F1 }

.color-secondary-1-0 { color: #8B2E5F }
.color-secondary-1-1 { color: #120009 }
.color-secondary-1-2 { color: #4E0029 }
.color-secondary-1-3 { color: #C785A8 }
.color-secondary-1-4 { color: #F3F3F3 }

.color-secondary-2-0 { color: #7D2A69 }
.color-secondary-2-1 { color: #10000C }
.color-secondary-2-2 { color: #470035 }
.color-secondary-2-3 { color: #B478A5 }
.color-secondary-2-4 { color: #EEEEEE }



/* As RGBa codes */

.rgba-primary-0 { color: rgba(133, 44,100,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba( 17,  0, 11,1) }
.rgba-primary-2 { color: rgba( 75,  0, 47,1) }
.rgba-primary-3 { color: rgba(190,127,167,1) }
.rgba-primary-4 { color: rgba(241,241,241,1) }

.rgba-secondary-1-0 { color: rgba(139, 46, 95,1) }	/* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba( 18,  0,  9,1) }
.rgba-secondary-1-2 { color: rgba( 78,  0, 41,1) }
.rgba-secondary-1-3 { color: rgba(199,133,168,1) }
.rgba-secondary-1-4 { color: rgba(243,243,243,1) }

.rgba-secondary-2-0 { color: rgba(125, 42,105,1) }	/* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba( 16,  0, 12,1) }
.rgba-secondary-2-2 { color: rgba( 71,  0, 53,1) }
.rgba-secondary-2-3 { color: rgba(180,120,165,1) }
.rgba-secondary-2-4 { color: rgba(238,238,238,1) }

.full-page {
  /* Take full size */
  width: 100%;
}

a, a:visited, a:focus {
  color: rgb(199,133,168);
  text-decoration: none;
}

ul {
  list-style: none;
}

ul li::before {
  content: "✓ "; 
  color: rgb(190,127,167);
}

.logo {
    max-width: 3em;
    height: auto;
}

.vertical-lines {    
    /* Background */
    background-color: rgba(255,255,255,1);
    opacity: 1;
    background-image: linear-gradient(to right, rgb(255, 233, 246), rgb(255, 233, 246) 5px, rgba(255,255,255,1) 5px, rgba(255,255,255,1) );
    background-size: 10px 100%;
}

.flowers {
    --s: 1em; /* control the size */
    
    --_g: #0000 83%,rgb(255, 255, 255) 85% 99%,#0000 101%;
    background:
      radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
      radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
      radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
      radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
      rgb(255, 233, 246);
    background-size: calc(2*var(--s)) calc(2*var(--s));
  }

  .beans {
    background-color: rgb(255, 250, 253);
  }

  .bricks {
    --s: 2em; /* control the size */
    --c: #fff; /* first color */
    
    --_g: #0000 8%,var(--c) 0 17%,#0000 0 58%;
    background: 
      linear-gradient(135deg,#0000 20.5%,var(--c) 0 29.5%,#0000 0) 0 calc(var(--s)/4),
      linear-gradient( 45deg,var(--_g)) calc(var(--s)/2) 0,
      linear-gradient(135deg,var(--_g),var(--c) 0 67%,#0000 0),        
      linear-gradient( 45deg,var(--_g),var(--c) 0 67%,#0000 0 83%,var(--c) 0 92%,#0000 0),
      rgb(255, 233, 246); /* second color */
    background-size: var(--s) var(--s);
  }

  html, body, main, section {
    margin: 0px;
    padding: 0px;
  }

  section {
    color: #852C64;
    width: 100%;
    margin: 0;
  }

  @media(min-width: 30em) {
    p,h1,h2,h3,h4,h5,h6,ul,ol,table {
      max-width: 60em;
    }
    section {
      padding: 4em 4em 0;
    }
    .wrapper {
      display: inline-block;
      width: 100%;
      margin: 0;
      border-radius: 2em;
      padding: 4em 5em;
    }
  }

  @media(max-width: 30em) {
    p,h1,h2,h3,h4,h5,h6,ul,ol,table {
      padding-left: 10px;
      padding-right: 10px;
    }
    .wrapper {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }