style.css

/*
  * Author: Al Nahian (alnahian2003)
  * Author URI: https://alnahian2003.github.io
  * Project Name: Flagma
  * Project Type: Country Flags, Country Informations, API Integrations, Intermediate JavaScript Project etc.
*/

/* Primary Variables */
:root {
  --primary-color: #ff3333;
  --dark-color: hsl(0, 100%, 5%);
}

/* Base Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

/* Custom Scrollbar */
#flags-panel::-webkit-scrollbar {
  width: 10px !important;
}

#flags-panel::-webkit-scrollbar-track {
  background: #ffffff30;
  border-radius: 100px;
}

#flags-panel::-webkit-scrollbar-thumb {
  background-color: var(--dark-color);
  outline: 0;
  border-radius: 50px;
}

#flags-panel::-webkit-scrollbar-thumb:hover {
  background-color: #000;
}

::selection {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

body {
  background: linear-gradient(130deg, #ad90c1 0%, rgb(3, 0, 84) 100%),
    linear-gradient(130deg, #09007b 0%, rgba(15, 0, 66, 0) 30%),
    linear-gradient(129.96deg, rgb(255, 47, 47) 10.43%, rgb(0, 4, 96) 92.78%),
    radial-gradient(
      100% 246.94% at 100% 0%,
      rgb(255, 255, 255) 0%,
      rgba(37, 0, 66, 0.8) 100%
    ),
    linear-gradient(121.18deg, rgb(20, 0, 255) 0.45%, rgb(27, 0, 62) 100%),
    linear-gradient(154.03deg, rgb(206, 0, 0) 0%, rgb(255, 0, 61) 74.04%),
    linear-gradient(341.1deg, rgb(178, 91, 186) 7.52%, rgb(16, 0, 119) 77.98%),
    linear-gradient(222.34deg, rgb(169, 0, 0) 12.99%, rgb(0, 255, 224) 87.21%),
    linear-gradient(150.76deg, rgb(183, 213, 0) 15.35%, rgb(34, 0, 170) 89.57%);
  background-blend-mode: overlay, normal, overlay, color-burn, screen, overlay,
    difference, difference, normal;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
}

/* Header Section Styling */
header {
  text-align: center;
  margin: 2rem 1rem;
  font-size: 130%;
}

/* Top Bar Styling */
#topbar {
  height: clamp(40px, 60px, 80px);
  width: 80%;
  background-color: var(--primary-color);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 1.5rem;
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}

/* Main Section Styling */
main {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 80%;
  height: 90vh;
  margin: 0 auto;
  /* overflow: auto; */
}

/* Custom Search Bar */
/*
আপাতত সার্চ ফিল্টার বাদ দিচ্ছি। এই ফাংশনটা শিখে পরবর্তী ভার্শনে ইমপ্লিমেন্ট করা হবে। ইন শা আল্লাহ।
*/
/* #searchInput {
  width: 30%;
  padding: 0.5rem;
  background-color: #ffffff;
  border-radius: 3px;
  color: var(--dark-color);
  border: 0px solid transparent;
  outline: 0px solid transparent;
} */

/* Flags Panel Styling */
#flags-panel {
  padding: 1rem;
  overflow: auto;
  max-height: 100%;
  overflow-x: hidden;
  position: relative;
}

#flags-panel::before {
  content: " ";
  position: fixed;
  left: 0;
  right: 17px;
  height: 3em;
  width: 99%;
  bottom: 0rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.3) 70%
  );
  z-index: 1;
  margin: 0 auto;
}

#flags {
  display: grid;
  grid-gap: 20px;
  /* grid-template-columns: repeat(4, 1fr); */
  justify-content: center;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
}

.flag {
  border-radius: 5px;
  background-color: hsl(0, 0%, 95%);
  color: var(--dark-color);
  transition: 0.3s;
  cursor: pointer;
  text-align: left;
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
}

.flag-image {
  background-color: hsl(0, 0%, 50%);
}

.country-name {
  padding: 10px;
}

.country-code {
  color: var(--primary-color);
  padding: 10px;
  font-weight: bold;
}
.flag span {
  color: var(--dark-color);
  font-weight: normal;
}

.flag:hover {
  background-color: var(--dark-color);
  color: #ffffff;
}

.flag:hover span {
  color: #ffffff;
}

/* Footer Section */

#footer {
  width: 100%;
  background-color: var(--primary-color);
  color: #ffffff;
  margin-top: 2rem;
  padding: 1rem;
}

footer p a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Responsive Codes */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  header{
    font-size: 90%;
  }
  main {
    height: 100vh;
  }
}

/* Extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
  header {
    font-size: 150%;
  }
  #topbar {
    height: 80px;
  }

  .country-name {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
  }
  .country-code {
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
  }

  #flags {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1920px) {
  header {
    font-size: 3rem;
  }

  #topbar {
    height: 100px;
    font-size: 150%;
    padding: 3rem;
  }

  #flags {
    grid-gap: 3rem;
    padding: 2rem;
    grid-template-columns: repeat(4, 1fr);
  }

  .flag {
    border-radius: 1rem;
  }

  .country-name {
    font-size: 2.5rem;
    padding: 2rem;
  }
  .country-code {
    font-size: 2rem;
    padding: 2rem;
    padding-top: 0;
  }

  /* Custom Scrollbar */
  #flags-panel::-webkit-scrollbar {
    width: 20px !important;
  }
}