@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
 * {
     font-family: 'Comfortaa', cursive;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }
 
 body {
     width: 100%;
     height: 100vh;
     background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(./images/pexels-monstera-6281880.jpg);
     background-size: cover;
     background-position: center;
     ;
 }
 
 .container {
     background-color: floralwhite;
     width: 80vw;
     max-width: 37.5em;
     padding: 3em 2.5em;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     border-radius: 0.62em;
     box-shadow: 0 1.25em 1.8em rgba(32, 62, 160, 0.25);
 }
 
 .search-wrapper {
     display: grid;
     grid-template-columns: 9fr 3fr;
     gap: 1.25em;
 }
 
 .search-wrapper button {
     font-size: 1.2em;
     background-color: hwb(240 0% 95%);
     color: burlywood;
     padding: 0.8em 0.5em;
     border: none;
     border-radius: 1.4em;
 }
 
 .search-wrapper input {
     font-size: 1.3em;
     padding: 0 0.62em;
     border: none;
     border-bottom: 2px solid #021425;
     outline: none;
     color: #05050d82;
 }
 
 #result {
     margin-top: 1.25em;
 }
 
 .container .flag-img {
     display: block;
     width: 45%;
     min-width: 7.5em;
     margin: 1.8em auto 1.2em auto;
 }
 
 .container h2 {
     font-weight: 600;
     color: #222a43;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 1.8em;
 }
 
 .data-wrapper {
     margin-bottom: 1em;
     letter-spacing: 0.3px;
 }
 
 .container h4 {
     display: inline;
     font-weight: 500;
     color: black;
 }
 
 .container span {
     color: #5d6274;
 }
 
 .container h3 {
     text-align: center;
     font-size: 1.2em;
     font-weight: 400;
     color: maroon;
 }
 
 .likes-section {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 10px;
 }
 
 .likes {
     font-size: 1.9rem;
     font-weight: 600;
 }
 
 .like-button {
     color: rgb(231, 69, 10);
     font-size: 4.5rem;
     border: none;
     background: none;
     transition: color 300ms;
     cursor: pointer;
 }
 
 .like-button:hover {
     color: rgb(193, 53, 10);
 }
 
 .like-button:active {
     color: rgb(253, 159, 124);
 }
 
 .like-button:focus {
     outline: none;
 }