:root {
  --pico-spacing: 0.5rem;
  --pico-border-radius: 0.5rem;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  --pico-form-element-spacing-horizontal-small: 0.25rem;
  --pico-font-size-small: 0.875rem;
  --header-icon-size: 4rem;
}

body { height: 100dvh; background-color: transparent; }
p, h2, h3, h4, h5, h6, section, button { margin: 0!important; }
h1 { font-size: 2rem; }
h4 { font-size: 1rem; }
hr { margin: var(--pico-spacing) 0 }

code { white-space: pre-line; }

article {
  box-shadow: none;
  border: 1px solid var(--pico-accordion-border-color);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

body > ul {
  display: none;
}

body > main{
  width: 40%;
  height: calc(100% - 2rem);
  border: 1px solid var(--pico-accordion-border-color);
  border-radius: 0.5rem;
}

main { 
  position: relative;
  padding: var(--pico-block-spacing-vertical);
  flex-direction: column;
  overflow: hidden;
  display: flex;
  height: 100%;
}

main > section {
  position: relative;
  overflow-y: scroll;
  flex: 1;
}

main > figure {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

form > section {
  overflow-y: scroll;
  flex: 1;
}

blockquote {
  padding: 0 0 0 var(--pico-spacing);
  margin: 0;
}

blockquote > h4 {
  margin-bottom: var(--pico-nav-element-spacing-horizontal)!important;
}

iframe {
  background-color: #BEBEBE;
  width: 100%;
  height: 100%;
}

aside {
  display: -webkit-inline-box;
  width: 100%;
  overflow-x: scroll;
}

aside > p {
  margin-right: var(--pico-form-element-spacing-horizontal)!important;
  float: left;
}

span > span {
  margin: 0 var(--pico-nav-element-spacing-horizontal);
}

/* Utility Classes */

.danger {
  color: var(--pico-del-color);
}

/* Custom Classes */

select {
  height: 50px;
}

/* Header */
header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

header > article {
  margin-right: var(--pico-block-spacing-vertical);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  display: flex;
  height: var(--header-icon-size);
  width: var(--header-icon-size);
}

header > section {
  flex: 1;
}

/* Footer */
footer > button {
  width: 100%;
  margin-bottom: 0!important;
}

/* Dialog */
dialog > article > header {
  display: flex;
}

dialog > article > header > strong {
  flex: 1;
}

dialog > article > header > a {
  text-decoration: none;
}

/* Nav */
nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > select {
  padding: 0 0 0 0.5rem;
  width: 3.5rem;
  height: 2rem;
  margin: 0;
}

nav > a {
  text-decoration: none;
  width: 3.5rem;
}

nav > a > h2 {
  color: var(--pico-primary)!important;
}

/* Product Group */
.product-group > summary {
  display: none;
}

/* Product */
.product {
  align-items: center;
  display: flex;
}

.product > section:first-child {
  flex: 1;
  margin-right: var(--pico-spacing)!important;
}

.product > section:last-child {
  display: flex;
  align-items: center;
}

.product > section:last-child > button {
  width: 3rem;
  height: 3rem;
}

.product > section:last-child > h2 {
  width: 2.5rem;
  text-align: center;
}

/* Inputs */

.input-wrapper {
  margin-bottom: var(--pico-block-spacing-vertical);
}

.input-wrapper > form {
  margin-bottom: 0.125rem;
  flex-direction: row;
  display: flex;
  padding: 0;
}

/* Utilities */
.spinner {
  transform: translate(-50%, -50%);
  background-color: #00000055;
  width: 100%; height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
}

.spinner > h4 {
  color: #F0F0F0;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Mobile fixes */

@media only screen and (max-width: 1024px) {
  body > main,form {
    width: 75%;
    height: 100%
  }
}

@media only screen and (max-width: 768px) {
  body > main,form {
    width: 100%;
    height: 100%
  }
}