div.MainDiv{
  border-radius: 1.5vw;

  position: relative;
  height: 25vw;
  width: 50vw;
  align-self: center;
  display: grid;
  justify-content: normal;


}

div.Logo {
  z-index: 1;
  background-color: #ffcd00;
  width: 33.33%;
  height: 200%;
  justify-self: flex-end;
  margin-right: 4.5vw;
  transform: skewX(-20deg);
  display: inline-grid;

}

img.Logo{
  position: absolute;
  transform: skewX(20deg);
  height: 80%;
  justify-self: flex-end;
  align-self: center;
  right: -2.5%;

}

div.Binfo{
  position: relative;
  overflow: hidden;
  border-radius: 1.5vw;
  background-color: #080808;
  width: 70%;
  height: 200%;
  justify-self: flex-start;
  align-self: flex-end;
}
div.SocialMedia{
  height: 20%;
  width: 100%;
  position: relative;
  justify-items: center;


}
div.Buttons{
  z-index: 2;
  transform: skewX(-20deg);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  height: 100%;
  width: 17%;
  margin-right: -4.5vw;
  justify-content: space-between;
}
p.Button{
  height: 3vw;
  transform: skewX(20deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3vw;
}
p.Button:hover{
  transform: skewX(20deg);
  display: flex;
  align-items: center;
  justify-content: center;

}

button.Button{
  font-family: "Agency FB";
  font-weight: bold;
  font-size: 1.8vw;
  flex-direction: column;
  background-color: #ffcd00;
  border: none;
  color: #080808;
  text-align: center;
  height: 15%;
  box-shadow: 0.3vw 0.3vw #ffc200;

}
button.Button:hover{
  box-shadow: none;
  border-radius: 0.1vw;
  border: 0.3vw solid #ffcd00;
  color: #ffcd00;
  background-color: transparent;
  transform: translate3d(0.3vw, 0.3vw, 0vw);
  transition-property: background-color, transform, box-shadow, color;
  transition-duration: 1s;
}
/*button.Button:focus{
  background-color: white;
  color: #ffcd00;
  box-shadow: none;
  border: 0.3vw solid #ffcd00;
  transform: skewX(20deg) translateX(-49vw);

}*/


.SocialMediaI, .SocialMediaY, .SocialMediaL, .SocialMediaT, .SocialMediaTw, .SocialMediaD{
  position: absolute;
  display: flex;
  width: 3vw;
  top: 1vw;
}
.SocialMediaI{
  left: 1vw;
}
.SocialMediaT{
  left: 5vw;
}
.SocialMediaL{
  left: 9vw;
}
.SocialMediaD{
  left: 13vw;
}
.SocialMediaY{
  left: 17vw;
}
.SocialMediaTw{
  left: 21vw;
}

div.Avatar{
  border-radius: 25px;
  height: 80%;
  width: 100%;
  justify-content: center;

}

p.Tittle{
  font-family: "Comic Sans MS";
  font-size: 1vw;
  color: white;
  position: absolute;
  display: flex;
  left: 23%;
  top:60%;

}

p.Name{
  font-family: "Agency FB";
  font-size: 2.5vw;
  color: white;
  position: absolute;
  display: flex;
  left: 15%;
  top: 42%;
}
svg.AvatarBorder{
  position: absolute;
}
img.AvatarBorder{

  width: 32vw;
  position: absolute;
  bottom: -0.4vw;
  left: -2vw;
}
img.Avatar{
  border: 0.5vw solid #0c0c0c;
  width: 10vw;
  border-radius: 100%;
  position: absolute;
  display: flex;
  top: 10%;
  left: 20%;
}

body {
  background-color: white;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;

}
div.PartIcon{
  position: absolute;
  height: 25vw;
  width: 3vw;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  justify-content: space-between;
  margin-right: -3vw;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
svg.AboutMeIcon{
  fill: #080808;
}
svg.AboutMeIcon:hover{
  fill: #ffcd00;
}
svg.MyJourneyIcon{
  fill: #080808;
  pointer-events: all;
}

svg.MyJourneyIcon{
  fill: #080808;
}
svg.MyJourneyIcon:hover{
  fill: #ffcd00;
}
svg.SkillsIcon{
  fill: #080808;
}
svg.SkillsIcon:hover{
  fill: #ffcd00;
}
svg.ExprienceIcon{
  fill: #080808;
}
svg.ExprienceIcon:hover{
  fill: #ffcd00;
}
svg.EducationIcon{
  fill: #080808;
}
svg.EducationIcon:hover{
  fill: #ffcd00;
}
svg.LanguagesIcon{
  fill: #080808;
}
svg.LanguagesIcon:hover{
  fill: #ffcd00;
}
p.IconText{
  font-family: "Agency FB";

}
div.IconTextPart{
  font-size: 1.1vw;
  font-weight: bold;
  position: absolute;
  height: 25vw;
  width: 3vw;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  justify-content: space-between;
  z-index: 1;
  margin-right: -7vw;
  visibility: hidden;
  opacity: 0;
}
p.IconText{
  color: #080808;
}
p.AboutMainText{
  color: #080808;
  font-family: "Comic Sans MS";

}
div.AboutMainDiv{
  font-weight: bold;
  position: absolute;
  font-size: 1.4vw;
  display: flex;
  width: 30vw;
  height: 20vw;
  justify-self: center;
  margin-left: 15vw;
  margin-top: 3vw;
}

hr.AboutMainText{
  margin-top: 3vw;
  margin-left: 15vw;
  display: flex;
  justify-self: center;
  position: absolute;
  width: 6vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
}
hr.IntrestIconHR{
  display: flex;
  justify-self: flex-start;
  position: absolute;
  width: 6vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
  margin-left: 3vw;
  margin-top: 9vw;
}
p.IntrestIconHR{
  font-weight: bold;
  font-family: "Agency FB";
  display: flex;
  justify-self: flex-start;
  position: absolute;
  font-size: 1.8vw;
  margin-left: 3.2vw;
  margin-top: 7vw;
}


div.IntrestIcon{
  width: 9vw;
  height: 15vw;
  position: absolute;
  margin-left: 2vw;
  margin-top: 10vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-end;
}
img.IntrestIconArt, .IntrestIconMusic, .IntrestIconGame, .IntrestIconMovie, .IntrestIconBook, .IntrestIconTravel
{
  position: absolute;
  display: flex;
  width: 4vw;
  height: 4vw;
}
img.IntrestIconMovie, .IntrestIconTravel, .IntrestIconBook{
  align-self: flex-end;
  justify-self: flex-end;
}
img.IntrestIconArt, .IntrestIconMusic, .IntrestIconGame{
  align-self: flex-start;
  justify-self: flex-end;
}
img.IntrestIconMusic, .IntrestIconBook{
  margin-top: 5vw;
}
img.IntrestIconGame, .IntrestIconTravel{
  margin-top: 10vw;
}
div.AboutContent{
  position: absolute;
  opacity: 0%;
  transition: 3s;
}
span.YellowText{
  color: #ffcd00;
}
div.JourneyContent{
  position: absolute;
  visibility: hidden;
  opacity: 0%;
  transition: 3s;
}
div.JourneyDivText{
  position: absolute;
  width: 10vw;
  height: 15vw;
  margin-left: 1.5vw;
  margin-top: 6.5vw;
}
p.JourneyText{
  position: absolute;
  color: #080808;
  font-family: "Comic Sans MS";
  font-size: 1.4vw;
  font-weight: bold;
}
div.JourneyPost{
  margin-left: 12.3vw;
  margin-top: 1.5vw;
  width: 37vw;
  height: 22vw;
  overflow: hidden;
  overflow-y: scroll ;
  scrollbar-color:  #ffcd00 white ;
}
div.Post1{
  display: flex;
  flex-direction: row;
  width: 35vw;
  height: 17vw;
  margin-top: 1.5vw;
}
div.PostImageLeft{
  width: 17vw;
  height: 17vw;
}
img.Post{
  width: 17vw;
  height: 17vw;
  border: 0.2vw solid #ffcd00 ;
  border-radius: 0.1vw;
}
div.PostTextRight{
  margin-left: 1vw;
  font-size: 0.84vw;
  width: 17vw;
  height: 17vw;
  font-weight: bold;
  font-family: "Comic Sans MS";

}
div.Post2{
  display: flex;
  flex-direction: row;
  margin-top: 2vw;
  width: 35vw;
  height: 17vw;
}
div.PostImageRight{
  margin-left: 1vw;
  width: 17vw;
  height: 17vw;
}
div.PostTextLeft{
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 0.84vw;
  width: 17vw;
  height: 17vw;

}
div.SkillContent{
  visibility: hidden;
  position: absolute;
  opacity: 0;
  transition: 3s;
  margin-top: 5.5vw;
  margin-left: 2vw;
  width: 10vw;
  height: 18vw;
}
div.SkillText{
  font-family: "Comic Sans MS";
  position: relative;
  width: 10vw;
  height: 10vw;
  margin-top: -1vw;

}
p.SkillText{
  font-size: 1.4vw;
  color: #080808;
  font-weight: bold;
}
p.SkillText2{
  color: #080808;
  font-weight: bold;
  margin-top: -0.5vw;
  font-size: 0.84vw;
}
div.SkillText2{
  background-color: #f4f4f4;
  margin-top: -1vw;
  padding: 0.8vw;
  height: 10.7vw;
  width: 10vw;
  border-radius: 0.5vw;
}
span.Agency{
  font-family: "Agency FB";
  font-size: 1.5vw;
  color: #ffcd00;
}
div.ExperienceContent{
  position: absolute;
}
div.EducationContent{
  position: absolute;
}
div.LanguagesContent{
  visibility: hidden;
  position: absolute;
}
span.w{
  font-size: 0.8vw;
}
div.Skills{
  position: absolute;
  width: 34.5vw;
  height: 20vw;
  margin-left: 12.5vw;
  margin-top: -11.5vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
div.SkillDiv{
  position: absolute;
  display: flex;
  align-self: flex-end;
  width: 34.5vw;
  height: 14vw;
  justify-content: flex-end;
}
div.BCP{
  position: relative;
  height: 5vw;
  width: 5vw;
  border-radius: 50%;
  background-color: #f4f4f4;
  z-index: -2;
  display: flex;
  justify-content: center;
}
circle.CP{
  stroke-width: 0.4vw;
  stroke: #eaeaea;
  fill: none;
  transform: translate(0.2vw, 0.2vw);
}
circle.CPM{
  stroke-width: 0.3vw;
  stroke: #ffcd00;
  fill: none;
  filter: drop-shadow(0vw 0vw 0.1vw #ff7900);
  transform: translate(0.2vw, 0.2vw);
  stroke-dasharray: 274;
  animation: anim 2s linear forwards;
}
circle#CPM1{
  stroke-dashoffset: 110;
}
circle#CPM2{
  stroke-dashoffset: 180;
}
circle#CPM3{
  stroke-dashoffset: 70;
}
circle#CPM4{
  stroke-dashoffset: 200;
}
circle#CPM5{
  stroke-dashoffset: 180;
}
p.BCPT{
  color: white;
  position: absolute;
  font-family: "Comic Sans MS";
  font-size: 4vw;
  transform: translate(0.4vw, -4.5vw);
  z-index: -1;
}
p.BCPTP{
  color: #080808;
  position: absolute;
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 1.9vw;
  transform: translate(0.0vw, -0.8vw);
  z-index: -1;
}
circle.CPWave1{
  transform: translate(0.2vw, 0.2vw);
  color: transparent;
  fill: none;
}
circle.CPWave2{
  transform: translate(0.2vw, 0.2vw);
  color: #ffcd00;
  fill: #FFCD00;
  animation: animate 4s ease-in-out;
}
div.CPW {
  position: absolute;
  border-radius: 50%;
  margin-top: -0.2vw;
  height: 5vw;
  width: 5vw;
  z-index: -1;
  overflow: hidden;
}
svg.Waves{
  width: 5vw;
  position: relative;
  margin-top: 2.2vw;
  animation: Waves 2s infinite ease-in-out;
}
svg.Waves1{
  width: 5vw;
  position: absolute;
  margin-top: 2.2vw;
  animation: Waves1 2s infinite ease-in-out;
}
svg.Wavesb{
  width: 5vw;
  position: absolute;
  margin-top: -3vw;
  margin-left: -5vw;
  animation: Wavesb 2s infinite ease-in-out;
  z-index: -2;
}
svg.Wavesb1{
  width: 5vw;
  position: absolute;
  margin-top: -3vw;
  animation: Wavesb1 2s infinite ease-in-out;
  z-index: -2;
}
p.CPWText{
  position: absolute;
  font-family: "Agency FB";
  font-size: 1.3vw;
  font-weight: bold;
  margin-top: 5.5vw;
}

@keyframes Waves1 {
  100%{
    transform: translateX(-5vw);
  }
}
@keyframes Waves {
  100%{
    transform: translateX(-5vw);
  }
}
@keyframes Wavesb1 {
  100%{
    transform: translateX(5vw);
  }
}
@keyframes Wavesb {
  100%{
    transform: translateX(5vw);
  }
}

@keyframes animate {
  0%,100%{
    clip-path: polygon();
  }
}
p.SoftwearText{
  font-family: "Agency FB";
  color: #080808;
  position: absolute;
  font-weight: bold;
  font-size: 1.8vw;
  margin-top: -14.5vw;
  margin-left: 12.5vw;
}
hr.SoftwearHR{
  margin-top: -12.5vw;
  margin-left: 12.5vw;
  display: flex;
  justify-self: center;
  position: absolute;
  width: 5.5vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
}
div.FamiliarWith{
  padding: 0.5vw;
  width: 10vw;
  height: 10.7vw;
  border: solid #ffc200;
  border-radius: 0.5vw;
  align-self: flex-end;
  justify-self: flex-start;

}
hr.FamiliarWithHR{
  margin-top: 1.5vw;
  position: absolute;
  width: 6.5vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
}
p.FamiliarWithTitle{
  margin-top: -0.3vw;
  position: absolute;
  font-family: "Agency FB";
  font-size: 1.5vw;
  font-weight: bold;
}
div.FamiliarWithText{
  position: absolute;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-color: #ffcd00 white;
  margin-top: 2vw;
  width: 10vw;
  height: 8.7vw;
}
p.FamiliarWithText{
  font-family: "comic sans Ms";
}
div.SkillDivT{
  height: 2vw;
  width: 20vw;
  margin-right: -20vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 2vw;
  margin-right: 2.7vw;
}
div.SkillDivM{
  width: 21vw;
  height: 8vw;
  margin-right: 12vw;
  display: flex;
  align-self: flex-end;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
    overflow-y: hidden;
  overflow-y: hidden;
  overflow-y: scroll;
  scrollbar-color: #ffcd00 white;
  scroll-padding-left: 10vw;
  position: absolute;
  padding: 1vw;
}
div.KnowledgeDiv{
  height: 12vw;
  width: 5vw;
}
div.TechnologiesDiv{
  height: 12vw;
  width: 5vw;

}
div.InterpersonalDiv{
  height: 12vw;
  width: 5vw;

}
hr.KnowledgeHR{
  justify-self: center;
  margin-top: -2vw;
  width: 4.5vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
}
p.KnowledgeP{
  font-family: "Agency FB";
  font-weight: bold;
  font-size: 1.7vw;
  margin-top: -0.4vw;
}
span.LilP{
  font-size: 1vw;
}
span.LilP2{
  font-size: 0.8vw;
}
span.LilP3{
  font-size: 0.7vw;
}
div.InterDiv{
  margin-top: 0.5vw;
  padding: 0.2vw;
  background-color: #f4f4f4;
  border-radius: 0.5vw;
}
p.InterDivT{
  font-family: "Agency FB";
  font-weight: bold;
  color: #080808;
  font-size: 1.1vw;
  margin-top: -0vw;
}
hr.InterDivHr{
  justify-self: center;
  width: 4.5vw;
  height: 0vw;
  border: 0.2vw solid #ffcd00;
  border-radius: 1vw;
}
div.PointCircleDiv{
  margin-top: -0.8vw;
  height: 1vw;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
div.ExperienceContent{
  position: absolute;
  visibility: hidden;
}
div.ExperienceDivText{
  position: absolute;
  width: 10vw;
  height: 15vw;
  margin-left: 1.5vw;
  margin-top: 6.5vw;
}
p.ExperienceText{
  position: absolute;
  color: #080808;
  font-family: "Comic Sans MS";
  font-size: 1.4vw;
  font-weight: bold;
}
div.ExperiencePost{
  margin-left: 10vw;
  margin-top: -5vw;
  width: 37vw;
  height: 22vw;
  position: absolute;
}
div.Ex{
  display: flex;
  flex-direction: row;
  height: 7.33vw;
  justify-content: flex-end;
  align-items: center;
}
img.Eximg{
  justify-self: center;
  border-radius: 100%;
  width: 5vw;
  height: 5vw;
}
div.Extext{
  width: 31vw;
  height: 5vw ;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin-right: 1vw;
}
p.Exposition{
  font-family: "Agency FB";
  font-weight: bold;
  font-size: 1.8vw;
  margin-top: -0.5vw;
}
p.Extime{
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 0.5vw;
  margin-top: -1.5vw;
}
p.Excompany{
  font-size: 1vw;
  font-family: "Agency FB";
  margin-top: 0.1vw;
}
span.Montserat{
  font-family: "Montserrat Medium";
}
span.Iransans{
  font-family: IRANSans;
}
hr.Exhr{
  width: 35vw;
  align-self: flex-end;
  position: absolute;
  border: 0.15vw solid #ffcd00;
  border-radius: 1vw;
}
hr.Expont{
  margin-right: 35.5vw;
  justify-self: flex-start;
  align-self: flex-end;
  position: absolute;
  border: 0.15vw solid #ffcd00;
  border-radius: 1vw;
}
div.EducationContent{
  visibility: hidden;
  position: absolute;
}
div.EducationDivText{
  position: absolute;
  width: 10vw;
  height: 15vw;
  margin-left: 1.5vw;
  margin-top: 6.5vw;
}
div.EducationText {
  position: absolute;
}
p.EducationText{
  position: absolute;
  color: #080808;
  font-family: "Comic Sans MS";
  font-size: 1.4vw;
  font-weight: bold;
}
div.EducationPost{
  margin-left: 10vw;
  margin-top: -5vw;
  width: 37vw;
  height: 22vw;
  position: absolute;

}
div.Ed{
  display: flex;
  flex-direction: row;
  height: 7.33vw;
  justify-content: flex-end;
  align-items: center;
}
div.Edtext{
  width: 31vw;
  height: 5vw;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin-right: 1vw;
}
p.EdTitle{
  font-family: "Agency FB";
  font-weight: bold;
  font-size: 1.8vw;
  margin-top: -0.5vw;
}
p.EdTime{
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 0.5vw;
  margin-top: -1.5vw;
}
p.EdCompany{
  font-size: 1vw;
  font-family: "Agency FB";
  margin-top: 0.1vw;
}
div.DivLanguagesText{
  position: absolute;
  width: 10vw;
  height: 15vw;
  margin-left: 1.5vw;
  margin-top: 6.5vw;
}
div.LanguagesText{
  position: absolute;
  margin-left: 2vw;
  margin-top: 4.5vw;
}
p.LanguagesText{
  position: absolute;
  color: #080808;
  font-family: "Comic Sans MS";
  font-size: 1.2vw;
  font-weight: bold;
}