/* styles.css */

/* Reset
-------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
  background-color: transparent;
  border: none;
}

/* Variables
-------------------------------------------- */

:root {
  --background-col: #F7F7F7;
  --mark-col: #FFF2A8;
  --outline-col: #FF851B;

  --text-col: #111111;
  --secondary-txt-col: #BDBDBD;
  --border-col: #DDDDDD;
  
  --font-weight-default: 400;
  --font-weight-bold: 600;
  --font-large: 20px;
  --font-default: 15px;
  --font-small: 14px;
}

/* Typography Elements
-------------------------------------------- */

h1 {
  font-size: 6rem;
  letter-spacing: 0.03em;
}

h2 {
  letter-spacing: 0.02em;
}

h3 {
  letter-spacing: 0.01em;
  margin: 0.5em 0;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

p {
  margin: 1em 0;
  font-weight: var(--font-default);
}

* {
  outline-color: var(--outline-col);
}

*::selection {
  background: var(--mark-col);
}

small {
  font-size: var(--font-small);
  color: #b0b0b0;
}

a {
  color: var(--link-col);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

hr {
  margin: 1em 0.5em;
  border: none;
  border-top: 1px solid var(--border-col);
}

body {
  background-color: #fffcf5;
  font-family: 'Inter', sans-serif;
  font-size: var(--font-default);
  font-weight: var(--font-weight-default);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

html, body {
  height: 100%;
  margin: 0;
}

.centre {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12rem;
}

.centre h1 {
  background: linear-gradient(to right, #3D9970, #3D9970, #001f3f, #85144b, #FF851B, #FF851B);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  user-select: none;
}

/* Small screen sizes */
@media (max-width:600px) {
  h1 {
    font-size: 3rem;
    letter-spacing: 0.02em;
  }
}