@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

@font-face {
  font-family: "VIPESRG";
  src: url("../../assets/fonts/VIPESRG_.TTF");
}

.pink {
  color: #ff4365;
}

.green {
  color: greenyellow;
}

.yellow {
  color: yellow;
}

.orange {
  color: tomato;
}

.blue {
  color: #00eaff;
}

.darkgrey {
  color: rgb(140, 137, 137);
}

.lightgrey {
  color: rgb(210, 209, 209);
}

h3,
h2 {
  font-family: "Notable", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
}

#logo {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 1.63rem;
}

#logo p {
  color: black;
  overflow: hidden;
  margin-inline: auto;
  white-space: nowrap;
  border-right: 1px solid;

  animation:
    typing 2s steps(15) forwards,
    blink 1s step-end infinite;
}

nav a {
  text-decoration: none;
}

a {
  color: inherit;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.nav-item {
  border: none;
  font-family: "Orbitron", sans-serif;
  font-size: large;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
}

.grey:hover {
  color: #00ff00; /* #CCFF00 */
}
.nav-link.darker {
  color: black;
}

.nav-link:visited {
  color: black;
}

.nav-link.classic:hover {
  color: tomato;
}

.nav-link:hover,
.darkgrey:hover {
  color: yellowgreen;
}

.nav-link.darker:hover {
  color: #ff4365;
}

.lightgrey:hover {
  color: rgb(246, 246, 74);
}

.nav-link.darker:active {
  color: greenyellow;
}

.nav-link:active {
  color: #ff4365;
}

.classic {
  font-family: "Press Start 2P", cursive;
  font-size: 16px;
  color: black;
  background-color: #d4d0c8;
  border: 2px solid #fff;
  padding: 10px 20px;
  box-shadow:
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #000000;
  text-shadow: 1px 1px 0 #ffffff;
  cursor: pointer;
  user-select: none;
  image-rendering: pixelated;
}

.modal-title {
  font-family: "Orbitron", sans-serif;
  font-size: xx-large;
  font-weight: bold;

  color: tomato;
  text-shadow:
    -1px -1px 0 greenyellow,
    1px -1px 0 greenyellow,
    -1px 1px 0 greenyellow,
    1px 1px 0 greenyellow;
}

.modal-footer > .classic {
  padding: 8px;
}

.modal-content {
  border-color: whitesmoke;
  box-shadow: 0 0 0 0.25rem greenyellow;
  border-width: 5px;
}

.form-control:focus {
  background-color: #fff;
  border-color: tomato; /* your custom border color */
  box-shadow: 0 0 0 0.25rem greenyellow; /* matching glow */
}

.form-check-input:checked,
.form-check-input:focus {
  background-color: tomato;

  border-color: tomato; /* your custom border color */
  box-shadow: 0 0 0 0.25rem greenyellow; /* matching glow */
}

.custom-close {
  font-size: 2rem;
  color: #ff4365;
  background: none;
  border: none;
}

.custom-close:hover {
  color: #ff6f91;
}

.nav-link.classic:hover {
  background-color: greenyellow;
}

.gray {
  background-color: rgb(192, 192, 192);
}

.grey2 {
  color: rgb(192, 192, 192);
  text-shadow:
    2px 2px 0 rgb(255, 67, 101),
    3px 3px 0 rgb(255, 67, 101),
    1px 1px 0 rgb(255, 67, 101);
}

.grey {
  color: rgb(192, 192, 192);
  text-shadow:
    2px 2px 0 rgb(255, 67, 101),
    1px 1px 0 rgb(255, 67, 101);
}

.accordion-item {
  background-color: #212529 !important;
  border-top: 1px solid #6c757d !important;
  border-bottom: 1px solid #6c757d !important;
  border-left: none !important;
  border-right: none !important;
}

.accordion-button {
  background-color: #212529 !important;
  color: white !important;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
  color: yellowgreen !important;
  box-shadow: 0 0 0 0.1rem #ff4365 !important; /* Grey glow */
}

.accordion-button.collapsed {
  background-color: #212529 !important;
  color: white !important;
}

.accordion-body {
  background-color: white !important;
  color: white !important;
}

.name {
  font-family: "VIPESRG", monospace;
  color: rgb(44, 44, 44);
}

.brd {
  border-right: 3px solid rgb(96, 95, 95);
  padding-right: 90px;
}

.main {
  background-color: rgb(41, 40, 40);
  font-family: "Fira Code", monospace;
  color: #00ff00;
  padding: 20px;
  margin: 0;
  font-size: x-large;
}

.bash {
  font-size: xx-large;
}

/* >= 1281px */
@media (min-width: 1281px) {
  .media,
  .media * {
    font-size: 4.7rem;
    font-weight: 400;
    line-height: 1.05;
  }

  .brd {
    padding-right: 145px;
  }

  .name {
    font-size: 5.6rem;
  }
}

/* <= 1280px */
@media (max-width: 1280px) {
  .media {
    font-size: 3rem;
    font-weight: 400;
  }

  .brd {
    padding-right: 110px;
  }

  .name {
    font-size: 3.7rem;
  }
}

/* <= 1024px */
@media (max-width: 1024px) {
  .media {
    font-size: 2.3rem;
    font-weight: 400;
  }

  .brd {
    padding-right: 95px;
  }

  .name {
    font-size: 3rem;
  }
}

/* <= 912px */
@media (max-width: 912px) {
  .media {
    font-size: 1.8rem;
    font-weight: 400;
  }

  .brd {
    padding-right: 85px;
  }

  .bash {
    font-size: x-large;
  }

  .name {
    font-size: 2.5rem;
  }
}

/* <= 768px */
@media (max-width: 768px) {
  .media {
    font-size: 1.6rem;
    font-weight: 400;
  }

  .name {
    font-size: 1.5rem;
  }
}

.music img {
  width: 300px;
}

/* Base audio element */
audio {
  border: none;
  border-radius: 0;
  background: #222529; /* close match to bg-dark */
}

/* Main control enclosure (Chromium / Edge / Brave) */
audio::-webkit-media-controls-enclosure {
  background: #222529 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Inner control panel */
audio::-webkit-media-controls-panel {
  background: #222529 !important;
  border-radius: 0 !important;
}

/* Make icons / controls white */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider {
  filter: invert(1);
}

/* .navbar {
  border-bottom: #00eaff solid 3px;
}

footer {
  border-top: #00eaff solid 3px;
} */
.card {
  border: lightgray solid 4px;
}