:root{--white-color: white;--black-color: #111517;--gray-color: rgb(109, 109, 109);--light-gray-color: rgb(155, 155, 155);--default-font: "Ysabeau Infant", sans-serif}*,:after,:before{box-sizing:border-box;margin:0;padding:0}.light-mode{--background-and-inputs-and-to-top-btn-color: hsl(0, 0%, 96%);--text-and-special-color: hsl(200, 15%, 8%);--box-shadow: rgba(66, 68, 90, .5);--flag-box-shadow: rgba(66, 68, 90, .15);--go-to-top-button-bg: rgb(68, 68, 68)}.dark-mode{--background-and-inputs-and-to-top-btn-color: hsl(200, 15%, 8%);--text-and-special-color: hsl(0, 0%, 96%);--box-shadow: rgba(165, 167, 189, .5);--flag-box-shadow: rgba(165, 167, 189, .15);--go-to-top-button-bg: rgb(192, 192, 192)}html{scroll-behavior:smooth;overflow-y:scroll}body{font-family:var(--default-font);font-size:1em;background-color:var(--black-color);color:var(--white-color)}.app{width:100%;height:100%;min-height:100vh;color:var(--text-and-special-color);background-color:var(--background-and-inputs-and-to-top-btn-color)}.app-loader-wrapper{display:flex;justify-content:center;align-items:center;padding:3em 0;margin-bottom:5.35em;min-height:50vh}.country-item-loader-wrapper{display:flex;justify-content:center;align-items:center;padding:2.35em 0}.go-to-top-btn{position:fixed;left:50%;transform:translate(-50%);display:flex;bottom:.5em;padding:1em;background-color:var(--go-to-top-button-bg);color:var(--background-and-inputs-and-to-top-btn-color);border-radius:50%;border:none;font-size:28px;text-decoration:none;transition:visibility 1s,opacity 1s;cursor:pointer;visibility:hidden;opacity:0;z-index:10}.active-btn{visibility:visible;opacity:1}.header{width:100%;border-bottom:1px solid var(--text-and-special-color)}.header-content{display:flex;justify-content:space-between;align-items:center;padding:.75em 2em;margin:auto;max-width:1600px;height:130px}.header-title{display:flex;align-items:center}.header-title-icon{display:none;margin-top:2px;margin-right:5px}.header .dark-mode-btn{display:flex;justify-content:center;align-items:center;padding:.6rem;width:50px;height:55px;background-color:var(--background-and-inputs-and-to-top-btn-color);color:var(--text-and-special-color);border:1px solid var(--text-and-special-color);border-radius:8px;transition:box-shadow .3s;cursor:pointer}.header .dark-mode-btn:hover{box-shadow:0 0 30px -10px var(--box-shadow)}.country-list-wrapper{width:100%;max-width:1600px;margin:0 auto}.country-list-filters{position:relative;display:flex;justify-content:center;flex-direction:column;padding:2em 1.2em;margin:1.8em}.country-list-filters select,.country-list-filters input{padding:1rem 2rem;margin:.75rem 0;background-color:var(--background-and-inputs-and-to-top-btn-color);color:var(--text-and-special-color);font-family:var(--default-font);border:none;border-radius:8px;box-shadow:0 0 20px -5px var(--box-shadow)}.country-list-filters select{border-right:20px solid transparent;cursor:pointer}.country-list-filters select:focus,.country-list-filters input:focus{outline:1px solid var(--text-and-special-color)}.country-list-search-icon{position:absolute;left:29px;top:62px}.country-list-instructions{display:flex;justify-content:center;align-items:center;margin-bottom:3.4em;font-size:1.2em;text-align:center}.country-list-instructions p{padding:1em;border:3px dashed var(--text-and-special-color)}.country-list-container{display:grid;grid-template-columns:repeat(1,1fr);gap:3em;justify-items:center;padding:0 2em 3.4em;width:100%;min-height:10vh;list-style:none}.country-list-item{width:100%;max-width:380px;border-radius:10px;box-shadow:0 0 30px -10px var(--box-shadow);text-align:center;overflow:hidden}.country-list-box{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:2em 1em}.country-list-box-img{aspect-ratio:160/80;background-color:transparent;border:none}.cursor-loader{cursor:none}.country-list-box-img img{max-width:200px;max-height:100px;width:100%;border-radius:10px;transition:transform .3s;cursor:pointer;-webkit-box-shadow:0px 0px 20px -3px var(--flag-box-shadow);-moz-box-shadow:0px 0px 20px -3px var(--flag-box-shadow);box-shadow:0 0 20px -3px var(--flag-box-shadow)}.country-list-box-name{display:block;font-size:1.2em;margin:2em}.country-list-box-capital,.country-list-box-population,.country-list-box-continent{font-size:1em}.country-list-special-box{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:3em 0;margin-bottom:2.35em;min-height:10vh;width:100%}.country-list-special-text{padding-top:1em;text-align:center;font-size:1.5em}.country-list-special-btn{padding:.75em 2em;margin:3em 0;width:65%;max-width:250px;background-color:var(--gray-color);color:var(--white-color);border:none;border-radius:10px;font-family:var(--default-font);font-size:1em;text-transform:uppercase;transition:background-color .3s;cursor:pointer}.country-item-details-wrapper,.country-item-details-container{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}.country-item-details-wrapper,.country-item-details-title{padding:1.5em 1em}.country-item-details-container{padding:1em;width:100%;font-size:1.1em}.country-item-details-container:after{content:"";margin-top:2em;width:100%;border:1px solid var(--text-and-special-color)}.country-item-details-container:last-of-type:after{margin-top:0;border:1px solid transparent}.country-item-details-flag{aspect-ratio:160/80;margin-top:3em;width:100%;max-width:400px;border-radius:10px;-webkit-box-shadow:0px 0px 20px -3px var(--flag-box-shadow);-moz-box-shadow:0px 0px 20px -3px var(--flag-box-shadow);box-shadow:0 0 20px -3px var(--flag-box-shadow)}.country-item-details-title{font-size:1.5em;font-weight:700}.country-item-details-container p{margin-bottom:5px;font-weight:700}.country-item-details-button-box{display:flex;justify-content:center;align-items:center;flex-direction:column}.country-item-details-border-button,.country-item-details-button{background-color:var(--gray-color);color:var(--white-color);border:none;font-family:var(--default-font);transition:background-color .3s;cursor:pointer}.country-item-details-border-button{margin:1em;padding:.75em 2em;width:100%;font-size:.8em;border-radius:5px}.country-item-details-button{padding:1em 2em;margin:3em;width:80%;max-width:250px;font-size:.9em;border-radius:10px;text-transform:uppercase}.footer{padding:1em 1em 0;border-top:1px solid var(--text-and-special-color);font-size:1.5em;text-align:center}.footer-text{padding:1em}.footer-icons{padding-top:.5em}.footer-icons .footer-icon{margin:.65em;color:var(--text-and-special-color);font-size:32px;transition:transform .5s}.footer-icons .footer-icon:hover{transform:rotate(360deg)}.page-not-found{width:100%}.page-not-found-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:2em}.page-not-found img{width:100%;max-width:800px}.page-not-found-credits{font-size:.7em}.page-not-found-credits a{color:var(--text-and-special-color);text-decoration:underline}.page-not-found-btn{padding:.8em 3em;margin:2em 1em 1em;background-color:var(--gray-color);color:var(--white-color);font-size:1em;font-family:var(--default-font);text-transform:uppercase;text-decoration:none;border-radius:8px;transition:background-color .3s,color .3s}@media (max-width: 300px){.country-list-search-icon{top:60px}.country-list-instructions p{border:none;font-weight:700}}@media (max-width: 320px){.header-content{padding:.75em}.country-list-instructions p{padding:1em .5em}}@media (min-width: 320px){.country-list-filters select,.country-list-filters input{font-size:16px}}@media (min-width: 500px){.header-title-icon{display:inline-block}.country-item-details-border-button{padding:.75em 3em}.footer-icons{padding:.5em 1em}.footer-icons .footer-icon{margin:1em}}@media (min-width: 600px){.country-list-container{grid-template-columns:repeat(2,1fr)}.country-list-box-img img{width:220px;height:120px}.country-item-details-container:after{width:80%}.country-item-details-button{width:50%}}@media (min-width: 768px){.app-loader-wrapper{margin-bottom:5.35em;min-height:20vh}}@media (min-width: 820px){.header-content{padding:.75em 3em}.country-list-filters{justify-content:space-between;flex-direction:row}.country-list-filters select,.country-list-filters input{width:250px;padding:1rem 2.5rem}.country-list-search-icon{left:33px;top:63px}.country-list-container{grid-template-columns:repeat(3,1fr)}.country-list-box-img img{max-width:none;max-height:none;width:200px;height:100px}.footer-text{padding:1em 1em 0}.footer-icons .footer-icon{font-size:36px}.page-not-found-btn{padding:.8em 4em}}@media (min-width: 1024px) and (min-height: 768px){.app-loader-wrapper{margin-bottom:5.75em;min-height:20vh}.go-to-top-btn{font-size:34px}.country-list-item{max-width:320px}.country-list-special-text{font-size:1.65em}.country-list-box-img img:hover{transform:scale(1.05)}.country-list-box-img img{width:230px;height:120px}.country-item-details-wrapper,.country-item-details-title{padding:2em 1em}.country-item-details-container{font-size:1.2em}.country-item-details-container:after{width:60%}.country-item-details-title{font-size:1.8em}.country-item-details-flag{max-width:500px}.country-item-details-button-box{flex-direction:row;flex-wrap:wrap}.country-item-details-button-box button{display:flex;justify-content:center;width:10%}.country-item-details-border-button{padding:.75em 4em}.country-item-details-button{font-size:1em;width:30%}.footer-icons .footer-icon{margin:1em;font-size:40px}.page-not-found-credits{font-size:.9em}.page-not-found-btn{padding:.8em 5em;font-size:1.2em}.country-item-details-border-button:hover,.country-item-details-button:hover,.country-list-special-btn:hover,.page-not-found-btn:hover{background-color:var(--light-gray-color)}}@media (min-width: 1280px) and (min-height: 768px){.app-loader-wrapper{margin-bottom:4.6em;min-height:40vh}.header .header-title{font-size:2.2em}.country-list-instructions{font-size:1.4em}.country-list-container{grid-template-columns:repeat(4,1fr);min-height:44vh}.country-list-special-box{min-height:44vh}.country-item-details-button{width:20%}}