@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');

:root
{
  --lightpurple: #EDE9FE;
  --purple-1: #DDD6FE;
  --purple: #A78BFA;
  --purple-2: #C4B5FD;
  --green: #6EE7B7;
  --lightgreen: #ECFDF5;
  --red: #EF4444;
  --lightred: #FECACA;
  --lightpink: #FBCFE8;
  --pink:  #DB2777;
  font-family: 'Playfair Display', serif;
}

body
{
  background-color: var(--lightpurple);
  display: grid;
  grid-template-areas:
  "nav header"
  "nav main"
  "nav main";
  grid-template-rows: 6.25rem 2fr;
  grid-template-columns: 14.37rem 2fr;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

/*Header*/
body > header 
{
  grid-area: header;
  display: flex;
  justify-content: center;
  min-width: max-content;
  background-color: var(--lightpurple);
  margin: 0.5rem 15rem 1rem 0rem;
}

.header-navigation ul 
{
  display: flex;
}

.header-navigation ul li
{
  padding: 1rem;
  list-style: none;
}

.header-navigation ul li a
{
  color: black;
  font-size: larger;
  transition: all 0.2s linear;
  list-style: none;
  text-decoration: none;
}

.header-navigation ul li a:hover
{
  padding: 0.5rem;
  background-color: var(--purple-2);
  border-radius: 0.5rem;
  margin: 1rem 0;
}

/*name*/
.logo 
{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.name
{
  font-size: large;
  font-weight: 300;
}
.logo img 
{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}


/*Component navigation*/
body > nav
{
  grid-area: nav;
  height: 100%;
  width: 10%;
  position: fixed;
  z-index: 1;
  padding: 1rem 1rem 0 2rem;
}

body > main {
  grid-area: main;
  padding: 1rem 10% 0;
  background-color: var(--body-color);
}

.component-nav ul
{
  padding: 30px 0;
}

.component-nav ul li
{
  padding: 0.3rem;
  list-style: none;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.component-nav ul li:hover
{
  padding: 0.5rem;
  background-color: var(--purple-2);
  border-radius: 0.5rem;
}

.component-nav ul li a
{
  width: 100%;
  color: black;
  text-decoration: none;
}

/*Container*/
.container 
{
    padding: 1rem 2rem;
    margin: 1rem 2rem;
    background-color: var(--lightpurple);
    border: 3px solid var(--purple);
    border-radius: 1rem;
}

/*Avatar*/
.avatar-extra-small
{
  width: 2rem;
  height: auto;
  border-radius: 100rem;
  padding: 0.5rem;
}
.avatar-small 
{
    width: 3rem;
    height: auto;
    border-radius: 100rem;
    padding: 0.5rem;
}
.avatar-medium 
{
    width: 4rem;
    height: auto;
    border-radius: 100rem;
    padding: 0.5rem;
}
.avatar-large 
{
    width: 5rem;
    height: auto;
    border-radius: 100rem;
    padding: 0.5rem;
}
.avatar-extra-large
{
  width: 6rem;
  height: auto;
  border-radius: 100rem;
  padding: 0.5rem;
}

/*Badges*/

.badge-profile
{
  position: relative;
  width: 3rem;
  height: auto;
}

.badge-profile img
{
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.badge-red
{
  position: absolute;
  left: 2rem;
  bottom: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--red);
  border-radius: 50%;
}

.primary
{
  background-color: var(--lightgreen);
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
}
.primary:hover
{
  background-color: var(--green);
}

.secondary
{
  background-color: var(--lightpink);
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
}
.secondary:hover
{
  background-color: var(--pink);
}

/*Alerts*/
.danger
{
  background-color: var(--red);
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0.5rem;
}

.success
{
  background-color: var(--green);
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0.5rem;
}

.info
{
  background-color: var(--lightred);
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0.5rem;
}

.warning
{
  background-color: var(--pink);
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0.5rem;
}

/*Buttons*/
.btn-primary
{
  margin: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  background-color: var(--lightgreen);
  border-radius: 0.5rem;
}

.btn-primary:hover
{
  background-color: var(--green);
}

.btn-secondary
{
  margin: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  background-color: var(--lightpink);
  border-radius: 0.5rem;
}

.btn-secondary:hover
{
  background-color: var(--pink);
}

.btn-link
{
  margin: 0.5rem;
  padding: 1rem;
  color: green;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 0.5rem;
}


.btn-icon
{
  margin: 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}


.fa-trash
{
  margin: 0.3rem;
  /*padding: 0.2rem;*/
}

.fa-close
{
  margin: 0.3rem;
  /*padding: 0.2rem;*/
}

.btn-action
{
  margin: 0.5rem;
  padding: 1rem;
  background-color: var(--green);
  cursor: pointer;
  transition: 0.4s ease;
  border: 2px solid black;
  border-radius: 0.5rem;
}

.btn-action:hover
{
  background-color: var(--red);
}

/*Cards*/
.card
{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid black;
    margin: 1rem;
    max-width: 9.3rem;
    max-height: 9.3rem;
}

.card-overlay
{
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid black;
  margin: 1rem;
  max-width: 9.3rem;
  max-height: 9.3rem;
  position: relative;
}

.card-overlay > .img-overlay
{
  opacity: 0.7;
  
}
.text-overlay
{
  position: absolute;
  top: 2rem;
  left: 4rem;
}
.row-cards
{
  display: flex;
  flex-wrap: wrap;
}
.card-badge
{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid black;
    margin: 1rem;
    max-width: 9.3rem;
    position: relative;
}
.badge-p
{
  background-color: darkcyan;
  position: absolute;
  font-size: 1rem;
  font-weight: 200;
  padding: 0.2rem 0.2rem;
  top: 1rem;
  width: 80px;
  padding: 0.3rem;
  clip-path: polygon(0% 0%, 71% 0%, 53% 50%, 69% 97%, 0 97%);

}
.btn-shop
{
  background-color: var(--green);
  padding: 0.5rem;
}

.btn-shop:hover
{
  background-color: var(--lightgreen);
}
.card-dismiss
{
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid black;
  margin: 1rem;
  max-width: 9.3rem;
  position: relative;
}
.dismiss
{
  position: absolute;
  top: 1rem;
  right: 1rem; 
  background-color: var(--red);
}

/*Images*/
.row-images
{
  display: flex;
  flex-wrap: wrap;
}
.responsive-img
{
  width: 100%;
  max-width: 12.5rem;
  height: 12.5rem;
  margin: 1rem;
}

.round-img
{
  width: 100%;
  max-width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  margin: 1rem;
}

/*Input*/
.input
{
  position: relative;
}
.input-textarea
{
  font-size: 0.8rem;
  outline: none;
  width: 100%;
  resize: none;
  padding: 1rem 2rem;
  margin: 1rem;
  border: 2px solid black;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 18.7rem;
}

.input-text-error
{
  border: 2px solid var(--red);
  font-size: 0.8rem;
  width: 100%;
  resize: none;
  padding: 1rem 2rem;
  margin: 1rem;
  border: 2px solid var(--red);
  border-radius: 0.5rem;
  width: 100%;
  max-width: 18.7rem;
}

/*Lists*/
.spaced-list
{
  list-style: none;
  padding: 1rem;
  margin: 0;
  background-color: var(--purple-2);
  border: 0.5px solid black;
  border-radius: 0.5rem;
}

.stacked-list
{
  list-style: none;
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--purple-2);
  border: 1px solid black;
  border-radius: 0.5rem;
}

/*Toast*/
.toast
{
  padding: 1rem;
  max-width: fit-content;
  border-radius: 0.6rem;
}

.toast-warning
{
  padding: 1rem;
  background-color: white;
  color: var(--red);
  border-radius: 0.5rem;
}

/**Navigation**/
.nav
{
  justify-content: space-between;
  border: 1px solid black;
  background-color: var(--purple-2);
  color: black;
  border-radius: 0.5rem;
}

.nav-ul
{
  display: flex;
  list-style-type: none;
}

.nav-list-item
{
  padding: 0.5rem;
}

.nav-list-item > a 
{
  font-size: large;
  position: relative;
  display: inline;
  color: #000;
  padding: 1rem;
}

.emo
{
  position: absolute;
  left: 64rem;
}

/*Rating*/
.checked
{
  color: orange;
}

/*Typography*/
.h1
{
  font-size: 2.5rem;
}
.h2
{
  font-size: 2rem;
}
.h3
{
  font-size: 1.5rem;
}
.h4
{
  font-size: 1rem;
}
.striked
{
  text-decoration: line-through;
}
.underlined
{
  text-decoration: underline;
}


@media(max-width: 998px)
{
    html{
        font-size: 55%;
    }
}


@media(max-width: 768px)
{
    html{
        font-size: 45%;
    }
}