html{box-sizing:border-box;line-height:1.5}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeLegibility}*{margin:0;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul{list-style:none}input,textarea,select,button{color:inherit;font:inherit;letter-spacing:inherit}input[type=text],textarea{width:100%}input,textarea,button{border:1px solid gray}input[type=password]{font-family:Verdana;letter-spacing:.125em}button{padding:.75em 1em;line-height:inherit;border-radius:0;background-color:transparent}button *{pointer-events:none}img,picture,video,iframe,canvas,object,embed,svg{display:block;max-width:100%}table{table-layout:fixed;width:100%}[hidden]{opacity:0;visibility:hidden}noscript{display:block;margin-bottom:1em;margin-top:1em}[tabindex="-1"]{outline:none!important}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.sr-only,.visually-hidden{position:absolute;width:1px;height:auto;margin:0;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}:root{--dark-mode-dark-blue: hsl(209, 23%, 22%);--dark-mode-very-dark-blue: hsl(207, 26%, 17%);--light-mode-very-dark-blue: hsl(200, 15%, 8%);--light-mode-dark-gray: hsl(0, 0%, 52%);--light-mode-very-light-gray: hsl(0, 0%, 98%);--white: hsl(0deg, 0%, 100%);--bold-font-size: 24px;--country-name-font-size: 18px;--border-country-font-size: 16px;--regular-font-size: 14px;--small-font-size:12px;--spacing-50: 4px;--spacing-100: 8px;--spacing-150: 12px;--spacing-200: 16px;--spacing-300: 24px;--spacing-500: 40px;--font-weight-300: 300;--font-weight-600: 600;--font-weight-800: 800;--tablet: 750px;--primary-bg-color: hsl(0deg, 0%, 100%);--secondary-bg-color: hsl(0, 0%, 98%);--text-color: hsl(0, 0%, 0%)}[data-theme=dark]{--text-color: hsl(0deg, 0%, 100%);--primary-bg-color: hsl(209, 23%, 22%);--secondary-bg-color: hsl(207, 26%, 17%)}@font-face{font-family:Nunito Sans;src:url(../assets/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf)}.main{font-family:Nunito Sans,sans-serif;font-weight:var(--font-weight-300);height:max-content;width:100vw;display:flex;flex-direction:column}@media (min-width: 0px) and (max-width: 750px){.main{align-items:center}}.header{min-height:5rem;width:100vw;display:flex;justify-content:space-between;align-items:center;padding:0 5rem;font-weight:var(--font-weight-800);font-size:var(--spacing-300);background-color:var(--primary-bg-color);color:var(--text-color);box-shadow:0 2px 4px #0000000f}.dark-mode-container{display:flex;align-items:center;border:none;gap:.5rem;font-weight:var(--font-weight-300);font-size:var(--regular-font-size)}@media (min-width: 0px) and (max-width: 750px){.header{font-size:var(--regular-font-size);padding:0 1rem}}.country-card{width:264px;display:flex;flex-direction:column;box-shadow:0 0 7px 2px #00000008;border-radius:.3rem;overflow:hidden;cursor:pointer}.country-card:hover{box-shadow:0 4px 4px #00000040}.country-flag{width:100%;height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center}.country-info{background-color:var(--white);height:172px;padding:1.25rem;background-color:var(--primary-bg-color);color:var(--text-color)}.country-name{font-size:var(--country-name-font-size);font-weight:var(--font-weight-800);margin-bottom:.5rem}.country-population,.country-region,.country-capital{font-weight:var(--font-weight-600);font-size:var(--regular-font-size);margin-bottom:.25rem}.card-data{font-weight:var(--font-weight-300)}.country-container{height:100%;min-height:100vh;padding:3.5rem 5rem;background-color:var(--secondary-bg-color);display:flex;flex-direction:column;color:var(--text-color)}.country-card-container{height:100%;width:100%;margin-top:2rem;display:flex;flex:0 0;flex-wrap:wrap;gap:75px}.search-bar-container{display:flex;justify-content:space-between;flex-wrap:wrap;row-gap:3rem;border-radius:.3rem}.search-bar{border-radius:.3rem;height:56px;max-width:480px;min-width:343px;display:flex;align-items:center;padding:0 1.5rem;gap:1.5rem;font-size:var(--regular-font-size);background-color:var(--primary-bg-color);color:var(--text-color);box-shadow:0 2px 9px #0000000d}.search-bar input{background-color:var(--primary-bg-color);color:var(--text-color);border:none;height:56px;width:250px}.search-bar input::placeholder{color:var(--text-color)}.search-bar svg{fill:var(--text-color)}@media (min-width: 0px) and (max-width: 750px){.search-bar-container{justify-content:center;max-width:343px}.country-card-container{justify-content:center;row-gap:40px}.country-container{padding:1rem;align-items:center}}.dropdown-container{position:relative;display:inline-block}.dropdown{position:absolute;width:100%;background-color:var(--white);margin-top:.25rem;border-radius:.3rem}.button{cursor:pointer;height:56px;width:200px;border:none;background-color:var(--primary-bg-color);display:flex;justify-content:space-between;align-items:center;padding:1rem;border-radius:.3rem;font-size:var(--regular-font-size);box-shadow:0 2px 9px #0000000d}.button svg{fill:var(--text-color)}ul{list-style:none;padding:0;margin:0;background-color:var(--primary-bg-color);padding:1rem;border-radius:.3rem}li{padding:4px 3px;font-size:var(--small-font-size)}li:hover{background-color:#00000024;cursor:pointer}.country-page-container{height:100%;min-height:100vh;padding:3.5rem 5rem;background-color:var(--secondary-bg-color);display:flex;flex-direction:column;color:var(--text-color);row-gap:3rem}.country-page-info{min-height:200px;display:flex;flex-direction:row;column-gap:3rem}.country-page-flag-xl{max-height:401px;max-width:560px;border-radius:.3rem}.country-page-text-container{height:323px;width:598px;display:flex;flex-direction:column;padding:2rem;row-gap:.5rem}.country-page-name-header{font-size:var(--bold-font-size);font-weight:var(--font-weight-800)}.country-page-description-container{display:flex;justify-content:space-between;padding:0rem 2rem 0rem 0rem;column-gap:1rem}.country-page-name-native,.country-page-population,.country-page-region,.country-page-subregion,.country-page-tld,.country-page-currencies,.country-page-languages,.country-page-capital,.country-page-borders{font-weight:var(--font-weight-600);margin-bottom:.25rem}.country-page-data{font-weight:var(--font-weight-300)}.country-page-basic-info,.country-page-advanced-info{max-width:12rem}.country-page-borders{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:.5rem;row-gap:1.25rem;font-size:var(--border-country-font-size)}.border-country-page-button{min-width:96px;max-width:fit-content;height:28px;font-size:var(--regular-font-size);font-weight:var(--font-weight-300);padding:0rem;border:none;box-shadow:0 0 4px 1px #0000001a;margin-right:.5rem;margin-bottom:.5rem;color:var(--text-color);background-color:var(--primary-bg-color);cursor:pointer;border-radius:.2rem}.back-button{color:var(--text-color);background-color:var(--primary-bg-color);width:136px;height:40px;border:none;display:flex;flex-direction:row;align-items:center;column-gap:.5rem;border-radius:.2rem;cursor:pointer;box-shadow:0 2px 9px #0000000d}.back-button:hover{box-shadow:0 4px 4px #00000040}.back-button svg{fill:var(--text-color)}.link{color:inherit;text-decoration:inherit;display:contents}@media (min-width: 0px) and (max-width: 750px){.country-page-container{width:100vw}.country-basic-info,.country-advanced-info{max-width:20rem;display:flex;flex-direction:column;row-gap:.125rem}.country-page-info{flex-direction:column;max-width:20rem;row-gap:3.5rem}.country-description-container{flex-direction:column;row-gap:2.5rem;padding:1rem 0rem 0rem;margin-bottom:1rem}.country-page-flag-xl{max-height:229px;max-width:320px}.country-page-description-container{flex-direction:column;row-gap:2rem;margin-bottom:1rem}.country-page-basic-info,.country-page-advanced-info{max-width:20rem}.country-page-name-native,.country-page-population,.country-page-region,.country-page-subregion,.country-page-tld,.country-page-currencies,.country-page-languages,.country-page-capital,.country-page-borders{margin-bottom:.75rem}.country-page-borders{font-size:var(--border-country-font-size)}.country-page-text-container{height:100%;max-width:320px;padding:0rem}.country-page-name-header{margin-bottom:1rem}}
