/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* Baseline for default links */
a:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

:focus-visible {
  --outline-size: max(2px, 0.15em);

  outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
  outline-offset: var(--outline-offset, var(--outline-size));
}

/* Scroll padding allowance above anchor links */
:target {
  scroll-padding-block-start: 2rem;
}

/* Scroll padding allowance below focused elements
  to ensure they are clearly in view */
:focus {
  scroll-padding-block-end: 8vh;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

      :root {
  --font-family-body: sans-serif;
  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, courier, monospace;
}


/* Theme colours */
:root {
  /* Brand colours */
  --color-brand: orange;
  --color-accent: lime;


  --background-color: rgb(245,243,239);

  --text-color: rgb(8,8,8);
  --text-color-link: lime;
  --text-color-link-active: lime;
  --text-color-link-visited: lime;
}





html,
body {
  font-family: var(--font-family-monospace);
  background-color: var(--background-color);
  color: var(--text-color);
}

main {
  display: grid;
  place-content: center;

  height: 100vh;

  align-items: center;
  justify-items: center;
}

section.monstercard {
  width: 9rem;
  padding: 2.5rem 0.75rem;

  border-width: 0.5rem;
  border-color: var(--background-color);
  border-style: double;

  background-color: rgb(8,8,8);
  border-radius: 1rem;

  color: var(--background-color);
}
.logo {
  fill: var(--background-color);
}

.country {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  position: absolute;
  width: 40rem;
  background-color: rgb(233, 155, 143);
  bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.5rem;
}