*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito Sans,sans-serif;width:100%;background:var(--theme-bg);color:var(--theme-text);transition:background-color .3s,color .3s}a{text-decoration:none;color:var(--theme-text);cursor:pointer}#root{width:100%}button{outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--theme-element);color:var(--theme-text);text-transform:capitalize;cursor:pointer;border-radius:var(--border-radius);transition:background-color .3s,color .3s}:root{--Dark-Blue: hsl(209, 23%, 22%);--Very-Dark-Blue-bg: hsl(207, 26%, 17%);--Very-Dark-Blue-text: hsl(200, 15%, 8%);--Dark-Gray: hsl(0, 0%, 52%);--Very-Light-Gray: hsl(0, 0%, 98%);--White: hsl(0, 0%, 100%)}[data-theme-dark-mode=false]{--theme-bg: var(--Very-Light-Gray);--theme-element: var(--White);--theme-text: var(--Very-Dark-Blue-text);--theme-input-text:var(--Dark-Gray);--theme-hover:var(--Dark-Blue);--theme-hover-text:var(--White)}[data-theme-dark-mode=true]{--theme-bg: var(--Very-Dark-Blue-bg);--theme-element: var(--Dark-Blue);--theme-text: var(--White);--theme-input-text:var(--White);--theme-hover:var(--White);--theme-hover-text:var(--Dark-Blue)}.app-wrapper{display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;width:90%;justify-self:center;align-items:center;padding:0 var(--padding-md)}.search-bar{position:relative;display:flex;justify-content:center;align-items:center;height:55px;width:100%;box-shadow:var(--box-shadow);border-radius:var(--border-radius);background:var(--theme-element);transition:background-color .3s}.search-bar>.icon{display:flex;justify-content:center;align-items:center;position:absolute;left:35px;font-size:20px;margin:0;padding:0;background:none;outline:none;border:0;color:var(--theme-input-text);transition:color .3s}.search-bar>input{color:var(--theme-input-text);width:100%;height:55px;padding-left:75px;outline:none;border:none;background:var(--theme-element);border-radius:var(--border-radius);transition:background-color .3s,color .3s}.filter-drop-down{position:relative}.filter-drop-down>button{padding:var(--padding-lg);height:55px;display:flex;border-radius:var(--border-radius);width:180px;box-shadow:var(--box-shadow)}.drop-down-icon{margin-left:auto;font-size:large}.drop-menu-content{position:absolute;list-style:none;text-transform:capitalize;margin-top:10px;line-height:2;border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:l;width:100%;background:var(--theme-element);z-index:1}.drop-down-item{padding-left:var(--padding-lg)}.drop-down-item:nth-child(1){border-radius:var(--border-radius) var(--border-radius) 0 0}.drop-down-item:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}.drop-down-item:hover{background:var(--theme-hover);color:var(--theme-hover-text);cursor:pointer}.home-container{display:flex;flex-direction:column;width:90%;justify-self:center;align-items:center}.home-actions{display:flex;align-items:center;justify-content:center;gap:25px;width:100%}.home-actions>*:nth-child(1){width:35%;margin-right:auto}.home-font{font-size:var(--font-size-home-page)}@media all and (min-width: 480px) and (max-width: 768px){.home-actions{flex-direction:column;align-items:flex-start}.home-actions>*:nth-child(1){width:100%;margin-right:auto}}@media all and (max-width: 480px){.home-actions{flex-direction:column;align-items:flex-start}.home-actions>*:nth-child(1){width:100%;margin-right:auto}}.card-container>.card-image{width:100%;height:170px;object-fit:fill;border-radius:var(--border-radius) var(--border-radius) 0 0}.card-werpper{position:relative;bottom:0;height:100%;list-style:none;box-shadow:var(--box-shadow);border-radius:var(--border-radius);padding-bottom:var(--padding-xl);background:var(--theme-element);outline:0;transition:all .1s ease-in-out;transition:background-color .3s,color .3s}.card-werpper:hover{bottom:10px;box-shadow:1px 30px 10px #0003}.card-detail-container{padding:var(--padding-xl)}.card-detail-container>.card-header{padding-bottom:var(--padding-xl);font-size:1.2rem}.card-detail-container>.card-details{padding-bottom:var(--padding-sm)}.country-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding:60px 0;width:100%;gap:50px;align-items:center;justify-content:center}.error-message{text-align:center;padding:var(--padding-xxl)}@media all and (max-width: 480px){.country-view{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));width:80%;display:grid;place-items:center;gap:50px}}.loader-container{display:flex;align-items:center;justify-content:center;height:75vh}.loader{width:96px;height:96px;border:5px solid #000000;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.loader:after{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:4px solid transparent;border-bottom-color:var(--theme-text)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.not-found{display:flex;flex-direction:column;justify-content:center;align-items:center}.not-found>.not-found-icon{font-size:7rem;color:var(--theme-text);margin:24px 0}.not-found>p{text-transform:capitalize;font-size:1.1rem;font-weight:600}.not-found>button{box-shadow:var(--box-shadow);padding:var(--padding-md) var(--padding-lg);font-size:1.1rem;margin-top:24px;border-radius:var(--border-radius)}.error-icon{font-size:5rem;color:var(--theme-text);margin:24px 0}.error>p{text-transform:capitalize}.error>button{box-shadow:var(--box-shadow);padding:var(--padding-md) var(--padding-lg);font-size:1.1rem;margin-top:24px;border-radius:var(--border-radius)}nav{width:100%;display:flex;justify-self:center;align-items:center;padding:var(--padding-xl) calc(5% + var(--padding-md));box-shadow:var(--box-shadow);margin-bottom:var(--padding-xl);background:var(--theme-element);transition:background-color .3s}nav>.dark-mode-button{margin-left:auto;font-weight:600;padding:var(--padding-md);background:var(--theme-element);transition:background-color .3s}.dark-mode-button>span{display:flex;align-items:center;justify-items:center;padding:2px}.dark-mode-icon{margin-right:10px;font-size:18px}@media all and (min-width: 480px) and (max-width: 768px){nav h1{font-size:1.35rem}}@media all and (max-width: 480px){nav h1{font-size:1rem}}.details-container{display:flex;flex-direction:row;justify-content:space-between;padding-top:50px}.back-button-container{width:100%}.back-button{display:flex;gap:6px;width:max-content;border-radius:var(--border-radios);box-shadow:var(--box-shadow);padding:var(--padding-sm) var(--padding-xl)}.back-button:hover{background:var(--theme-hover);color:var(--theme-hover-text)}.flag{width:40%;border-radius:var(--border-radius)}.flag>img{width:100%;object-fit:cover;border-radius:var(--border-radius)}.details-container>.details-sub{width:50%;padding:var(--padding-xl) 0 0 var(--padding-xl)}.details-font{font-size:var(--details-page)}@media all and (min-width: 480px) and (max-width: 768px){.details-container{flex-direction:column;align-items:center;padding-top:50px}.flag{width:100%}.details-container>.details-sub{width:100%;padding:var(--padding-xl) 0 0 0}}@media all and (max-width: 480px){.details-container{flex-direction:column;align-items:center;padding-top:50px}.flag{width:100%}.details-container>.details-sub{width:100%;padding:var(--padding-xl) 0 0 0}}.details-sub-wrapper>h1{padding-bottom:var(--padding-xl);font-weight:900;font-size:3rem}.details-sub-container{display:flex;justify-content:space-between;padding-bottom:var(--padding-xl)}.details-sub-container>div>*{padding:var(--padding-sm) var(--padding-xl) var(--padding-sm) 0}.details-sub-container>p{width:50%}@media all and (max-width: 480px){.details-sub-container{flex-direction:column;padding-bottom:var(--padding-xl)}}:root{--font-size-home-page: 14px;--font-size-details-page: 16px;--padding-sm: 6px;--padding-md: 12px;--padding-lg: 18px;--padding-xl: 24px;--padding-xxl: 48px;--border-radius: 5px;--box-shadow: 1px 3px 15px rgba(0, 0, 0, .15)}.border-button{padding:var(--padding-sm) var(--padding-md);margin:var(--padding-sm);box-shadow:var(--box-shadow)};{}