From 64619c075c43e4b09f8571ae23fc522bc5c7f8d0 Mon Sep 17 00:00:00 2001
From: i-Bex <i-Bex@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:50:53 +0800
Subject: [PATCH] Add Style for the country info section

- Add the style for the info that is going to get display on like the
  country name and other info
---
 style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/style.css b/style.css
index 0a02c83..6ad8d69 100644
--- a/style.css
+++ b/style.css
@@ -168,6 +168,58 @@ body {
     appearance:none;
 }
 
+.main__countries {
+    padding:1rem 3rem;
+    display:grid;
+    grid-template-columns:1fr;
+    grid-template-rows:auto;
+    justify-items:center;    
+}
+
+.countries__info {
+    width:100%;
+    color:var(--Element-text-clr);
+    display:flex;
+    flex-direction:column;
+    border-radius:10px;
+    border-radius:10px;
+    background-color:var(--Element-bg);
+}
+
+.countries__info__flag {
+    /* padding-bottom:; */
+    height:100%;
+    width:100%; 
+    object-fit:cover;
+    border-radius:10px 10px 0px 0px;
+}
+
+.countries__info__name {
+    color:var(--Element-text-clr);
+    padding:1rem;
+    font-family:var(--Main-font);
+    font-size:1rem;
+    font-weight:800;
+    text-align:start;
+    text-transform:capitalize;
+    border:none;
+    background-color: transparent;
+}
+
+.countries__info__stats { 
+    padding:1rem;
+    margin-bottom:2rem;
+    font-size:0.875rem;
+    font-family:var(--Main-font);
+    font-weight:500;
+    list-style-type:none;    
+    text-transform:capitalize;
+}
+
+.stats__value__name {
+    font-weight:700;
+}
+
 @media screen and (min-width:81.25rem) {
     .main__header {
         flex-direction:row;