@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;700&display=swap");
:root {
  --clr-primary: #1d1d1d;
  --clr-accent: #fff;
  --clr-darkGrey: #353434;
  --clr-lightGrey: #757575;
  --clr-blue: #0c71e0;

  --ff-primary: "Figtree", sans-serif;
}

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

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
    font-family: var(--ff-primary);

}

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

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

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

/*General styling*/
body {
  font-family: var(--ff-primary);
    background-color: #0077b6;
}

.country {
  --max-width: 800px;
  --padding: 1rem;

  height: min(fit-content, 90vh);
  width: min(var(--max-width), 100% - (var(--padding)) * 2);
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 2rem;
  background-color: floralwhite;
  box-shadow: 0.5rem 0.5rem 1rem var(--clr-darkGrey);
  scroll-behavior: smooth;
}
.country__search {
  /* max-width: 800px; */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 1rem auto;
  background-color: transparent;
}
.search-input {
  max-width: 300px;
  border: 0;
  border-bottom: 2px solid orange;
  color: #353434;
  background-color: floralwhite;
}
.search-btn {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 100vmax;
  border: 0;
  background-color: orange;
  color: floralwhite;
}
@media (min-width: 50em) {
  .search-btn {
    padding: 1rem 2.25rem;
  }
}
.flag-conutry-wrapper {
  text-align: center;
}
.country__flag {
  max-width: 200px;
  margin: 0 auto;
  border: 1px solid var(--clr-primary);
  border-radius: 5px;
}
.country__name {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.5rem 0;
}
.country__info {
  padding: 1rem;
  font-size: 1rem;
  line-height: 2;
}
@media (min-width: 50em) {
  .country__flag {
    max-width: 350px;
    margin: 0 auto;
  }
  .country__name {
    font-size: 2rem;
  }
  .country__info {
    padding: 2rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }
}
.bold {
  font-weight: bold;
}
/* opacity ZERO */
.countryInfo {
  opacity: 0;
}
.error {
  text-align: center;
  color: red;
  font-size: 1rem;
  font-style: italic;
}