/* Global styles for the host component */

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

body {
  /* Linear gradient from dark gray to black */
  background: linear-gradient(135deg, #000000, #1a1a1a, #000000);
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Console container styles */
.console {
  background-color: black;
  border: 5px solid #00f2fe; 
  border-radius: 20px;
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.5);
}

/* Navbar styles */
.navbar {
  margin: 20px;
  background: linear-gradient(90deg, #1a1a2d, #2a0a4d);
  border: 2px solid #00f2fe;
  border-radius: 10px;
  margin-bottom: 20px;
}

.navbar a {
  color: #ff00e1;
  text-decoration: none;
  font-size: 1.5rem;
  text-shadow: 0 0 5px #ff00e1;
  transition: color 0.3s ease;
  /* Navbar links can use VT323 for more impact and clear console feel */
  font-family: 'VT323', monospace, sans-serif;
  margin-right: 30px;
  margin-left: 30px;
}

.navbar a:hover {
  color: #00f2fe;
  text-shadow: 0 0 10px #00f2fe;
}


.screen {
  background: #000;
  border: 2px solid #00f2fe;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Header styles */
.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 2rem;
  background: linear-gradient(45deg, #00f2fe, #ff00e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px #00f2fe;
  /* Headers often benefit from the bolder VT323 for a strong console look */
  font-family: 'VT323', monospace, sans-serif;
}

/* Profile Image styles */
.profile-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid #00ffe5;
  margin: 20px auto;
  overflow: hidden;
  box-shadow: 0 0 10px #00ffe5, 0 0 20px #00ffe5, 0 0 30px #00ffe5;
  transition: transform 0.3s ease-in-out, filter 0.2s;
  background: radial-gradient(circle at center, #000 30%, #0ff 100%);
  position: relative;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.1);
}

/* Glitch animation */
@keyframes glitch {
  0% {
    filter: hue-rotate(0deg);
    transform: translate(0);
  }

  20% {
    filter: hue-rotate(30deg);
    transform: translate(-1px, 1px);
  }

  40% {
    filter: hue-rotate(60deg);
    transform: translate(1px, -1px);
  }

  60% {
    filter: hue-rotate(30deg);
    transform: translate(-2px, 2px);
  }

  80% {
    filter: hue-rotate(0deg);
    transform: translate(2px, -2px);
  }

  100% {
    filter: hue-rotate(0deg);
    transform: translate(0);
  }
}

/* Status message */
.status {
  text-align: center;
  color: #2ecc71;
  font-size: 0.8rem;
  text-shadow: 0 0 5px #2ecc71;
  margin-bottom: 20px;
  /* Status messages can use Silkscreen for readability */
  font-family: 'Silkscreen', monospace, sans-serif;
}

/* Section styles */
.section {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(0, 242, 254, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.section:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.section h2 {
  font-size: 1.2rem;
  color: #00f2fe;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #00f2fe;
  /* Section headers can use VT323 for a stronger console look */
  font-family: 'VT323', monospace, sans-serif;
}

p {
  color: #b0b0d0;
  margin-bottom: 10px;
  /* Paragraphs should use the more readable Silkscreen */
  font-family: 'Silkscreen', monospace, sans-serif;
}

.section ul {
  list-style: none;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Ensure list items use Silkscreen */
}

.section li {
  color: #ff00e1;
  margin: 5px 0;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Ensure list items use Silkscreen */
}

.section form {
  display: flex;
  flex-direction: column;
}

.section input,
.section textarea {
  margin: 5px 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #e0e0ff;
  font-size: 0.9rem;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Input fields should be readable with Silkscreen */
}

.section button {
  padding: 8px;
  background: #ff00e1;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 5px;
  transition: background 0.3s ease;
  font-family: 'VT323', monospace, sans-serif;
  /* Buttons can have a console font */
}

.section button:hover {
  background: #00f2fe;
}

.section a {
  color: #ff00e1;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 5px #ff00e1;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Links can be Silkscreen or VT323 depending on desired emphasis */
}

.section a:hover {
  color: #00f2fe;
  text-shadow: 0 0 10px #00f2fe;
}

/* Resume section */
.resume {
  text-align: center;
  margin-top: 20px;
}

.resume a {
  color: #ff00e1;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 5px #ff00e1;
  font-family: 'VT323', monospace, sans-serif;
  /* Use VT323 for strong call to action */
}

.resume a:hover {
  color: #00f2fe;
  text-shadow: 0 0 10px #00f2fe;
}


.skill-label {
  margin-bottom: 5px;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

.bar-bg {
  width: 100%;
  height: 18px;
  background-color: #141414;
  border: 2px solid #00ffc3;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 6px #00ffc34f;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ffc3, #0088ff);
  box-shadow: inset 0 0 6px #00ffc3, 0 0 8px #00ffc3;
  position: relative;
  transition: width 1.5s ease;
  z-index: 1;
  width: 0%;
}

.xp {
  position: absolute;
  right: 10px;
  top: 1px;
  font-size: 10px;
  color: #ffffff;
  text-shadow: 0 0 4px #000;
  z-index: 2;
  font-family: 'VT323', monospace, sans-serif;
  /* XP text can also be VT323 */
}

/* Game card grid */
.game-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.game-card {
  background: linear-gradient(135deg, #1a1a1a, #262626);
  border: 2px solid #00ffea;
  border-radius: 16px;
  width: 250px;
  box-shadow: 0 0 15px #00ffee33;
  font-family: 'VT323', monospace, sans-serif;
  /* Game card titles use VT323 */
  color: #00ffee;
  transition: transform 0.2s;
}



.game-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #00ffee88;
}

.card-header {
  position: relative;
}

.game-thumb {
  width: 100%;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  height: 140px;
  object-fit: cover;
  filter: grayscale(20%) contrast(120%);
}

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff00e1;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Badges can be Silkscreen for readability */
}

.card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 10px;
  /* Ensure it stretches */
}


.card-body h3 {
  margin: 0 0 0.5rem;
  font-size: 12px;
  font-family: 'VT323', monospace, sans-serif;
  /* Card body headings can be VT323 */
}

.card-body p {

  font-size: 10px;
  margin-bottom: 0.5rem;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Card body paragraphs use Silkscreen */
}

.card-body a {
  text-decoration: none;
  font-size: 12px;
  background: #ff00e1;
  color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'VT323', monospace, sans-serif;
  box-shadow: 0 0 6px #ff00e1;
  display: inline-block;
  margin-bottom: 0px;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Contact section */
.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px;
  flex-wrap: wrap;
}

.contact-left,
.contact-right {
  flex: 1 1 300px;
}

.crt-frame {
  background: #101010;
  border: 2px solid #00ffcc;
  border-radius: 12px;
  padding: 30px 30px;
  box-shadow: 0 0 20px #00ffcc55, 0 0 5px #00ffccaa inset;
  text-align: center;
}

.glitch-text {
  font-family: 'VT323', monospace, sans-serif;
  /* Glitch text definitely uses VT323 */
  font-size: 17px;
  color: #00ffee;
  text-shadow: 0 0 3px #ff00ff, 0 0 2px #00ffff;
  margin-bottom: 12px;
}

.download-btn {
  padding: 10px 14px;
  font-family: 'VT323', monospace, sans-serif;
  /* Download button uses VT323 */
  font-size: 10px;
  color: #000;
  background: linear-gradient(145deg, #00ffcc, #00ffee);
  border: 2px solid #00ffee;
  border-radius: 6px;
  box-shadow: 0 0 8px #00ffeeaa, 0 0 2px #00ffee inset;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.download-btn:hover {
  background: #00ffee;
  color: #101010;
  transform: scale(1.05);
  box-shadow: 0 0 12px #00ffeecc, 0 0 6px #00ffee inset;
}

.social-icons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 10px;
}

.social-icons a img {
  width: 40px;
  height: 40px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(95%) saturate(2229%) hue-rotate(136deg) brightness(105%) contrast(103%);
  transition: transform 0.2s ease-in-out;
}

.social-icons a img:hover {
  transform: scale(1.2);
}

.social-icons a {
  color: #00ffcc;
  /* Match your theme */
  font-size: 18px;
  transition: transform 0.2s ease, color 0.3s ease;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Keep social text readable */
}

.social-icons a:hover {
  transform: scale(1.2);
  color: #ffffff;
  /* Hover color */
}



.skill-scroll-wrapper {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 12px;
}

/* Custom scrollbar to match Bootstrap-like theme */
.skill-scroll-wrapper::-webkit-scrollbar {
  width: 6px;
}

.skill-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.skill-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(0, 242, 255);
  /* Bootstrap secondary color */
  border-radius: 4px;
}

.skill-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 136, 255, 0.9);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.skill-tag {
  color: black;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

/* Solid colors for each skill */
.mm { background-color: white; }



/* Footer styles */
.footer {
  margin: 20px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Silkscreen', monospace, sans-serif;
  /* Footer text uses Silkscreen */
}




@keyframes pulseZoom {

  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.05);
  }
}


@keyframes intense-glow {
  0% {
    box-shadow: 0 0 0 rgb(85, 0, 255);
    background-color: transparent;
  }

  50% {
    box-shadow: 0 0 200px 100px hsl(69, 100%, 50%);
    background-color: rgba(255, 0, 0, 0.3);
  }

  100% {
    box-shadow: 0 0 0 rgb(55, 255, 0);
    background-color: transparent;
  }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  .console {
    padding: 15px;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .profile-img {
    width: 100px;
    height: 100px;
  }

  .navbar a {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 387px) {
  .download-btn {
    font-size: 8px;
    /* Smaller font for tiny screens */
  }
}