/******************************************************************************
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 */
:root {
  --color-bg: #99b5b1;
  --color-text-main: #E1C54A;
  --color-primary: #F0F0FA;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-max-height: 300px;
  --font-family: "Hanken Grotesk", sans-serif;
  --font-family-header: "Hanken Grotesk", sans-serif;
}

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

/* Import fonts */
/* @font-face {
  font-family: 'Hanken Grotesk', sans-serif;
}
@font-face {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: bold;
} */

/* Our remix on glitch button */
/* .btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
} */

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

.footer a {
  color: var(--color-text-main);
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: var(--font-family);
  color: var(--color-primary);
  background-color: var(--color-bg);
  text-align:justify;
}

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

}
.content {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.big {
  font-size: 1.25rem;
}

/* Very light scaling for our illustration */
.illo-container {
  display: flex;
justify-content:center;
  
}
.illustration {
 
  /* width: 75%; */
  max-width: 300px;
  max-height: 300px;
  margin: 0 auto;
  
  -moz-box-shadow: 5px 10px 10px #b3b096;
  -webkit-box-shadow: 5px 10px 10px  #b3b096;
  box-shadow: 5px 10px 10px #b3b096;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  border-radius:15px;
  
  border: 1px black solid;
}





/* Styles for our custom color form and its results */
.color-info {

}
.color-search {
  margin-top: 3rem;
}
.color-form {
  display:flex;
  flex-direction:column;
  flex-flow:center;
  

  width: 90%;
  max-width: 500px;
  margin-top:2vh;

}
.color-form a:not(.btn--remix) {
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 8px;
  
}


/*form*/
.color-form button {
  margin-top: 8px;
}
.color-form button:hover {
  cursor: pointer;
  box-shadow: 0px 0px 30px #C23D72;
}

form {
  margin: 0.75rem 0;
  text-align:center;
}
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 1px;
  padding: 0.05rem 0.1rem;
}

input:hover{
   box-shadow: 0px 0px 30px #C23D72;
}

label {
  color: #000000;
  font-weight: bold;
}

/* Title h1 style */
.title {
  color: var(--color-primary);
  font-family: var(--font-family-header);
  font-style: normal;
  font-weight: bold;
  font-size: 10vw;
  
  line-height: 110%;
  margin: 2rem 0 0;
  text-transform:uppercase;
  text-align:center;
  
}
@media screen and (min-width: 1000px) {
  .title {
     font-size: 70px;
  }
}
.texturizer{
  margin-top:30px;
  margin-bottom:20px;

}


/* Visualisation styles */
#seq,
.vis-window {
  width: 80%;
  margin: 0 auto;
  border: 5px solid #f0f0f5;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
}
/* .vis {
  width: 50px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  background-color: red;
} */

/* Visualisation buttons */
.vis-system-controls {
  position: absolute;
  right: 32px;
  display: grid;
  column-gap: 5px;
  top: 16px;
  grid-template-columns:repeat(2, 32px)
}

.vis-nav-controls-container {
  bottom: 16px;
  grid-template-columns: [colStart] 32px [col1] 32px [col2] 32px [colend];
  grid-template-rows: [rowStart] 32px [row1] 32px [row1Spacer] 10px [row2] 32px [row3] 32px [row4] 32px [row5];
  row-gap: 5px;
}

.vis-control {
  background: #ffffff;
  border-radius: 4px;
  height: 32px;
  width: 32px;
  padding: 5px;
  margin: 0;
}

.vis-control--animation-play-active .icon-svg--play {
  display: block; /* Show play when play active */
}

.vis-control--animation-play-active .icon-svg--pause {
  display: none; /* Hide pause when play active */
}

.vis-control--animation-pause-active .icon-svg--pause {
  display: block; /* Show pause when pause active */
}

.vis-control--animation-pause-active .icon-svg--play {
  display: none; /* Hide play when pause active */
}

.vis-control--zoomIn {
  grid-column: col1;
  grid-row: rowStart;
}
.vis-control--zoomOut {
  grid-column: col1;
  grid-row: row1;
}
.vis-control--panUp {
  grid-column: col1;
  grid-row: row2;
}
.vis-control--panLeft {
  grid-column: colStart;
  grid-row: row3;
}
.vis-control--panRight {
  grid-column: col2;
  grid-row: row3;
}
.vis-control--reset {
  grid-column: col1;
  grid-row: row3;
}
.vis-control--panDown {
  grid-column: col1;
  grid-row: row4;
}
.vis-control--rotClockwise {
  grid-column: colStart;
  grid-row: row2;
}
.vis-control--rotAntiClockwise {
  grid-column: col2;
  grid-row: row2;
}

.vis-control .icon-svg {
  height: 100%;
  width: 100%;
}

#uploadDropZone {
  width: 80%;
  margin: 0 auto;
  border: 5px solid #f0f0f5;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
}

#uploadDropZone input {
  position: relative;
  width: 100%;
  height: 100px;
  opacity: 0;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.container {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Accessibility styles */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}


table {
  font-family: var(--font-family);
  border-collapse: collapse;
  width: 80%;
  margin: 0 auto;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th{
  background-color: var(--color-text-main);
}

/* tr:nth-child(odd){
  background-color: var(--color-text-main);
} */

/* tr:nth-child(even) {
  background-color: var(--color-primary);
} */

audio {
  margin: 0 auto;
}