/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */

:root {
  --color-bg: #3A7D8C;
  /* --color-bg: #101010; */
  --color-text-main: #ffffff;
  --color-primary: #81A69B;
  --color-accent: #F2DBAE;
  --color-accent-darker: #D9BD9C;
  --grid-color: #323441;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: 'Open Sans', sans-serif;
  --font-family-header: 'Open Sans', sans-serif;
}

/* Color Theme Swatches in Hex */
.Vintage-filter-1-hex { color: #3A7D8C; }
.Vintage-filter-2-hex { color: #5A8C8C; }
.Vintage-filter-3-hex { color: #81A69B; }
.Vintage-filter-4-hex { color: #F2DBAE; }
.Vintage-filter-5-hex { color: #D9BD9C; }

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid var(--grid-color);
}

.pattern-btn-active {
	/*  */
	background-color: #648FFF;
	color: var(--color-text-main);
}

.sequencer, .pattern-transition-matrix {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.sequencer-lane {
	border-top: 1px solid var(--grid-color);
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
  	align-items: center;
}

.grid-pad-20 { background-color: #648FFF; }
.grid-pad-40 { background-color: #5A8C8C; }
.grid-pad-60 { background-color: #FFB000; }
.grid-pad-80 { background-color: #FE6100; }
.grid-pad-100 { background-color: #DC267F; }

.lane-item {
	flex-basis: 60px;
	flex-grow: 0;
	flex-shrink: 0;
	height: 14px;
	font-size: 12px;
	padding: 2px 0 2px 0;
	text-align: center;
	border-left: 1px solid var(--grid-color);
}
.lane-item:last-child {
	border-right: 1px solid var(--grid-color);
}

.lane-black {
	background-color: var(--grid-color);
	color: var(--color-accent);
}

.lane-white {
	color: var(--grid-color);
	background-color: var(--color-accent);
}
.grid-label-broad, .grid-name {
	/* */
	flex-grow: 2;
	flex-basis: 120px;
}
.grid-guide {
	border-left: 1px solid #FE6100;
}
.grid-pad {
	cursor: pointer;
}

.grid-label {
	border: none;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: var(--color-accent);
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}

body {
  font-family: var(--font-family);
  color: var(--color-text-main);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 8px),
    radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 8px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 1px, transparent 3px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}

.content {
  display: flex;
  margin: 25px auto;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  max-width: 1080px;
  border: 1px solid var(--grid-color)
}

p,
label {
  font-size: 1.25rem;
}

/* Title h1 style */
h1 {
  color: var(--color-accent);
  font-family: var(--font-family);
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 2rem 0 0;
}

/* Very light scaling for our illustration */
.illo-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-width: 100%;
  max-height: 150px;
  margin-top: 1rem;
}

/* Styles for our poll form and its results */
.poll-form,
.poll-results {
  background-color: var(--color-bg);
  padding: 0 16px 16px 16px;
  border-radius: 8px;
  border: solid 1px var(--color-accent);}
.poll-form button:hover {
  cursor: pointer;
  box-shadow: -8px 4px 20px var(--color-primary);
}
button,
input {
  font-family: inherit;
  font-size: 12px;
  background: var(--color-bg);
  border: 1px solid var(--grid-color);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  color: var(--color-text-main);
}
button {
  cursor: pointer;
}
label {
  color: var(--color-accent);
  font-weight: bold;
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}
.instructions p {
  font-size: 1rem;
}
h2 {
  color: var(--color-accent);
}

/* Admin page */
table {
  text-align: left;
  border-collapse: collapse;
  background-color: var(--color-bg);
}
td,
th {
  border: 2px solid var(--color-accent);
  padding: 0.5rem;
}
p a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-accent);
}
p.error,
p.error a:link,
p.error a:visited {
  color: var(--color-accent-darker);
}
.results {
  padding-top:10px;
}