:root {
   --Dark-Blue: hsl(209, 23%, 22%);
   --Very-Dark-mode: hsl(207, 26%, 17%);
   --Very-Dark-Blue: hsl(200, 15%, 8%);
   --Dark-Gray: hsl(0, 0%, 52%);
   --Very-Light-Gray: hsl(0, 0%, 98%);
   --White: hsl(0, 0%, 100%);

   --pry-padding: 2em;
   --pry-radius: 3px;
   --margin-bottom: 2rem;

   --debugger: 1px solid yellow;
}

:root.light-mode {
   --Dark-Blue: hsl(0, 0%, 100%);
   --Very-Dark-mode: hsl(0, 0%, 98%);
   --White: hsl(200, 15%, 8%);
   --Very-Light-Gray: hsl(200, 15%, 8%);
}

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

body {
   font-family: "nunito sans", sans-serif;
   font-size: 12px;
   color: var(--White);
}

img {
   max-width: 100%; 
}

input,
select {
   appearance: none;
   -webkit-appearance: none;
   font-family: inherit;
   background-color: var(--Dark-Blue);
   color: var(--Very-Light-Gray);
   border: none;
   border-radius: var(--pry-radius);
   padding: 0.8em 0.8em 0.8em 4em;
}

input:not(.banner > input) {
   width: 100%;
}

select {
   width: 100%;
   padding: 0.8em 1.6em;
   margin: 0;
}

select > option {
   appearance: none;
   -webkit-appearance: none;
}

.container {
   background-color: var(--Very-Dark-mode);
}


/* Header Styles */

.banner {
   background-color: var(--Dark-Blue);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--pry-padding);
   font-size: 8px;
}

.banner > label {
   font-size: 14px;
   cursor: pointer;
   position: relative;
}

.banner > label > input {
   display: none;
}

.banner > label > i {
   position: absolute;
   left: -20px;
   top: 50%;
   transform: translateY(-50%);
}


/* Main Styles */

main {
   min-height: 100vh;
   padding: var(--pry-padding);
}

main > .get-country > .ctry-wrapper {
   position: relative;
   width: 100%;
   margin-bottom: var(--margin-bottom);
}

main > .get-country > .ctry-wrapper > i{
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   font-size: 18px;
   padding-left: 1em;
   pointer-events: none;
}

main > .get-country > .select-wrapper {
   position: relative;
   width: 60%;
   margin-bottom: var(--margin-bottom);
}

main > .get-country > .select-wrapper::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 1em;
   width: 10px;
   height: 10px;
   transform: translateY(-50%);
   background-color: var(--White);
   clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
   pointer-events: none;
}

main > .display {
   background-color: var(--Very-Dark-mode);
   padding: 0 var(--pry-padding);
}

main > .display > .display-wrapper {
   margin-bottom: var(--margin-bottom);
   background-color: var(--Dark-Blue);
   padding: 0 2em 2em 2em;
   border-radius: var(--pry-radius);
   overflow: hidden;
}

main > .display > .display-wrapper > .flag-container {
   margin: 0 -2em;
}

main > .display > .display-wrapper > .display-list h1 {
   padding: 1em 0;
}

main > .display > .display-wrapper > .display-list .title {
   display: inline-block;
   font-weight: 700;
   margin: 0 4px 4px 0;
}



/* Media Queries */
@media (min-width: 558px) and (max-width: 849px) {
   main > .get-country {
      display: flex;
      justify-content: space-between;
      padding: 0 var(--pry-padding);
   }

   main .get-country > .ctry-wrapper {
      width: 200px;
   }

   main > .get-country > .select-wrapper {
      width: 150px;
   }

   main > .display {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
   }
}

@media only screen and (min-width: 850px) {
   .banner {
      padding: 2em 6em;
   }

   main > .get-country {
      display: flex;
      justify-content: space-between;
      padding: 0 var(--pry-padding);
   }

   main .get-country > .ctry-wrapper {
      width: 300px;
   }

   main > .get-country > .select-wrapper {
      width: 150px;
   }

   main > .display {
      min-height: 350px;
      display: grid;
      gap: 50px;
      grid-template-columns: repeat(3, 1fr);
   }

}

@media (min-width: 1180px) {
   main > .display {
      grid-template-columns: repeat(4, 1fr);
   }
}