/* Using https://colorhunt.co/palette/273466 color palette */
/* Using https://colorhunt.co/palette/00000052057b892cdcbc6ff1 color palette for graphs*/
/* General CSS */
body {
  margin: 0;
  background-color: #d8e3e7;
  color: #132c33;
  font-family: "Roboto-medium", sans-serif;
  text-align: center;
  font-size: 1.2rem;
}

section {
  padding: 70px 0px 10px;
}

.section-title {
  font-family: "Permanent Marker", cursive;
  font-size: 3rem;
  margin-bottom: 1.2rem;
}

.section-writeup {
  margin-bottom: 1.5rem;
}

/* Navbar */
.navbar {
  background-color: #51c4d3;
}

.nav-item {
  padding: 0 1rem;
}

.nav-link {
  font-size: 1.25rem;
  font-weight: bolder;
  color: #126e82;
}

.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus {
  color: #132c33;
}

/* Home */
.home {
  text-align: center;
  font-size: 1.5rem;
}

#home-side-images{
  width: 32%;
}

#home-main-title{
  width: 36%;
}

.floating-left-image {
  max-width: 18rem;
}

.title {
  font-size: 5.5rem;
  font-family: "Permanent Marker", cursive;
}

.floating-right-image {
  max-width: 24rem;
  transform: rotate(25deg);
}

.title-image {
  max-width: 67.35rem;
  padding-top: 0.5%;
}

/* About */
.about-writeup{
  /* max-width of tablets */
  max-width:970px;
  margin: auto;
}

/* Skills */
.chart-container {
  width: 320px;
  height: 400px;
  margin: auto;
}

.chart {
  transform: rotate(90deg);
}

.skill-label {
  position: relative;
  left: 10.2rem;
  font-size: 0.8rem;
  width: 190px;
  text-align: left;
  visibility: hidden;
}

.radial-bar{
  visibility: hidden;
  fill: none;
  stroke-width: 3;
}


.skill-cover {
  position: relative;
  background-color: #51c4d3;
  width: 320px;
  height: 320px;
  margin: auto;
  top:-379px;
  border-radius: 100%;
  z-index: 1;
}

.skill-cover-fourlabels{
  top:-395px;
}

.skillcategory-label{
  margin: auto;
  padding-top: 15px;
}

.skillcategory-image{
  width: 320px;
  height: 320px;
}

.chart-container:hover>.chart>.radial-bar, .chart-container:active>.chart>.radial-bar {
  visibility: visible;
  animation: radial-bar-fill 1s reverse;
}

.chart-container:hover>.skill-label, .chart-container:active>.skill-label {
  visibility: visible;
  animation: text-appear 2s;
}

.chart-container:hover>.skill-cover{
  visibility: hidden;
}

.four-skills-label {
  top: -6.2rem;
}

.three-skills-label {
  top: -5rem;
}

.skill-four {
  color: #000000;
  stroke: #000000;
}

.skill-three {
  color: #52057B;
  stroke: #52057B;
}

.skill-two {
  color: #892CDC;
  stroke: #892CDC;
}

.skill-one {
  color: #BC6FF1;
  stroke: #BC6FF1;
}

/* Publications */
.publications-writeup{
  /* max-width of tablets */
  max-width:970px;
  margin: auto;
}

/* Contact Me */
.btn-light {
  background-color: #51c4d3;
  border: 0;
  font-size: 1.25rem;
  font-weight: bolder;
  color: #126e82;
  margin-bottom: 1rem;
}

.btn-light:hover, .btn-light:focus {
  background-color: #51c4d3;
  color: #132c33;
}

/* Footer */
footer{
  text-align: left;
}

/* Tablets */
@media (max-width:970px) and (min-width:768px) {
  :root {
    font-size: 75%;
  }
}

/* Mobile */
@media (max-width:768px) {
  .home-floating-image {
    display: none;
  }

  #home-side-images {
    width: 0;
    padding: 0;
  }

  #home-main-title{
    width: 100%;
  }
}

/* Keyframes */
@keyframes radial-bar-fill {
  to {
    stroke-dasharray: 0 126;
  }
}

@keyframes text-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}