body{
  background-color: #212a30;
}
.name-title{
  color: white;
  float: left;
  margin-left: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
}
.name-container{
      align-self: center;
}
.main-nav{
  background-color: black;
  height: 3em;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  justify-content: center;
  gap:3em;
  z-index: 10;


}
.nav-list{
  display: flex;
  justify-content: center;
  gap:1em;
  height: 100%;
  margin: 0;
}
.nav-theme{
    color: white;
    font-size: 1em;
    margin-top: auto;
    margin-bottom: auto;
    list-style-type: none;
}


.nav-button{
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.nav-button:hover{
  background-color: white;
  color: black;
}
.nav-link{
  position: relative;
  top: 25%;
  align-self: center;
}


}
li{
  display: inline-block;

}
/* -------------- Title section --------------- */

header{
  width: 100%;
  text-align: center;
  display: block;
  padding-top:5em;
}

.main-title{
  width: 25em;
}
/* ----------------- Top of page --------------------*/
.skill-title{
  color: white;
  text-align: center;
  font-size: 2.5em;
}

/* ------------------------skills container --------------------------*/

.skills-container-box{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  outline: white solid 0.1em;
}
/* ------------------------skills main content --------------------------*/

.main-container{
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  height: 20em;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: ivory;
  padding: 3em 0;
  outline: white solid 0.1em;
  border-top: black solid 0.2em;

}
.sprite-holding-box{
  justify-self: center;
}
.skill-sprite{
  width: 20em;
}
.description-box{
    justify-self: center;
    text-align: center;
    background-color: white;
    padding: 1em;
    width: 70%;
    border: black solid 0.1em;
    height: 80%;
}

/* ------------------------------Skill Channel ------------------------------*/

.skill-sprite-holdingBox{
  justify-self: center;


}


.skill-grid{
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2em;
}

.skill-top-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.skill-middle-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
}
.skill-bottom-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.skill-bottom-right{
  justify-self: center;
}
.skill-bottom-left{
  justify-self: center;
}

/* skill box ##########################################*/
.skill-container{
  width: 100%;
  margin-bottom: 0.5em;
  max-width: 13em;
  max-height: 20em;
}
.skill-box{
  background-color: white;
  width: 100%;
  border: black solid 0.1em;
  margin-top: 0.5em;
}

.name-skill-container{
  height: 3em;
  margin-bottom: 0.5em;
}

.skill-name{
  margin-left: 1em;
  display: inline-block;

}
.icon-pic{
  margin-left: 1em;
  display: inline-block;
  max-height: 2em;
  max-width: 2em;
  margin-top: 0.5em;
}
.stars{
  display: inline-block;
  margin-left: 1em;
}
.checked{
  color: orange;
}
.skill-level{
  margin-left: 0.5em;
  display:  inline-block;
}
.empty-bar{
  width: 90%;
  height: 1em;
  background-color: lightgray;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  outline: black solid 0.1em;
  margin-top: 1em;

}
.fill-bar{
  background-color: #03C03C ;
  height: 1em;
}





/* Framwork ###########################################*/
.framework-box{
  border: black solid 0.1em;
  background-color: white;
  width: 100%;
  height: 2.2em;
  display: flex;
  align-items:  center;
  justify-content: space-around;
}

.framework-pic{
  display: inline-block;
  max-height: 1.5em;
  max-width: 1.5em;
  margin-top: 0.5em;
  width: 1.5em;
  height: 1.5em;

}
.framework-skill{
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;

}