*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input{border-style:none;background:transparent;outline:none}button,select{padding:0;background:none;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}a{all:unset}html{font-size:62.5%}body{min-height:100vh;font-family:Noto Sans,sans-serif;font-size:1.1rem;padding:0;background:linear-gradient(180deg,#040918,#091540);color:#fff}@media (min-width: 768px){html{font-size:81.25%}}@media (min-width: 1280px){html{font-size:93.75%}}.wrapper{width:90vw;margin:0 auto;padding:3rem 0}.countries{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.country-card{display:flex;flex-direction:column;justify-content:space-between;border:1px solid #ddd;background-color:#1f2535;border-radius:10px;padding:1rem;width:100px;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .2s ease}.country-flag{width:100%;height:50px;object-fit:cover;border-radius:5px}.country-name{padding:.2rem 0;font-size:1.3rem;text-align:center}.country-card p{color:#ddd}@media (min-width: 768px){.country-card{border-radius:12px;width:160px}.country-flag{height:80px;border-radius:7px}}@media (hover: hover) and (pointer: fine){.country-card:hover{transform:scale(1.05)}}@media (min-width: 1280px){.country-card{border-radius:15px;width:220px}.country-flag{height:120px;border-radius:10px}}.search-bar{position:relative;width:100%;height:40px;margin-bottom:1.5rem;background-color:#1f2535;border-radius:10px}.search-bar input{width:100%;height:100%;color:#fff;font-size:1.8rem;padding:.2rem 1.5rem}.search-bar button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;padding:.5rem;border-radius:7px;background-color:#2f354b;transition:background-color .2s;cursor:pointer}@media (min-width: 768px){.search-bar{height:45px;border-radius:12.5px}}@media (hover: hover) and (pointer: fine){.search-bar button:hover{background-color:#f85953}}@media (min-width: 1280px){.search-bar{height:50px;margin-bottom:3rem;border-radius:15px}.search-bar button{right:1rem;padding:.3rem .7rem}}.filters{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:1rem;margin-top:1rem}.filters button{background-color:#2f354b;padding:.5rem 1rem;border-radius:7px;font-size:1.3rem;cursor:pointer;transition:background-color .2s}.filters button:active{transform:scale(.95);opacity:.9}.filters button:last-child{margin-right:1rem}.filters button.active{background-color:#f85953;color:#000;cursor:auto}@media (hover: hover) and (pointer: fine){.filters button:hover{background-color:#f85953}}.top-bar{display:flex;position:relative;flex-wrap:wrap;justify-content:space-between;margin-bottom:1.5rem;align-items:center}.top-bar h1{width:50%}.select-container{position:relative;width:45%;font-size:1.3rem;font-weight:500}.select-container select{width:100%;padding:1rem;background-color:#1f2535;border-radius:7px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.select-container i{position:absolute;right:1rem;top:50%;transform:translateY(-50%);pointer-events:none}.select-container select:focus{box-shadow:0 0 7px #f85953}.random-button{position:absolute;bottom:0;right:0;background-color:#1f2535;padding:.5rem;border-radius:7px;font-size:1.3rem;cursor:pointer}.random-button:active{transform:scale(.95);opacity:.9}@media (min-width: 532px){.random-button{position:static;margin:1rem auto 0}}@media (min-width: 768px){.select-container{width:30%}}@media (min-width: 929px){.random-button{position:absolute}}@media (hover: hover) and (pointer: fine){.select-container select:focus{box-shadow:none}.select-container select:hover{box-shadow:0 0 7px #f85953}.random-button:hover{transform:scale(1.05);box-shadow:0 0 7px #f85953}}@media (min-width: 1280px){.select-container select{transition:box-shadow .2s ease}.top-bar{margin-bottom:2rem}.random-button{transition:box-shadow .2s ease,transform .2s ease}}@media (min-width: 1550px){.select-container{width:15%}}.country-details{width:95vw;margin:0 auto;padding:3rem 0 1rem}.country-details button{position:fixed;top:.5rem;left:.5rem;padding:.5rem 1.25rem .5rem 1rem;border-radius:15px;font-size:1.8rem;color:#fff;background-color:#2f354b;transition:background-color .2s,color .2s;cursor:pointer}.country-details button i{padding-right:.5rem}.info{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(16,auto);gap:1rem}@media (min-width: 768px){.country-details{width:90vw}}@media (hover: hover) and (pointer: fine){.country-details button:hover,.maps a:hover{background-color:#f85953;color:#000}}@media (min-width: 1280px){.country-details{width:85vw;padding-top:1rem}.country-details button{top:1.5rem;left:7.5vw}.info{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(11,auto)}}.header{text-align:center}.header h1{font-size:3rem}.header h2{font-size:2.5rem}.header__images{display:flex;gap:.5rem;justify-content:space-around;flex-wrap:wrap;padding:1rem 0}.header__flag,.header__arms{display:block;width:40%;height:auto;align-content:center}@media (min-width: 768px){.header__flag,.header__arms{width:25%}}@media (min-width: 1280px){.header__images{justify-content:space-evenly;padding:1rem 0;gap:0}.header__flag,.header__arms{width:13%}}.info section{display:flex;flex-direction:column;justify-content:center;background-color:#1f2535;padding:.5rem 1rem;font-size:1.2rem;border-radius:10px;line-height:1.5;box-shadow:0 0 10px #000}.info section h3{font-size:2rem;margin-bottom:.5rem}.info section strong{font-size:1.5rem;padding-right:.5rem}.geography{grid-column:1;grid-row:1 / span 7}.currencies{grid-column:1;grid-row:8 / span 2}.currencies ul{list-style-type:none;padding-left:0}.additional{grid-column:1;grid-row:10 / span 5}.population{grid-column:2;grid-row:1 / span 4}.languages{grid-column:2;grid-row:5 / span 2}.traffic{grid-column:2;grid-row:7 / span 3}.contact{grid-column:2;grid-row:10 / span 4}.info section.maps{grid-column:1 / span 2;grid-row:16;flex-direction:row;justify-content:space-around}section.maps h3{margin-bottom:0}.maps a{display:block;padding:.5rem 1rem;border-radius:10px;cursor:pointer;transition:background-color .2s,color .2s}@media (min-width: 768px){.info section{border-radius:15px}}@media (min-width: 1280px){.info section{border-radius:15px}.additional{grid-column:2;grid-row:5 / span 5}.languages{grid-column:3;grid-row:1 / span 2}.traffic{grid-column:3;grid-row:3 / span 3}.contact{grid-column:3;grid-row:6 / span 4}.info section.maps{grid-column:1 / span 3;grid-row:11}}.info section.weather{grid-column:1 / span 2;grid-row:15;flex-direction:row;justify-content:space-between;flex-wrap:wrap}section.weather h3{width:100%;text-align:center}section.weather h3 p{font-size:1.3rem;font-weight:400}.temperature{display:flex;position:relative;align-items:center;height:100px;flex-basis:50%}.temperature img{width:50%}.temperature__value{font-size:3rem}.temperature__desc{position:absolute;bottom:0;width:100%;text-align:center}.temperature__desc:first-letter{text-transform:uppercase}.weatherDetails{display:flex;justify-content:center;flex-wrap:wrap;flex-basis:45%}.weatherDetails div{flex-basis:50%}.weatherDetails div div{display:flex}.weatherDetails div div span{margin-right:2px}@media (min-width: 450px){.temperature img{width:auto}}@media (min-width: 1280px){.info section.weather{grid-column:1 / span 3;grid-row:10}.temperature{flex-basis:30%;justify-content:space-around}.temperature__desc{top:-15%}.weatherDetails{flex-basis:65%;align-items:center}.weatherDetails div{flex-basis:25%}}