body {
  margin: 0;
  padding: 15px 20px;
  min-height: 99%;
  width: 100%;
  min-width: 600px;
  max-width: 960px;
  color: #98c379;
  background: #23272d;
  font-family: cursor, monospace;
  overflow-x: hidden;  
  word-wrap: break-word;  
  word-break: break-all;
}
::selection {
  background-color: #2c313b;
}
::-moz-selection {
  color: #211830;
  background-color: #2c313b;
}
textarea {
  left: -1000px;
  position: absolute;  
}
b {
  font-weight: bold;
  text-decoration: underline;  
}
/* Cursor Start */
.cursor {
  font-size: 12px;
  color: #55b5b1;
  background-color: #64ade0;
  position: relative;
  opacity: 1;
  height: 1.5em;
  width: 10px;
  max-width: 10px;
  transform: translateY(4px);
  overflow: hidden;
  text-indent: -5px;
  display: inline-block;
  text-decoration: blink;
  animation: blinker 1s linear infinite;  
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
#command {
  cursor: text;
  height: 50px;
  color: #64ade0;  
}
#liner {
  line-height: 1.3em;
  margin-top: -2px;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;  
}
#liner::before {
  color: #98c379;
  content: "visitor@piveta.pro:~$";
}
#liner.password::before {
  content: "Password:";
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Cursor End */
p {
  display: block;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;  
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 0.5s steps(30, end);
}
.no-animation {
  animation: typing 0 steps(30, end);
}
.margin {
  margin-left: 20px;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.index {
  color: #abb2be;
}
.color2 {
  color: #e5c07b;
}
.color3 {
  color: #7f848d;
}
.iconcolor {
  color: #be5046;
}
.command {
  color: #64ade0;
  text-shadow: 0 0 5px #64ade0; 
}
.error {
  color: #f44747;
}
.white {
  color: #ffffff;
}
.inherit,
a {
  color: #e06c75;
}
a {
  text-decoration: inherit;
}
a:hover {
  background: #64ade0;
  color: #211830;
}
a:focus {
  outline: 0;
}

/* favicon Start */
@media (prefers-color-scheme: light) {
  /* Set the light favicon as the active one */
  link[rel="icon"][type="image/png"][href="/favicon-light.png"] {
    display: block;
  }

  /* Hide the dark favicon */
  link[rel="icon"][type="image/png"][href="/favicon-dark.png"] {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  /* Set the dark favicon as the active one */
  link[rel="icon"][type="image/png"][href="/favicon-dark.png"] {
    display: block;
  }

  /* Hide the light favicon */
  link[rel="icon"][type="image/png"][href="/favicon-light.png"] {
    display: none;
  }
}
/* favicon End */

/* social media icon Start */
.social-media-icons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.social-media-icons a {
  margin: 0 10px;
  color: #333;
}

.social-media-icons a:hover {
  color: #55acee;
}
/* social media icon End */