.filter{color:var(--text-color);font-weight:600;margin:20px 0}.filter__select{align-items:center;background-color:var(--elements-color);border-radius:5px;box-shadow:var(--box-shadow);cursor:pointer;display:flex;justify-content:space-between;padding:15px 25px;width:100%}.filter__select svg{transition:transform .3s linear}.active{transform:rotate(-180deg)}.filter__content{background-color:var(--elements-color);border-radius:5px;box-shadow:var(--box-shadow);margin-top:8px;padding:5px;position:absolute;width:calc(100% - 40px)}.filter__list{list-style:none}.filter__list li{border-radius:5px;cursor:pointer;padding:20px}.filter__list li:hover{background-color:var(--bg-color)}@media screen and (min-width: 768px){.filter__select,.filter__content{width:300px}}.header{align-items:center;background-color:var(--elements-color);box-shadow:var(--box-shadow);display:flex;justify-content:space-between;padding:20px 15px}.header h1{color:var(--text-color);font-size:16px}.header__button{align-items:center;background-color:var(--elements-color);border:none;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:7px;justify-content:center}.header__button img{width:20px}.country-card{background-color:var(--elements-color);border-radius:5px;box-shadow:var(--box-shadow);color:var(--text-color);cursor:pointer;overflow:hidden}.country-card__flag{height:200px;width:100%}.country-card__flag img{height:100%;object-fit:cover;width:100%}.country-card__info{padding:30px 30px 50px}.country-card__info p{font-weight:600;margin-bottom:3px}.country-card__info h2{margin-bottom:20px}.country-card__info span{font-weight:400}.list-of-countries{display:grid;grid-gap:40px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}@media screen and (min-width: 1024px){.list-of-countries{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1440px){.list-of-countries{grid-template-columns:repeat(5,1fr)}}.search{align-items:center;background-color:var(--elements-color);border-radius:5px;box-shadow:var(--box-shadow);display:flex;gap:20px;justify-content:start;padding:15px 25px;width:100%}.search input{background-color:transparent;border:0;color:var(--text-color);font-size:16px;font-weight:600;width:100%}.search input::placeholder{color:var(--input-color)}.search input:focus{outline:none}.feather-search{stroke:var(--input-color)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body,button,input{font-family:Nunito Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.content{padding:20px}.light{--text-color: hsl(200, 15%, 8%);--elements-color: hsl(0, 0%, 100%);--bg-color: hsl(0, 0%, 98%);--input-color: hsl(200, 15%, 70%);--box-shadow: rgba(99, 99, 99, .1) 0px 2px 8px 0px}.dark{--text-color: hsl(0, 0%, 100%);--elements-color: hsl(209, 23%, 22%);--bg-color: hsl(209, 26%, 17%);--input-color: hsl(0, 0%, 80%);--box-shadow: rgba(0, 0, 0, .1) 0px 2px 8px 0px}@media screen and (min-width: 768px){.content-header{align-items:center;display:flex;gap:40px;justify-content:space-between;margin-bottom:20px}}