*,
*::before,
*::after {
  box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.67;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  display: block;
}

/*
article > * + * {
  margin-top: 1em;
}
*/

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- */

body {
  margin: 0 5vw;
  font-family: 'Proza Libre', sans-serif;
  background: #fff;
  color: darkslategray;
}

::selection {
  color: darkseagreen;
}

a::selection {
  color: thistle;
}

a {
  text-decoration: none;
  color: darkslateblue;
}

a:hover, a:focus {
  color: thistle;
}

a:active {
  color: deeppink;
}

/*
blueviolet
plum
*/

nav {
  min-height: 3em;
  height: 5vw;
  margin: env(safe-area-inset-top) auto 0;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 50%;
  min-width: 320px;
}

header, section {
  display: grid;
  grid-gap: 5vw;
  height: calc(100vh - 10vw - env(safe-area-inset-bottom));
  min-height: fit-content;
  margin-bottom: calc(5vw + env(safe-area-inset-bottom));
}

@media screen and (orientation:portrait) {
  header {
    grid-template-rows: 2fr 1fr;
  }
}

@media screen and (orientation:landscape) {
  header {
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }
}

header figure, section figure {
  background: rosybrown;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

header figure img, section figure img {
  width: 100%;
}

header span {
  margin: 0 auto;
}

@media screen and (orientation:portrait) {
  figure {
    grid-row: 1;
  }
}

@media screen and (orientation:landscape) {
  section:nth-child(odd) {
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }
  section:nth-child(even) {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

section a, section a:visited {

	text-shadow: .03em 0 #fff, -.03em 0 #fff, 0 .03em #fff, 0 -.03em #fff, .06em 0 #fff, -.06em 0 #fff, 0 .06em #fff, 0 -.06em #fff, .09em 0 #fff, -.09em 0 #fff, 0 .09em #fff, 0 -.09em #fff, .12em 0 #fff, -.12em 0 #fff, .15em 0 #fff, -.15em 0 #fff;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(darkslateblue, darkslateblue);
  background-size: .05em 1.5px, .05em 1.5px, 1px 1.5px;
	-background-color: #f90;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 87%, 100% 87%, 0% 87%;

      &:before, &:after, *, *:before, *:after {
        text-shadow: none;
      }
}

section a:hover, section a:focus {
	text-shadow: .03em 0 #fff, -.03em 0 #fff, 0 .03em #fff, 0 -.03em #fff, .06em 0 #fff, -.06em 0 #fff, 0 .06em #fff, 0 -.06em #fff, .09em 0 #fff, -.09em 0 #fff, .12em 0 #fff, -.12em 0 #fff, .15em 0 #fff, -.15em 0 #fff;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(thistle, thistle);
  background-size: .05em 1.5px, .05em 1.5px, 1px 1.5px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 87%, 100% 87%, 0% 87%;

  &:before, &:after, *, *:before, *:after {
  	text-shadow: none;
  }
}

section a:active {
	text-shadow: .03em 0 #fff, -.03em 0 #fff, 0 .03em #fff, 0 -.03em #fff, .06em 0 #fff, -.06em 0 #fff, 0 .06em #fff, 0 -.06em #fff, .09em 0 #fff, -.09em 0 #fff, .12em 0 #fff, -.12em 0 #fff, .15em 0 #fff, -.15em 0 #fff;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(deeppink, deeppink);
  background-size: .05em 1.5px, .05em 1.5px, 1px 1.5px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 87%, 100% 87%, 0% 87%;

  &:before, &:after, *, *:before, *:after {
  	text-shadow: none;
  }
}

article {
  margin: 0 auto;
}

main > article {
  max-width: 44em;
  min-height: calc(100vh - 10vw - env(safe-area-inset-bottom));
  margin-bottom: calc(5vw + env(safe-area-inset-bottom));
}

footer {
  margin-bottom: calc(5vw + env(safe-area-inset-bottom));
  margin-top: 6em;
  -font-size: calc(10vw / 32 + 12px);
  -line-height: 1.4;
  display: grid;
  grid-gap: 5vw;
}

@media screen and (orientation:portrait) {
  footer {
    grid-template-rows: 1;
  }
}

@media screen and (orientation:landscape) {
  footer {
    grid-template-columns: 1fr 2fr;
  }
}

footer div:first-child {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

footer aside {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 23.375em;
  margin-bottom: 3em;
  line-height: 1.5;
  flex-wrap: wrap;
}

footer aside p {
  margin-bottom: .5em;
}

footer aside figure {
  white-space: nowrap;
}

footer aside a, footer aside figure {
  margin-right: 1em;
}

footer figure a {
 display: inline-block;
 font-size: 0;
 position: relative;
 z-index: 10;
}

footer figure img, footer figure svg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid white;
  margin: 0 4px 0 -4px;
}

footer span {
  margin-bottom: 3em;
  max-width: 23.375em;
}

footer figure a.under {
  margin-left: -20px;
  z-index: 1;
}

footer em {
  color: darkslateblue;
  font-size: 0.9375em;
  width: 100%;
  max-width: 24.93333em;
}

footer em::selection, footer strong::selection, footer span::selection {
  color: thistle;
}

svg:hover, svg:focus {
  fill: thistle;
}

svg:active {
  fill: deeppink;
}

h1 {
  font-family: 'Caudex', serif;
  font-size: 2.125em;
  line-height: 1.25;
  margin-bottom: 1em;
}

header h1 {
  line-height: 1.33;
}

h2 {
  font-size: 1.0625em;
  font-weight: 700;
  margin: 0 auto 1em;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .04em;
  display: block;
}

summary {
  font-size: 1.375em;
  margin-bottom: 1em;
  text-align: center;
}


article h1 {
  margin: 2em auto 1em;
}

summary + h1 {
  margin: 0 auto 1em;
}

h3 {
  font-size: 1.0625em;
  font-weight: 500;
}

p {
  font-size: 1.0625em;
  margin-bottom: 1em;
}

/*
header p {
  font-size: 1.25em;
  margin-bottom: 1em;
}
*/

header p, footer p, h2 + p, h3 + p {
  max-width: 22em;
}

h3 + p {
  margin-bottom: 1.5em;
}

b, strong {
  font-weight: 500;
}

small, small p {
  font-size: 0.8125rem;
  margin-bottom: 1em;
  display: block;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
    opacity: .75;
}

blockquote {
  opacity: .75;
  margin-top: 4em;
  max-width: 28em;
}

form {
  margin: 1em 0 2em;
}

header form {
  margin: 2em 0;
}

input[type=email] {
  border: 1.5px solid darkseagreen;
  margin: 0;
  outline: 0;
  color: darkslategray;
  padding: .25em 1em;
  border-radius: .5em 0 0 .5em;
  float: left;
  width: 60%;
}

input::placeholder {
  color: darkslategray;
  opacity: .5;
}

input[type=submit]:hover ~ input::placeholder {
  color: darkslateblue;
  opacity: .5;
}

input[type=submit] {
  border: 1.5px solid darkseagreen;
  margin: 0;
  padding: .25em 1em;
  background: darkseagreen;
  color: darkslategray;
  border-radius: 0 .5em .5em 0;
}

input[type=submit]:hover, input[type=submit]:focus {
  background: thistle;
  color: darkslateblue;
  border: 1.5px solid thistle;
}

input[type=submit]:hover ~ input[type=email], input[type=submit]:focus ~ input[type=email] {
  color: darkslateblue;
  border: 1.5px solid thistle;
}

input[type=submit]:active {
  border: 1.5px solid deeppink;
  background: deeppink;
  color: #fff;
}

input[type=submit]:active ~ input[type=email] {
  border: 1.5px solid deeppink;
  color: #fff;
}

textarea:focus, input:focus{
    outline: none;
}

.yellow {
  width: 100px;
  height: 80px;
  background: yellow;
}

.turquoise {
  width: 100px;
  height: 80px;
  background: paleturquoise;
}