:root{
  --desaturated-dark-cyan: hsl(180, 29%, 50%);
  --background-color: hsl(180, 52%, 96%);
  --filter-tablets-color: hsl(180, 31%, 95%);
  --dark-grayish-cyan: hsl(180, 8%, 52%);
  --very-dark-grayish-cyan: hsl(180, 14%, 20%);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  font-family: 'League Spartan', sans-serif;
  font-size: 15px;
  background-color: var(--background-color);
}

html{
  height: 100%;
  width: 100%;
}

header{
  background-image: url('./images/bg-header-mobile.svg');
  background-color: var(--desaturated-dark-cyan);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 13vh;
}

main .inactive{
  display: none;
}

/********************* MAIN */
main{
  padding: 25px;
  position: relative;
  top: -60px;
}

.tags-container {
  padding: 20px 20px 5px;
  border-radius: 8px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  -webkit-box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  -moz-box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  max-width: 1300px;
  margin: 0 auto;
}

.tags-container .tags-section{
  margin-inline-end: 5px;
}

.tags-container .tag{
  background-color: var(--filter-tablets-color);
  padding: 0 0 0 10px;
  margin: 0 15px 15px 0;
  font-weight: 700;
  border-radius: 5px;
  color: var(--desaturated-dark-cyan);
  display: inline-flex;
  align-items: center;
  
}

.tag span{
  margin-inline-end: 10px;
}

.tag figure{
  background-color: var(--desaturated-dark-cyan);
  padding: 10px;
  border-radius: 0 5px 5px 0;
}
.tag figure:hover{
  cursor: pointer;
  background-color: var(--very-dark-grayish-cyan);
}

.tags-container .btn-clear{
  align-self: center;
  text-decoration: none;
  color: var(--dark-grayish-cyan);
}

.tags-container .btn-clear:hover{
  text-decoration: underline;
  cursor: pointer;
}

/** cards */
main article{
  margin: 50px auto;
  padding: 40px 20px 20px;
  background-color: white;
  position: relative;
  border-radius: 8px;
  box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  -webkit-box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  -moz-box-shadow: 2px 13px 60px -3px rgba(43, 58, 58, 0.2);
  max-width: 1300px;
}
main article:hover{
  border-left-width: 5px;
  border-left-color: var(--desaturated-dark-cyan);
  border-left-style: solid;
}

article img{
  position: absolute;
  top: -25px;
  width: 50px;
  height: 50px;
}
article .card-header{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-block-end: 10px;
}
article h3{
  color: var(--desaturated-dark-cyan);
  margin: 0 15px 0 0;
}
article .card-header p{
  margin: 0 5px;
  padding: 11px 8px 8px 8px;
  vertical-align: middle;
  border-radius: 15px;
  color: white;
}
article .card-header .new{
  background-color: var(--desaturated-dark-cyan);
}
article .card-header .featured{
  background-color: var(--very-dark-grayish-cyan);
}
article h2{
  color: var(--very-dark-grayish-cyan);
  margin-block-end: 15px;
}
article h2:hover{
  cursor: pointer;
  color: var(--desaturated-dark-cyan)
}
article .extra-info{
  color: var(--dark-grayish-cyan);
  margin-block-end: 15px;
}

article .card-tags{
  margin-block-start: 15px;
}
article .card-tags .actived-filter{
  background-color: var(--desaturated-dark-cyan);
  color: var(--filter-tablets-color);
}
article .card-tags p{
  background-color: var(--filter-tablets-color);
  color: var(--desaturated-dark-cyan);
  font-weight: 700;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  margin: 0 15px 15px 0;
  cursor: pointer;
}
article .card-tags p:hover{
  background-color: var(--desaturated-dark-cyan);
  color: var(--filter-tablets-color);
}

/* ********************************************************** RESPONSIVE DESIGN */

@media (min-width: 650px) {
  main article hr{
    display: none;
  }
  main article{
    display: flex;
    justify-content: space-between;
  }
  article .card-tags{
    margin-inline-start: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: end;
  }
}
@media (min-width: 900px) {
  article img{
    position: relative;
    top: 0;
    width: 90px;
    height: 90px;
  }
  article .card-main-2{
    margin-inline-start: 20px;
  }
  article .card-main{
    display: flex;
    align-items: center;
  }
  header{
    background-image: url('./images/bg-header-desktop.svg');
  }
}
@media (min-width: 1000px) {
  .tags-container{
    padding: 30px 30px 15px;
  }
  main article{
    padding: 50px 30px 30px;
  }
  main{
    padding: 25px 50px;
  }
}
@media (min-width: 1200px) {
  main{
    padding: 25px 100px; 
  }
  body{
    font-size: 16px;
  }
}