.flex-wrapper {
  display: flex;
  flex-flow: row wrap;
  flex-wrap: wrap;
  justify-content: center;
}

.single-chart {
  min-width: 15%;
  max-width: 15%;
  justify-content: center;
}

.github {
  float: right;
  margin-top: 15px;
}

.circular-chart {
  display: block;
  text-anchor: middle;
  font-size: medium;
}

.circle-bg {
  fill: none;
  stroke: #0f111a;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 3s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.circle {
  stroke: #fff;
}
.skill-label {
  text-transform: uppercase;
  fill: #fff;
  font-weight: 600;
  overflow-wrap: break-word;
  text-align: center;
  /* font-size: 30%; */
}

.percentage {
  fill: #fff;
  font-weight: 600;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 20%;
}

.view-all-button {
  margin: auto;
  display: flex;
  padding: 20px 0px 20px 0px;
  justify-content: center;
}

.read-time {
  float: right;
}

.lunrsearchresult .title {
  color: #ffffff;
  font-weight: bold;
}
.lunrsearchresult .url {
  color: silver;
  padding-bottom: 20px;
}
.lunrsearchresult a {
  display: block;
  color: #777;
}
.lunrsearchresult a:hover,
.lunrsearchresult a:focus {
  text-decoration: none !important;
}
.lunrsearchresult a:hover .title {
  text-decoration: none !important;
  padding-bottom: 10px !important;
}

.extra-tiles {
  width: 25% !important;
  height: 15em !important;
  min-height: auto !important;
}

.embed-youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.post-tags {
  display: none;
}
.post-tags:first-of-type {
  display: block;
  padding-top: 20px !important;
  margin-bottom: 20px;
  float: right;
}
.col_con {
  display: none;
}
.col_head {
  width: 100%;
}
#email-error,
#name-error,
#message-error {
  font-size: 60%;
  padding-left: 10px;
  padding-top: 10px;
}

/* fix table header text alignment */
.dataframe thead th {
  text-align: left !important;
}

.source {
  padding-left: 1em;
  float: left;
  position: fixed;
  bottom: 20px;
  z-index: 99999;
}
/* scrollbars */
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background: #0f111a;
}
::-webkit-scrollbar-thumb {
  background: #181b26;
}
::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1;
}

@media only screen and (max-width: 736px) {
  .single-chart {
    max-width: 25%;
    min-width: 25%;
    justify-content: center;
  }
  .post-tags {
    display: block;
    float: none;
    padding-bottom: 20px;
  }
  .post-tags:first-of-type {
    display: none;
  }
  .read-time {
    text-align: left;
    float: none;
    margin-bottom: -20px;
  }
  .social-icons {
    margin-top: -10px;
    width: 100%;
  }
  .github {
    float: none;
  }
  .skill-label {
    font-size: 60%;
  }
  .read-fork {
    display: none;
  }
}