/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */
/* FONTS */

@font-face {
  font-family: 'Roboto Flex';
  src: url(robotoflex-variablefont_grad-xtra-yopq-ytas-ytde-ytfi-ytlc-ytuc-opsz-slnt-wdth-wght.ttf);
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */
/* ROOT */

:root {
  --brown: #583F2F;
  --pink: #FFA5A6;
  --orange: #FFBA52;
  --grey: #947979;

	--bg: var(--brown);
	--button: var(--pink);
	--text: var(--brown);
	--highlight: var(--orange);
	--highlightSelection: var(--orange);

  --transShort: 0.25s;
  --transLong: 0.5s;
  --vh: 100vh;

  --scale: 2.25px;
  --p: calc(var(--scale) * 8);

  --gap: calc(var(--scale) * 1.8);
  --gapHalf: calc(var(--gap) * 0.5);
}

@media (max-width: 1600px) { :root { --scale: 2px; }}
@media (max-width: 1000px) { :root { --scale: 1.8px; }}
@media (max-width: 500px)  { :root { --scale: 1.5px; }}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */
/* BASE */

*::selection { background-color: var(--highlightSelection); }

html { overflow-x: hidden; }

body {
	background-color: var(--bg);
  height: var(--vh); 
  display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
  gap: var(--gap);
}

body div {
  display: flex;
  flex-direction: row;
  gap: inherit;
}

a, p {
  font-family: 'Roboto Flex', Helvetica, sans-serif;
  font-variation-settings: 'grad' -38, 'wdth' 113, 'wght' 866, 'slnt' 0, 'opsz' 14, 'XOPQ' 96, 'YOPQ' 90, 'XTRA' 456, 'YTUC' 688, 'YTLC' 530, 'YTAS' 731, 'YTDE' -215, 'YTFI' 738;

  font-size: var(--p);
  letter-spacing: -0.03em;
  line-height: 1.05em;

  color: var(--text);
  background-color: var(--button);

  display: inline-block;
  padding: 0.25em 0.5em 0.2em;
  border-radius: 0.4em;

  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

a {
  text-decoration: none; 
  cursor: pointer;
	transition: var(--transShort);
}

@media (hover: hover) {
  a:hover {
    background-color: var(--highlight);
  }
}