:root{
  --black: #252525;
  --white: #ececec;
  --blue: #28a3d9;
  --orange: #e96228;
  --green: #86c916;
  --dark-blue: #061025;
  --gray: #777;
}

*{
  padding: 0;
  margin: 0;
}

body{
  height: 100vh;
  background-color: var(--white);
  font-family: 'Roboto Slab', serif;
}

h1,h2,h3,h4,h5,h6{font-weight: normal}

option{color: var(--gray)}

a{
  text-decoration: none;
  color: inherit;
}a:hover{text-decoration: underline}

::-webkit-scrollbar {
  width: 9px !important;
}::-webkit-scrollbar-track {
  background: transparent !important;
}::-webkit-scrollbar-thumb {
  background: #b0b0cc !important;
  border-radius: 20px;
}::-webkit-scrollbar-thumb:hover {
  background: #111 !important;
}

.container-100{
  width: 100%;
  height: 100%;
}


/*---------------DISPLAY & POSITION CLASSES*/
/*displays*/
.block{display: block}

.hide{display: none}

.flex{
  display: flex;
  flex-wrap: wrap;
}

.flex-col{flex-direction: column}

.flex-between{justify-content: space-between}

.flex-end{justify-content: flex-end}

/*positions*/
.relative{position: relative}

.absolute{position: absolute}

/*---------------COLOR CLASSES*/
/*bgs*/
.blue-bg{background-color: var(--blue)}

.pink-bg{background-color: #eb347d}

.green-bg{background-color: var(--green)}

.orange-bg{background-color: var(--orange)}

.dark-bg{background-color: var(--black)}

.white-bg{background-color: #fff}

.black-bg{background-color: #000}
/*there is a black (#000) bg corresponding to the footer section*/
/*font color*/
.black{color: var(--black)}

.white{color: var(--white)}

.gray{color: var(--gray)}


/*---------------OTHER CLASSES*/
.padding-05rem{padding: .5rem}

.padding-1rem{padding: 1rem}

.padding-title{padding: 1rem 1.2rem 3.5rem}

.txt-center{text-align: center}

.big-font{font-size: 1.6rem}

.medium-font{font-size: 1.2rem}

.small-font{font-size: .8rem}

/*---------------UNIQUE CLASSES*/
.tag{
  margin: 0 .4rem;
  padding: .1rem .3rem;
  text-decoration: none;
  border-radius: 5px;
  font-family: 'Segoe UI', Verdana, sans-serif;
}

.project-date{
  top: 28px;
  left: 3px;
  font-family: Arial, sans-serif;
}

.project-item{
  transition: all .5s ease;
}.project-item:hover{
  color: var(--white);
  background-color: var(--black);
  text-decoration: none;
  font-size: 1.6rem;
}

.dark-btn{
  display: block;
  color: white;
  border-radius: 5px;
  border: white 2px solid;
  transition: background 1s ease;
  margin: 1.5rem auto .5rem;
  max-width: 20%;
}.dark-btn:hover{background-color: black}

.filter-btn{
  display: block;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  border-radius: 5px;
  border: black 2px solid;
  margin: .5rem auto;
  width: 180px;
  cursor: pointer;
  border: solid 1px var(--black);
  outline: none;
}.filter-btn:focus{
  opacity: .5;
  outline: none;
}

/*-------------------MEDIA QUERIES*/
@media (max-width: 600px) {
  :root{
    font-size: 13px;
  }

  .project-item li{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .tag{
    margin: 0px;
    font-size: .8rem;
  }

  .project-date{
    top: -10px;
    left: 0px;
  }
}