*{margin:0;padding:0}body{display:flex;place-items:center;min-width:320px}:root{--fontRoboto: "Roboto", sans-serif}.app{text-align:center;font-family:var(--fontRoboto);font-size:16px;background:url(/assets/map-CwOl0idG.jpg) no-repeat center center fixed;background-size:cover;min-height:100vh;width:calc(100vw - 15px);animation:slideIn .5s ease-out}h1{background:#0000001a;color:#111;font-size:3.2rem;font-weight:350;text-align:center;max-width:max-content;padding:8px 110px;margin:0 auto}.title{padding-top:50px}.search-box{display:flex;justify-content:center;align-content:center;margin:26px 0 20px;gap:10px}.sort-filter{display:flex;align-content:center;gap:10px}select{font-family:var(--fontRoboto);font-size:14px;background:#f3f3f3cc;color:#333;height:40px;width:202px;border:1px solid #999;outline:none;padding-left:6px;cursor:pointer;transition:box-shadow .3s ease}select:hover{box-shadow:0 6px 12px #0003}select optGroup{background:#eee;font-weight:500}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:678px){h1{font-size:2.1rem;padding:10px 30px}.search-box{flex-direction:column;justify-content:center;align-items:center;margin:16px 0 10px}.sort-filter{flex-direction:column;justify-content:center;align-items:center}.title{padding-top:0}}.country-list{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding-bottom:100px}:root{--cardTextColor: #999;--boxShadow1: 2px 6px 12px rgba(0, 0, 0, .2)}.country-card{border:1px solid #666;padding:15px;text-align:left;background:#00000026;width:250px;margin:10px;overflow:hidden;position:relative;box-shadow:car(--boxShadow1);transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease,border .3s ease;animation:slideIn .5s forwards}.country-card:hover{transform:scale((1.05));background-color:#00000040;box-shadow:var(--boxShadow1);border:1px solid #000}.flag{width:100%;height:150px;object-fit:cover;transition:transform .3s ease}.country-card:hover .flag{transform:scale(1.05)}.info{padding:4px 10px;margin-top:12px;line-height:1.3;background:#000000d9}.info h2{font-size:1.5em;margin:10px 0;color:#aaa;transform:color .3s ease}.info p{margin:5px 0;font-size:.9em;color:var(--cardTextColor);padding-bottom:10px}.info strong{color:var(--cardTextColor)}a{color:var(--cardTextColor);text-decoration:none}a:hover{color:#aaa;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#999}:root{--fontRoboto: "Roboto", sans-serif;--bgColor1: rgba(243, 243, 243, .8);--bgColor2: rgba(243, 243, 243, .7);--bgColor3: rgba(243, 243, 243, .1);--color1: #333}.search{width:max-content;display:flex;align-items:center;font-family:var(--fontRoboto);background:var(--bgColor1);height:38px;border:1px solid #999;transition:box-shadow .3s ease}.search:hover{box-shadow:0 6px 12px #0003}.search:focus-within{background:var(--bgColor2)}.search-input{background:transparent;font-family:var(--fontRoboto);font-size:14px;color:var(--color1);width:130px;padding:6px;border:none;border-right:1px solid #ccc;cursor:pointer;outline:none}.search-input::placeholder{color:#666}.search-input:hover::placeholder{color:#999}.search-icon{color:var(--color1);font-size:18px;padding-left:8px}button{font-family:var(--fontRoboto);background:var(--bgColor3);color:var(--color1);padding:12px;border:none;cursor:pointer}.footerStyle{background:#f3f3f3;color:#333;font-size:14px;padding:8px 0;position:fixed;width:100%;bottom:0}.footerStyle a{color:#333;text-decoration:none}.footerStyle a:hover{color:#111;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#333}