/* Reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  font-weight: normal;
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes up-and-fade {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Global  */
:root {
  --off-white: #fefefe;
  --cream: #f5f3ed;
  --black: #010101;
  --red-bright: #C60000;
  --red-dark: #440000;
  --red-extra-dark: #270301;
  --red-grad-dark: 81, 0, 0;
  --red-grad-light: 198, 0, 0;

  --font-serif: ivypresto-headline, serif;
  --font-sans: embarcadero-mvb-pro, sans-serif;

  --nav-height: 100px;
}

@view-transition {
  navigation: auto;
}

html {
  font-size: 16px;
  line-height: 1.3em;
  scroll-behavior: smooth;
}

body {
  font-family: 'Helvetica', sans-serif;
}

.middle {
  display: grid;
  height: 100dvh;
  place-content: center;
}

input,
select,
textarea {
  border: 1px solid lightgray;
  border-radius: 4px;
  /*font-size: 1.6rem;*/
  /*line-height: 1.2em;*/
  padding: 15px 30px;
  width: 100%;
  -webkit-appearance: none;

  &:focus {
    outline: none;
    border: 1px solid lightblue;
  }
  &[type=submit]{
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: white;
    padding: 10px 40px;
    width: auto;

    &:hover {
      background: var(--red-bright);
      cursor: pointer;
    }

    &.narrow {
      max-width: 200px;
    }
  }
}
textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 20lh
}