@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,600;6..12,800&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{margin:0;display:flex;flex-direction:column;min-height:100vh;font-family:Nunito Sans,sans-serif;background:#fafafa;color:#202c37;transition:all .25s ease-in-out}.container{width:min(100% - 4rem,90em);margin-inline:auto;margin-bottom:3em}nav{display:flex;width:100%;background:#fff;justify-content:space-between;padding-block:1.5em;box-shadow:0 4px 8px #00000007}.nav-main{display:flex;justify-content:space-between;width:min(100% - 4rem,90em);margin-inline:auto}.logo{font-weight:800;font-size:clamp(1rem,1.5vw,1.5rem);color:#202c37}.darkMode{display:inline-flex;align-items:center;gap:.75rem;color:#202c37;cursor:pointer}.fa-moon{rotate:-30deg}.text-DarkMode{font-size:clamp(.9rem,1.5vw,1rem);font-weight:600}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:70px;margin-bottom:2em}@media (max-width: 1080px){.card-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 810px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 475px){.card-grid{grid-template-columns:1fr}}.card-grid .card{background-color:#fff;text-align:start;border-radius:5px;box-shadow:0 1px 5px 1px #0000001a}.card-grid .card:hover{box-shadow:0 1px 5px 5px #00000064;transition:box-shadow .25s ease-in-out;cursor:pointer}.nation{padding:20px 25px 55px}.nation h1{font-size:1.5rem}.nation span{font-weight:300;font-size:14px}.population,.region,.capital{font-weight:600;line-height:1.6rem}.population{margin-top:1rem}img{width:100%;height:200px;object-fit:cover;border-top-right-radius:0px;border-top-left-radius:0px}.inputFilter{margin-block:3rem;display:flex;justify-content:space-between;width:100%}@media (max-width: 585px){.inputFilter{margin-block:1.5rem;flex-direction:column;gap:2em}}.group{display:flex;line-height:28px;align-items:center;position:relative;max-width:390px;border-radius:8px;box-shadow:0 1px 5px 1px #c1c1c160}.input{width:100%;min-width:390px;height:50px;line-height:28px;padding:0 1rem 0 2.5rem;border:2px solid transparent;border-radius:8px;outline:none;background-color:#fff;color:#202c37;transition:.3s ease}@media (max-width: 475px){.input{min-width:auto;height:45px}}.input::placeholder{color:#858585}.input:focus,input:hover{outline:none;border-color:#858585;background-color:#fff;box-shadow:0 0 0 4px #fafafa}.icon{position:absolute;left:1rem;fill:#858585;width:1rem;height:1rem}.custom-dropdown{position:relative;width:190px}.custom-dropdown .selected-option{padding:12px 14px;border:2px solid transparent;border-radius:3px;outline:none;background-color:#fff;box-shadow:0 1px 5px 1px #c1c1c160;cursor:pointer}.custom-dropdown .options{display:none;position:absolute;top:100%;left:0;width:100%;list-style:none;padding:0;margin:0;border:2px solid transparent;border-top:none;box-shadow:0 1px 5px 1px #c1c1c160}.custom-dropdown .options li{padding:8px 14px;cursor:pointer;background-color:#fff}.custom-dropdown .options li:hover{background-color:#fafafa}.fa-angle-down{position:absolute;top:0;right:0;translate:-17px 17px;pointer-events:none;color:#202c37}body.dark-mode{background-color:#202c37;color:#fff;transition:all .25s ease-in-out}body.dark-mode .logo,body.dark-mode .darkMode{color:#fff}body.dark-mode .card{background-color:#2b3945}body.dark-mode .card:hover{cursor:pointer}body.dark-mode nav{background:#2b3945}body.dark-mode .input{background-color:#2b3945;color:#fff}body.dark-mode .input:focus,body.dark-mode input:hover{border-color:#858585;background-color:#2b3945;color:#fff;box-shadow:0 0 0 4px #2b3945}body.dark-mode .input::placeholder{color:#fff}body.dark-mode .icon,body.dark-mode .fa-angle-down{color:#fff}body.dark-mode .selected-option{background-color:#2b3945}body.dark-mode .group,body.dark-mode .selected-option{box-shadow:0 1px 5px 1px #202c37}body.dark-mode .options{box-shadow:0 1px 5px 1px #202c37;border:2px solid hsl(207,26%,17%)}body.dark-mode .options li{background-color:#2b3945}body.dark-mode .options li:hover{background-color:#202c37}body.dark-mode button{background:#2b3945;color:#fff;box-shadow:0 1px 5px 1px #0000001a}body.dark-mode button:hover{cursor:pointer;scale:.9;transition:scale .2s ease-in-out}body.dark-mode a{background:#2b3945;color:#fff;box-shadow:0 1px 5px 1px #0000001a}body.dark-mode a:hover{box-shadow:0 1px 5px 1px #00000058;transition:all .2s ease-in-out}.card_container{height:auto;margin-top:5em}.country_desciption{display:grid;grid-template-columns:repeat(2,1fr);margin-top:4.5em}@media (max-width: 1028px){.country_desciption{grid-template-columns:1fr}}.country-info{display:flex;margin-top:1.35rem}@media (max-width: 1028px){.country-info{flex-direction:column;gap:2em}}a{background:#fff;text-decoration:none;color:#202c37;padding:.65rem 2.5rem;border:none;border-radius:5px;box-shadow:0 1px 5px 1px #0000001a}.fa-arrow-left-long:hover,a:hover{box-shadow:0 1px 5px 1px #00000058;transition:all .2s ease-in-out}button{background:#fff;padding:.65rem 2.5rem;border:none;border-radius:5px;box-shadow:0 1px 5px 1px #0000001a} button:hover{cursor:pointer;scale:.9;transition:scale .2s ease-in-out} .description{margin-inline:auto;margin-block:auto}@media (max-width: 1028px){.description{margin-inline:0em}}.nation_name{font-size:1.85rem;font-weight:800}@media (max-width: 1028px){.nation_name{margin-top:1.85em}}.info_One,.info_Two{width:min(100% - 1rem,90em)}.info_One div,.info_Two div{font-weight:300;font-size:14px}strong{font-weight:600;line-height:1.75rem}.description_IMG{width:100%;height:auto;max-width:700px;border-top-right-radius:0;border-top-left-radius:0}.country-border{margin-top:4em;display:flex}@media (max-width: 585px){.country-border{flex-direction:column;gap:1.5em}}.country-border strong{margin-right:1rem}.country-border button{padding:.45rem 1.35rem;margin-right:1em;width:auto;margin-bottom:1rem}