#root{padding:2rem;text-align:center}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;padding:0;display:flex;flex-direction:column;width:100vw;background:url(../girafe.jpg);background-repeat:no-repeat;background-size:cover}h1{padding:0;margin:0;color:#f77f00;font-size:40px}header{display:flex;justify-content:space-around;align-items:center;width:100%}header img{filter:invert(62%) sepia(77%) saturate(4102%) hue-rotate(4deg) brightness(99%) contrast(103%)}.scoreHolder{width:100%;display:flex;align-items:center;justify-content:center;gap:20px}.scoreHolder button{font-size:20px;border:0;background-color:green;color:#fff;border-radius:20px;padding:10px;font-weight:700;cursor:pointer}.scoreHolder p{font-size:30px;font-weight:700}.cardContainer{display:grid;grid-template-columns:repeat(4,auto);padding:1rem;gap:10px;justify-content:center}.countryCard{background-color:#e9e5e599;border:5px solid #ff8300;color:#000;height:180px;width:130px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:10px;border-radius:12px;cursor:pointer}.countryCard h3,.countryCard p{margin:0;padding:0}footer{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}@media screen and (max-width: 700px){body{margin:0;padding:0;display:flex;flex-direction:column;width:100vw;background:url(../zebra.jpg);background-repeat:no-repeat;background-size:cover}.cardContainer{display:grid;grid-template-columns:repeat(3,auto);padding:1rem;gap:7px;justify-content:center}.countryCard{background-color:#e9e5e599;border:5px solid #ff8300;color:#000;height:110px;width:85px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:5px;border-radius:12px;cursor:pointer}.countryCard img{width:60px;margin:0;padding:0}.countryCard h3{font-size:15px;margin:0;padding:0}.countryCard p{margin:0;padding:0;font-size:11px}footer{font-size:18px;font-weight:700}.scoreHolder button{font-size:15px;border:0;background-color:green;color:#fff;border-radius:20px;padding:8px;font-weight:700;cursor:pointer}.scoreHolder p{font-size:20px;font-weight:700}.scoreHolder{width:100%;display:flex;align-items:center;justify-content:center;gap:5px}h1{padding:0;margin:0;color:#f77f00;font-size:27px}header img{filter:invert(62%) sepia(77%) saturate(4102%) hue-rotate(4deg) brightness(99%) contrast(103%);width:40px}}
