@font-face {
  font-family: Acumin;
  src: url(./Ass_3_easy_assets/AcuminR.otf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Acumin";
}

body {
  /* border: solid green; */
  padding: 2% 2% 2% 2%;
  background-image: url(./Ass_3_easy_assets/background.png);
  background-size: cover;
  background-position: center;
  color: white;
}
nav div {
  /* font-size: large; */
}
nav {
  /* border: solid ; */
  display: flex;
  text-align: end;
  padding: 0 8%;
  justify-content: space-between;
}

nav span:hover {
  color: #b077e3;
  cursor: pointer;
}
header {
  /* border: solid red; */
  padding: 0 8%;
  margin-bottom: 10px;
}
h1 {
  all: unset;
  font-size: x-large;
}
main {
  /* border: solid yellow; */
  height: 95%;
  padding: 0 5% 0 5%;
}

.cardContainer {
  /* border: solid green; */
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5%;
}

.card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  flex-basis: 17%;
  /* border: solid ; */
  width: 20%;
  height: 47%;
  border-radius: 20px;
  /* margin-bottom: 3%; */
  padding: 1.5%;
}

.card .image {
  border: solid;
  width: 100%;
  height: 70%;
  border-radius: 17px;
  overflow: hidden;
}
.card .image:hover {
  border-color: #b077e3;
  cursor: pointer;
  scale: 1.01;
}
.image img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}

.card .textContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: solid; */
  height: 30%;
}

.card .textContent .description {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: solid; */
  padding-top: 8%;
  margin: 1%;
  height: 30%;
}
.textContent .description .itemName {
  display: flex;
  align-items: center;
  height: 100%;
}
.textContent .description .likes {
  /* border: solid; */
  width: 40%;
  display: flex;
  gap: 15%;
  align-items: center;
  justify-content: space-between;
}
.likes .likeIcon img {
  width: 25px;
  filter: invert(100%);
}
.likeIcon img:hover {
  scale: 1.05;
  cursor: pointer;
}

.textContent .capsuleButton {
  border: solid #b077e3;
  font-size: large;
  padding: 0 1rem;
  margin: 0 auto;
  background-color: transparent;
  width: 85%;
  height: 42%;
  color: white;
  /* font-weight: bold; */
  border-radius: 9999px;
}

.textContent .capsuleButton:hover {
  color: #b077e3;
  scale: 1.01;
  cursor: pointer;
}

/* element {
    padding: [top] [right] [bottom] [left];
} */

/* 
To create a capsule button shape, you must use a border-radius value that is equal to or greater than half of the button's height.
## 1. The Standard CSS Method (Recommended)
Using a large pixel value ensures the corners always remain perfectly semi-circular, even if the button width changes dynamically with text.

.capsule-button {
    height: 50px;
    padding: 0 30px;
    border: none;
    background-color: #007bff;
    color: white;

    Core capsule property 
    border-radius: 9999px; 
}

## 2. Percentage Method
If you use percentages, you must apply 50% to get the capsule shape, but this only works perfectly if the button height matches the method layout.

.capsule-button-square {
    width: 60px;
    height: 60px;
    border-radius: 50%;  Generates a perfect circle 
}

Note: Do not use border-radius: 50% on a wide text button, as it will deform into an unpredictable oval shape instead of a capsule.
## 3. Utility Framework Shortcuts
If you are using a modern CSS framework, use these native utility classes:

* Tailwind CSS: rounded-full
* Bootstrap 5: rounded-pill

If you want to refine this design further, let me know:

* Do you want to add a hover effect or an outline border?
* Are you placing an SVG icon inside this capsule button?



 */

/* 
 To vertically center text within an element, choose the method that matches your layout requirements.
## 1. Flexbox Method (Best for Most Layouts)
Apply Flexbox to the container element holding the text. This handles single or multiple lines of text perfectly.

.container {
    display: flex;
    align-items: center;  Vertically centers text 
    height: 100px;        Requires a defined height 
}

## 2. Line-Height Method (Best for Single-Line Buttons)
Set the line-height of the text exactly equal to the height of its container.

.capsule-button {
    height: 50px;
    line-height: 50px;  Must match the height exactly 
}


* Warning: Do not use this for multi-line text, as each new line will break into a 50px gap.

## 3. CSS Grid Method (Easiest Shortcut)
Apply Grid layout properties directly to the text container.

.container {
    display: grid;
    align-content: center; Vertically centers text   
    height: 120px;
}

## 4. Padding Method (Best for Fluid/Dynamic Heights)
Apply equal top and bottom padding to the text block. This keeps text centered naturally without forcing a fixed container height.

.dynamic-box {
    padding-top: 20px;
    padding-bottom: 20px;
}

To implement this on your project, please let me know:

* Is this text going inside the capsule button we just created?
* Is the text a single line or will it wrap into multiple lines?



 
 */

/* .glass-panel {
 Semi-transparent white background fill 
  background: rgba(255, 255, 255, 0.2); 
  
   Smoothly shapes the card container edges 
  border-radius: 16px; 
  
   Creates the core frosted-glass blurring effect 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  
   Subtle highlight border simulating a glass edge 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  
   Adds a soft shadow to elevate the layer 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
}
 */