* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  color: #1b1a1a !important;
  font-family: sans-serif;
}

.opacity {
  font-size: 80px;
  font-weight: bolder;
  position: absolute;
  color: #363636;
  margin-left: 450px;
  margin-top: 20px;
  opacity: 50%;
}

.top {
  /* margin-bottom: 20px; */
  color: #fff;
  font-size: 50px;
  position: absolute;
  margin-left: 490px;
  margin-top: 35px;
}

.top span {
  color: #ffb400;
  font-size: 50px;
}

/* SPINNING SETTINGS */

.infinity {
  position: absolute;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  background-color: #fff;
  top: 30%;
  position: fixed;
}

.infinity svg {
  background-color: #fff;
  animation: spin 3s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* PERSONAL INFO */

.middle-everything {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -50px;
}

.personal-info {
  color: #fff;
}

.pf1 h3 {
  margin-left: 200px;
  margin-bottom: 15px;
}

.pf1 ul {
  list-style: none;
  margin-left: 200px;
  margin-bottom: 15px;
}

.pf1 ul li {
  line-height: 2;
}

.pf1 ul li span {
  font-weight: bold;
}

.pf1 button {
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  background-color: #ffb400;
  margin-left: 200px;
}

.pf1 button a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  
}
.pf1 button:hover{
  background: red;
  text-decoration: none;
}

.pf2 ul {
  list-style: none;
  margin-left: 40px;
  margin-top: 35px;
  text-decoration: none;
}

.pf2 ul li {
  line-height: 2;
  text-decoration: none;
  
}

.pf2 ul li a{
  color: goldenrod;
  text-decoration: none;
}

.pf2 ul li a:hover{
  color: red;
  background: none;
}


.pf2 ul li span {
  font-weight: bold;
}

.personal-info {
  display: flex;
}

/* FIRST BLOCK */

.blocks {
  display: flex;
  color: #fff;
  justify-content: space-between;
  align-items: center;
}

.block1-top {
  border: thin solid #ffffff5d;
  background-color: #1b1a1a;
  border-radius: 1px;
  width: 160px;
  height: 110px;
  text-align: center;
  margin-bottom: 30px;
  margin-right: 30px;
}

.block1-top h1 {
  margin-right: 60px;
  font-weight: bolder;
  color: #ffb400;
}
.block1-top p {
  margin-right: 20px;
}

.block1-top .sp2 {
  margin-left: 45px;
}

.block1-bottom {
  border: 1px solid #ffffff5d;
  background-color: #1b1a1a;
  border-radius: 1px;
  width: 160px;
  height: 110px;
  text-align: center;
}

.block1-bottom h1 {
  margin-right: 80px;
  font-weight: bolder;
  color: #ffb400;
}

.block1-bottom p {
  margin-right: 50px;
}

.block1-bottom .sp2-2 {
  margin-left: 43px;
}

/* SECOND SIDE BLOCK */

.block2-top {
  border: 1px solid #ffffff5d;
  background-color: #1b1a1a;
  border-radius: 1px;
  width: 160px;
  height: 110px;
  text-align: center;
  margin-bottom: 30px;
}

.block2-top h1 {
  margin-right: 80px;
  font-weight: bolder;
  color: #ffb400;
}

.block2-top p {
  margin-right: 10px;
}

.block2-top .sp2-2 {
  margin-left: 13px;
}

.block2-bottom {
  border: 1px solid #ffffff5d;
  background-color: #1b1a1a;
  border-radius: 1px;
  width: 160px;
  height: 110px;
  text-align: center;
}

.block2-bottom h1 {
  margin-right: 80px;
  font-weight: bolder;
  color: #ffb400;
}

.block2-bottom p {
  margin-right: 30px;
}

.block2-bottom .sp2-2 {
  margin-left: 5px;
}

/* ICONS */

.right {
  margin-right: 15px;
}

.right .icon1 {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #3c3c3c52;
  color: #fff;
  margin-top: 5px;
}

.icon1 a {
  color: #fff;
  background-color: #3c3c3c52;
}

.icon1 svg {
  margin-top: 3px;
  background-color: #3c3c3c52;
}

.right .icon2 {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #ffb400;
  color: #fff;
  margin-top: 5px;
}

.icon2 a {
  color: #fff;
  background-color: #ffb400;
}

.icon2 svg {
  margin-top: 3px;
  background-color: #ffb400;
}

.right .icon3 {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #3c3c3c52;
  color: #fff;
  margin-top: 5px;
}

.icon3 a {
  color: #fff;
  background-color: #3c3c3c52;
}

.icon3 svg {
  margin-top: 3px;
  background-color: #3c3c3c52;
}

.right .icon4 {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #3c3c3c52;
  color: #fff;
  margin-top: 5px;
}

.icon4 a {
  color: #fff;
  background-color: #3c3c3c52;
}

.icon4 svg {
  margin-top: 3px;
  background-color: #3c3c3c52;
}

.right .icon5 {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #3c3c3c52;
  color: #fff;
  margin-top: 5px;
}

.icon5 a {
  color: #fff;
  background-color: #3c3c3c52;
}

.icon5 svg {
  margin-top: 3px;
  background-color: #3c3c3c52;
}

/* MY SKILLS */

hr {
  width: 400px;
  margin: auto;
}

.myskills h2 {
  color: #fff;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* html and wordpress */

.circle {
  color: #fff;
}

.percentage-circle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  width: 800px;
  margin: auto;
  margin-bottom: 50px;
}

.html {
  border: 12px solid goldenrod;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
  border-right: 12px solid grey;
  /* display: inline-block; */
}

/* .html::after {
  border: none;
  position: absolute;
  top: 0.353em;
  left: 0.35em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4.3em;
  height: 4.3em;
  background-color: #fff;
  content: ;
} */

/* .circle1 .htmlspan {
  margin-left: 25px;
} */

.circle1 {
  margin-bottom: 40px;
}

.wordpress {
  border: 8px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
}

/* javascript and jquery */

.javascript {
  border: 12px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
  border-right: 12px solid goldenrod;
}

/* .circle2 .javascript-span {
  margin-left: 8px;
} */

.circle2 {
  margin-bottom: 40px;
}

.jquery {
  border: 8px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
}

/* css and angular */

.css {
  border: 12px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
  border-right: 12px solid goldenrod;
  border-bottom: 12px solid goldenrod;
  
}

/* .circle3 .css-span {
  margin-left: 8px;
} */

.circle3 {
  margin-bottom: 40px;
}

.angular {
  border: 8px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
}

/* php and react */

.php {
  border: 8px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
}

/* .circle4 .php-span {
  margin-left: 8px;
} */

.circle4 {
  margin-bottom: 40px;
}

.react {
  border: 8px solid grey;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 30px;
  margin-bottom: 10px;
}

/* EXPERIENCE & EDUCATION */

.xp-ed {
  color: #fff;
  margin-top: 50px;
  text-align: center;
  margin-bottom: 50px;
}

.xp-ed-overall-hard-level {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  width: 1000px;
  margin: auto;
}

.xp-ed-hard-level {
  margin-bottom: 50px;
  color: #fff;
}

/* 2018 */

.xp-ed-hard-level1 {
  display: flex;
  margin-bottom: 30px;
}

.xp-ed2018 svg {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #ffb400;
  color: #fff;
}

.xp-ed-hard-level1 .vertical {
  border-left: thin solid #ffffff;
  height: 100px;
  margin-left: -20px;
  margin-top: 40px;
}

.xp-ed-hard-level1 .time {
  /* margin-top: 35px; */
  margin-left: 40px;
  margin-top: 10px;
}

.xp-ed-hard-level1 .time span {
  border: none;
  padding: 3px 8px;
  border-radius: 30px;
  background-color: #3c3c3c52;
}

.xp-ed-hard-level1 .time h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.xp-ed-hard-level1 .time p {
  line-height: 1.5;
}

/* 2013 */

.xp-ed-hard-level2 {
  display: flex;
  margin-bottom: 30px;
}

.xp-ed2013 svg {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #ffb400;
  color: #fff;
}

.xp-ed-hard-level2 .vertical {
  border-left: thin solid #ffffff;
  height: 100px;
  margin-left: -20px;
  margin-top: 40px;
}

.xp-ed-hard-level2 .time {
  /* margin-top: 35px; */
  margin-left: 40px;
  margin-top: 10px;
}

.xp-ed-hard-level2 .time span {
  border: none;
  padding: 3px 8px;
  border-radius: 30px;
  background-color: #3c3c3c52;
}

.xp-ed-hard-level2 .time h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.xp-ed-hard-level2 .time p {
  line-height: 1.5;
}

/* 2005 */

.xp-ed-hard-level3 {
  display: flex;
  margin-bottom: 30px;
}

.xp-ed2005 svg {
  border: none;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  border-radius: 55%;
  background-color: #ffb400;
  color: #fff;
}

.xp-ed-hard-level3 .vertical {
  border-left: thin solid #ffffff;
  height: 100px;
  margin-left: -20px;
  margin-top: 40px;
}

.xp-ed-hard-level3 .time {
  /* margin-top: 35px; */
  margin-left: 40px;
  margin-top: 10px;
}

.xp-ed-hard-level3 .time span {
  border: none;
  padding: 3px 8px;
  border-radius: 30px;
  background-color: #3c3c3c52;
}

.xp-ed-hard-level3 .time h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.xp-ed-hard-level3 .time p {
  line-height: 1.5;
}

/* RIGHT SIDE */

.xp-ed-hard-level-right {
  color: #fff;
}

nav {
  /* border: 2px solid #fff; */
  width: 150px;
  height: 100vh;
}

nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

nav ul li {
  display: flex;
  align-items: center;
  justify-content: end;
  list-style: none;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
}
nav ul li a {
  color: #fff;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: end;
  align-items: center;
  text-decoration: none;
  border-radius: 50px;
  padding: 0 12px;
  gap: 12px;
  overflow: hidden;
  transition: width 0.3s;
}

nav ul li a i {
  font-size: 18px;
}

nav ul li a p {
  font-size: 14px;
}

ul li a:hover {
  width: fit-content;
  overflow: visible;
  background-color: #ffb400;






}