/******************************************
/* CSS
/*******************************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rubik+Glitch+Pop&family=Rubik+Moonrocks&family=Yeseva+One&display=swap');

/* Box Model Hack */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --img-bg: #eee;  /* #c2b9b9;*/
  --nav-blue: #232f3e;
  --primary-font: "Raleway", sans-serif;
  --secondary-font: "Inter", sans-serif;
  --round-font: "Rubik Glitch Pop", system-ui;
}

/******************************************
/* LAYOUT
/*******************************************/
img{
  display: block;
  /* margin: 0 auto; */
  width: 150px;
  height: 200px;
}


/******************************************
/* NAV ITEMS
/*******************************************/



li{
  list-style: none;
}

a{
  text-decoration: none;
  color: #000;
}

input{
  outline: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  width: 100%;
}

/* 
:is(li:first-child, li:last-child) {
border-start-start-radius: 2px;
  // use to select 2 different elements that share the same styles 
} */


.card-wrap{
  width: 300px;
}

.header{
  background: var(--nav-blue);
  
}

nav{
  /* padding: 30px 0; */
  /* width: 100%; */
  display: grid;
  grid-template-columns: 0.8fr 3fr 1.2fr;
  gap: 5px;
  padding: 10px;

}

.logo{
  font-family: var(--round-font);
  font-size: 1.7em;
  /* color: #fff; */
}



nav li:not(.logo){
  font-family: var(--secondary-font);
  font-size: 0.8em;
}

nav ul li > a:not(.second-nav-ul li:first-child a), 
.nav-extra a {
  color: #fff;
}

.first-nav-ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.second-nav-ul {
  /* height: 50px;  */
  display: flex;
  justify-content: center;
  align-items: center;

}

.second-nav-ul li{
 /* margin: 5px; */ 
 /* border: 1px solid #000; */
 padding: 11px ;
}

.second-nav-ul li:first-child{
  background-color: rgb(226, 224, 224);
  border-radius: 5px 0 0 5px;  /*border-radius-top-left && border-radius-bottom-left*/
}

.second-nav-ul li:first-child a{
  color: #000;
  /* filter: blur(8px); */
  opacity: 50%;
}

.second-nav-ul li:nth-child(2){
  /* border: none; */
  width: 89%;
  background: #f8f8f8;
}

.second-nav-ul li:last-child{
  background: rgb(247, 173, 63);
  border-radius: 0 5px 5px 0;   /*border-radius-top-right && border-radius-bottom-right*/
  /* font-size: 1.2em; */
  /* font-weight: 700; */
}
.third-nav-ul {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  /* font-family: var(--secondary-font); */
}

.third-nav-ul strong{
  display: block;
  font-size: 1.1em;
}

.third-nav-ul li:first-child{
  font-size: 1em;
  font-weight: 700;
 
}

.third-nav-ul li:last-child .fa-brands{
  font-size: 2.2em;
  font-weight: 700;
}


.nav-extra {
  background: #2f4e60;    /*#3a4d58*/
  font-family: var(--secondary-font);
  font-size: 0.8em;
  padding: 13px 25px;
  font-weight: 500;
}

.nav-extra ul {
  display: flex;
  align-items: center;
  gap: 13px;

}

#menu-list ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#menu-list ul a{
  color: #000;
}

/******************************************
/* MAIN-CONTENT
/*******************************************/

.wrapper{
  display: grid;
  grid-template-columns: 0.8fr 4fr; 
  margin-top: 20px; 
  /* display: flex; */
  gap: 20px; 
}

.aside{
  border-right: 2px solid rgb(161, 157, 157);
  /* display: flex; */
  /* flex-direction: column; */
  padding: 0 0 0 20px  ;
  font-family: var(--secondary-font);
  height: 800px;
}

hr{
  transform: rotate(90deg);
}


.category {
  margin: 10px;
}

.content-container{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  /* display: grid; */
  /* grid-template-columns: repeat(4, 1fr); */
  /* place-items: center; */
  /* gap: 30px; */
  /* padding: 50px; */
}


.article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* padding: 10px; */
  width: 220px;
  /* height: 300px; */
  border: 1px solid var(--img-bg);
  background: #fff;
  /* padding: 10px ; */
  /* box-shadow:  -1px 1px var(--img-bg),
         -2px 2px var(--img-bg),
         -3px 3px var(--img-bg),
         -4px 4px var(--img-bg),
         -5px 5px var(--img-bg); */
  border-radius: 2%;
  font-family: var(--primary-font);
}


.article a {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.article-items {
  display: flex;
  flex-direction: column;
  padding: 5px;
  gap: 10px;
  margin-bottom: 20px;
}

.article h3{
  font-size: 15px;
}

.article  h3 + span + span{
  display: block;
}

.article_img-div {
  background: var(--img-bg);
  width: 100%;
  height: 110%;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  border-top-right-radius: 2%;
  border-top-left-radius: 2%;
}

.article img{
  object-fit: scale-down;
  mix-blend-mode: multiply;    /* just learnt how to use this to remove background from an image in css*/
}

/* article stars and ratings */

.article_star-div {
  display: flex; 
   align-items: center;
 

}

.article_star-one {
  position: relative;
  font-size: 2rem;
  display: inline-block;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.article_star-one:hover {
  border: 3px solid purple;
  border-radius: 20px;
  overflow: hidden;
}

.article_star-one::before {
  content: "\2605\2605\2605\2605\2605";
  color: rgba(184, 181, 181, 0.533);
}

.article_star-two {
  position: absolute;
  font-size: 2rem;
  top: -3px;
  left: 0;

  height: 30px;
  width: 0;
  overflow: hidden;
}

.article_star-two:hover {
  overflow: hidden;
}

.article_star-two::before {
  content: "\2605\2605\2605\2605\2605";
  color: gold;
}

.fa-chevron-down {
  font-size: 1rem;
}

.article_count{
  font-size: 1.2rem;
  margin-left: 3px;
}

.article_count:hover {
  cursor: pointer;
  border: 3px solid purple;
  border-radius: 20px;
 
}

.article button {
  border: none;
  color: #000;
  background: orange;
  text-align: center;
}

.button-div {
 border: 2px solid orange;
 background: orange;
 border-radius: 50px;
 width: 100px;
 padding: 5px;
}


/**********      Stars start      *********/
#stars {
  min-height: 100%;
  background: #2f4e60;
  color: #fff;
  margin-top: 50rem;
  margin-right: 10rem;
  display: grid;
  place-items: center;
}

.rating {
  width: 100%;
  display: flex;
  background: var(--nav-blue);
  color: #fff;
  align-items: center;
  column-gap: 2rem;
}

.rating__average{
  width: 30%;
  background: var(--nav-blue);
  padding: 1rem;
  border-radius: .8rem;
  text-align: center;
}

.rating__average h1 {
  font-size: 3rem;
}

.rating__average .star-outer {
  position: relative;
  font-size: 2rem;
  display: inline-block;
}

.rating__average .star-outer::before {
  content: "\2605\2605\2605\2605\2605";
  color: #fff8;
}

.rating__average .star-inner {
  position: absolute;
  top: 0;
  left: 0;

  width: 0%;
  overflow: hidden;
}

.rating__average .star-inner::before {
  content: "\2605\2605\2605\2605\2605";
  color: gold;
}

.rating__average p {
  margin-top: .7rem;
  letter-spacing: .1rem;

}

.rating__progress{
  width: 70%;
}

.rating__progress-value {
  height: 2rem;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  column-gap: 1rem;
}

.rating__progress-value .star {

  font-size: 1.2rem;
  color: gold;
}

.rating__progress-value p:last-child {
  width: 10%;
}

.rating__progress .progress {
  flex: 1 1 0;
  height: .5rem;
  border-radius: .5rem;
  background: #ff02; /* #ff0 -> code for yellow colour*/
}

.bar{
  height: 100%;
  background: gold;
  border-radius: .5rem;

}

.bar :nth-child(1){
  width: 80%;
}

/**********      Stars end     *********/




/**********     HOME-PAGE     *********/
.home-article {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  
}
.hidden {
  display: none;
}

/* #image{
  width: 250px;
  height: 250px;
} */
/******************************************
/* ADDITIONAL STYLES
/*******************************************/

@media screen {
  
}