.blogArticle {
  border: 2px solid plum;
  border-radius: 10px;
  max-width: 400px;
  max-height: 350px;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  transition: border-color 0.3s ease-in-out;
}
.blogArticle:hover {
  box-shadow: 0 0 0.5em 0 #5e5e5e;
  border-color: #5e5e5e;
  color: #faebd7;
}
* {
  font-size: 20px;
}
body {
  color: #ffebcd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background-color: #2d0922;
  background-size: 100%;
  position: relative;
  margin: 10px;
}
body .inlineContainer {
  display: inline-flex;
}
body .commandName {
  color: plum;
}
body .avatar {
  margin-top: 0;
  margin-left: 20px;
  opacity: 0.8;
  width: 155px;
  pointer-events: none;
  height: 155px;
}
body #terminal {
  font-family: monospace;
  color: #ffebcd;
  height: 95%;
  width: 95%;
}
body #terminal #output {
  margin-bottom: 10px;
}
body #terminal #input {
  margin-top: 20px;
}
body #terminal #prompt {
  font-weight: 700;
}
body #terminal #cmd {
  font-size: 20px;
  background: 0 0;
  border: none;
  color: #ffebcd;
  outline: 0;
  transition: caret-color 0.3s ease;
  width: 70%;
}
body #terminal #cmd:focus {
  caret-color: #ffebcd;
}
body #terminal #suggestions {
  margin-top: 10px;
  color: #ffebcd;
}
body #terminal #suggestions .selected {
  font-weight: 800;
  color: #7fffd4;
}
body #terminal .ownerTerminal {
  font-size: 20px;
  color: #5abb9a;
}
@keyframes destroyAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(0);
    opacity: 0.2;
  }
}
.command-input {
  font-weight: 400;
}
.command-input.command-entered {
  font-weight: 700;
}
.nameErr {
  font-size: 100px;
}
.descErr {
  font-size: 10px;
}
.projectsDiv {
  display: inline-flex;
  margin-top: 20px;
}
.article-wrapper {
  margin: 10px;
  width: 250px;
  transition: 0.15s all ease-in-out;
  border-radius: 2px;
  padding: 5px;
  border: 4px solid transparent;
  cursor: pointer;
  background-color: #ffebcd;
}
.article-wrapper:hover {
  box-shadow: 10px 10px 0 #5abb9a, 20px 20px 0 plum;
  border-color: #2d0922;
  transform: translate(-20px, -20px);
}
.article-wrapper:active {
  box-shadow: none;
  transform: translate(0);
}
.article-wrapper:hover .project-hover {
  transform: rotate(-45deg);
  background-color: #a6c2f0;
}
.project-info {
  padding: 10px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.project-info .project-title {
  font-size: 2em;
  margin: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
.project-info .project-description {
  color: #000;
  font-weight: 300;
}
.project-info .flex-pr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-hover {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 9px;
  transition: all 0.3s ease;
}
.container-project {
  width: 100%;
  height: 170px;
  background: gray;
}
body .container .flex {
  display: inline-flex;
  margin: 20px;
}
.skillBar {
  width: 250px;
  height: 30px;
  border: 1px solid #ffebcd;
  margin: 0 20px;
  display: flex;
  align-items: center;
}
.skillBarItem1 {
  width: 95%;
  height: 30px;
  background: #ff7f50;
  animation: slide1 2s ease-in-out;
}

.skillBarItem2 {
  width: 85%;
  height: 30px;
  background: #ffcc00;
  animation: slide2 2s ease-in-out;
}

.skillBarItem3 {
  width: 65%;
  height: 30px;
  background: #4caf50;
  animation: slide3 2s ease-in-out;
}

.skillBarItem4 {
  width: 70%;
  height: 30px;
  background: #008080;
  animation: slide4 2s ease-in-out;
}

.skillBarItem5 {
  width: 80%;
  height: 30px;
  background: #ff6347;
  animation: slide5 2s ease-in-out;
}

.skillBarItem6 {
  width: 75%;
  height: 30px;
  background: #4682b4;
  animation: slide6 2s ease-in-out;
}

.skillBarItem7 {
  width: 95%;
  height: 30px;
  background: #daa520;
  animation: slide7 2s ease-in-out;
}

.skillBarItem8 {
  width: 5%;
  height: 30px;
  background: #6a5acd;
  animation: slide8 2s ease-in-out;
}

.skillBarItem9 {
  width: 5%;
  height: 30px;
  background: #a52a2a;
  animation: slide9 2s ease-in-out;
}

.skillBarItem10 {
  width: 15%;
  height: 30px;
  background: #32cd32;
  animation: slide10 2s ease-in-out;
}

.skillBarItem11 {
  width: 100%;
  height: 30px;
  background: #ff4500;
  animation: slide11 2s ease-in-out;
}

.skillBarItem12 {
  width: 50%;
  height: 30px;
  background: #ff69b4;
  animation: slide12 2s ease-in-out;
}
@keyframes slide1 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes slide2 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes slide3 {
  from {
    width: 0;
  }
  to {
    width: 95%;
  }
}
@keyframes slide4 {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}
@keyframes slide5 {
  from {
    width: 0;
  }
  to {
    width: 85%;
  }
}
@keyframes slide6 {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@keyframes slide7 {
  from {
    width: 0;
  }
  to {
    width: 5%;
  }
}
@keyframes slide8 {
  from {
    width: 0;
  }
  to {
    width: 5%;
  }
}