styles.css

@font-face {
  font-family: "hack";
  src        : url("../fonts/hack-regular-subset.woff2") format("woff2");
  font-style : normal;
  font-weight: 400;
}

@font-face {
  font-family: "hack";
  src        : url("../fonts/hack-italic-subset.woff2") format("woff2");
  font-style : italic;
  font-weight: 400;
}

body {
  font-family     : "hack", monospace;
  font-size       : 14px;
  font-weight     : 500;
  background-color: #170720;
  color           : #baa3ff;
  line-height     : 1.6;
  text-rendering  : optimizeLegibility;
}

/* Responsive text and layout adjustments */
@media (min-width: 768px) {
  main {
    font-size: 20px;
    width    : 60%;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }

  main {
    width: 100%;
    padding: 0 10px;
  }

  .json {
    padding: 1rem;
    white-space: normal; /* Allow text to wrap */
  }

  .repo-stars, .repo-forks {
    font-size: 0.7rem; /* Slightly smaller badges */
    padding: 2px 6px;
    margin-left: 0.5rem;
  }

  .block {
    margin-left: 1rem;
    margin-right: 1rem; /* Ensure margin on both sides */
  }

  .repo-details p {
    font-size: 0.8rem; /* Slightly smaller text for repo details */
  }
}

p {
  margin: 0;
}

a {
  color          : #00d1b2;
  font-style     : italic;
  text-decoration: none;
  transition     : color 0.3s ease, border-bottom 0.3s ease;
  position       : relative;
  text-rendering : optimizeLegibility;
}

a:hover,
a:active {
  color: #c7b4e5;
}

a::after {
  content         : '';
  position        : absolute;
  width           : 100%;
  height          : 3px;
  background-color: #00d1b2;
  bottom          : -2px;
  left            : 0;
  transform       : scaleX(0);
  transform-origin: bottom right;
  transition      : transform 0.3s ease;
}

a:hover::after {
  transform       : scaleX(1);
  transform-origin: bottom left;
}

.json {
  padding      : 2rem;
  white-space  : nowrap;
  overflow-wrap: break-word;
  overflow-wrap: break-word;
}

.json:before {
  content : "{";
}

.json:after {
  content: "}";
}

.block {
  margin-left  : 1.5rem;
  margin-top   : 1rem;
  margin-bottom: 1rem;
}

.key:after {
  content: ": ";
}

#typed {
  color: #7f65d4;
}

.attr,
.list-attr {
  font-family: monospace;
  color      : #7f65d4;
}

.attr:before,
.list-attr:before {
  content: '"';
}

.attr:after,
.list-attr:after {
  content: '",';
}

.array-key,
.list-key,
.key {
  color      : #c792ea;
  font-weight: bold;
  font-family: monospace;
}

.array-key:after {
  content: ": [";
}

.array-attr {
  margin-left: 1.5rem;
  color      : #7f65d4;
}

.array-attr:before {
  content: '"';
}

.array-attr:after {
  content: '",';
}

.array:after {
  content: "],";
}

.list-key:after {
  content : ": {";
}

.list:after {
  content: "},";
}

.list-subkey {
  margin-left: 1.5rem;
}

.list-subkey:after {
  content: ": ";
}

/* Base styles for the repo details */
.repo-details p {
  margin     : 0.2rem;
  font-family: monospace;
  font-size  : 0.9rem;
}

/* Description */
.repo-description {
  color: #7f688f;
}

/* Issues */
.repo-issues {
  color: #a87d81;
}

/* Language */
.repo-language {
  color: #7e9171;
}

/* Tags */
.repo-tags {
  color: #708e92;
}

.repo-details-icon {
  margin-right: 0.5rem;
  color       : #d19a66;
}

::selection {
  background-color: #261550;
  color           : #00d1b2;
}

::-moz-selection {
  background-color: #261550;
  color           : #00d1b2;
}

.repo-stars,
.repo-forks {
  display         : inline-block;
  padding         : 2px 8px;
  margin-left     : 1rem;
  font-size       : 0.8rem;
  font-weight     : bold;
  color           : #ffb444;
  background-color: #412c63;
  border-radius   : 12px;
  cursor          : pointer;
  transition      : background-color 0.3s ease, transform 0.2s ease;
}

.repo-stars:hover,
.repo-forks:hover {
  background-color: #4e53ac;
  transform       : scale(1.1);
}

.repo-stars:active,
.repo-forks:active {
  background-color: #4022b6;
  transform       : scale(0.9);
}