:root,
:root[data-theme="default"] {
  --bg-primary: #060c10;
  --text-color:#f0f0cad9;
  --python-blue: #0099ff;
  --python-yellow: #fdbb3e;
    --python-gradient-text: linear-gradient(
    90deg,
    #05b1f4,
    #34c0f8,
    #ff9e28,
    #fcc245
  ); 
  --btn-bg-hover: rgba(3, 15, 66, 0.06);
  --transition-time: 360ms;
  --transition-ease: cubic-bezier(.2,.9,.2,1); 
  --text-grey:rgb(189, 189, 189);
  --text-grey-background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  --text-grey-border-bottom:solid 2px rgba(58, 57, 57, 0.5);
  --text-grey-text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.20);
  --background-contrast: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  --background-contrast-border:solid 1px rgba(255, 255, 255, 0.30);
  --skeleton-background: linear-gradient(90deg, 
    #131313 25%,
    #252525 50%,  
    #131313 75% 
  );
  --skeleton-video-background:#131313;
  --skeleton-border:solid 1px rgb(106, 105, 105);
  --skeleton-play-button-background:rgba(255, 255, 255, 0.1);
  --skeleton-border-after:18px solid rgba(255, 255, 255, 0.8);
  --container-text-background:transparent;
  --text-shadow-text:2px 2px 4px rgba(255, 255, 255, 0.20);
  --container-text-border:0.5px solid rgba(0, 0, 0, 0.50);
  --bold: var(--python-blue);
  --copy-btn-color: #060c10;
  --icons-border:solid 1px rgba(105, 104, 104, 0.5);
  --project-img-card-border:solid 1px #0099ff;
  --patch-notes-webkit-scrollbar-track: var(--bg-primary);
  --patch-notes-webkit-scrollbar-thumb:  #061e28ca; 
  --patch-notes-webkit-scrollbar-thumb-hover: #033549ca;
  --a-notifation-color:rgb(32, 165, 247);
  --a-notifation-hover: rgba(0, 0, 0, 0.80);
  --patch-notes-hover:#051221;
  --btn-form-hover:rgb(5, 21, 32);
  --js-char-count-color:#666;
  --textarea-focus:0px 0px 5px rgba(7, 121, 183, 0.5);
  --aboutme-video-box-shadow: 0px 2px 2px 0px rgba(51, 51, 51, 0.5);
  --pix-color:rgb(48, 182, 168);
  --coffee-color:rgb(153, 45, 45);
  --dolar-color: rgb(71, 225, 71);
  --paypal-color:rgb(0, 40, 141);
  --paypal-color-hover: rgb(8, 59, 189);
}

:root[data-theme="noir"] {
  --python-blue: black;
  --python-yellow: rgb(216,216,216);
    --python-gradient-text: linear-gradient(
    90deg,
    rgb(255, 255, 255),
    whitesmoke,
    rgb(230, 230, 230),
    rgb(217, 217, 217)
  );
  --nav-toggle-icons: rgb(216, 216, 216);
  --background-contrast-border:solid 1px rgba(255, 255, 255, 0.40);
  --bold: rgb(96, 205, 255);
  --container-text-background:rgb(18, 18, 18);
  --pix-color:var(--python-yellow);
  --copy-btn-color: var(--python-blue);
  --paypal-color:rgb(0, 40, 141);
  --paypal-color-hover: rgb(8, 59, 189);
  --patch-notes-webkit-scrollbar-track: #1b1b1b;
  --patch-notes-webkit-scrollbar-thumb: #f7f7f7b7;
  --patch-notes-webkit-scrollbar-thumb-hover: #d3d3d3;
  --project-img-card-border:solid 1px rgb(216, 216, 216);
  --textarea-focus:0px 0px 5px rgba(248, 248, 246, 0.75);
  --a-notifation-color: rgb(96, 205, 255);
  --a-notifation-hover: #1b1b1bd5;
}

:root[data-theme='ice'] {
  --text-grey:rgb(30, 30, 30);
  --text-grey-background: linear-gradient(rgba(118, 118, 118, 0.8), rgba(207, 232, 250, 0.60));
  --text-grey-border-bottom:solid 2px rgb(79, 79, 79);
  --text-grey-text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.20);
  --background-contrast: linear-gradient(rgba(0,0,0,0.4), rgba(0, 0, 0, 0.20));
  --background-contrast-border:solid 1px rgba(48, 48, 48, 0.3);
  --container-text-background:rgb(208, 232, 249);
  --text-shadow-text:2px 2px 4px rgba(255, 255, 255, 0.20);
  --container-text-border:0.5px solid rgba(0, 0, 0, 0.50);
  --project-img-card-border:solid 1px rgb(30,30,30);
  --btn-form-hover:rgb(59, 59, 59);
  --patch-notes-webkit-scrollbar-track: #e1e1e1;
  --patch-notes-webkit-scrollbar-thumb: #151515;
  --patch-notes-webkit-scrollbar-thumb-hover: #1b1b1b;
  --patch-notes-hover: rgb(71, 71, 71);
}

:root[data-theme="blood"] {
  --text-grey:rgb(144, 144, 144);
  --container-text-background:rgba(22, 2, 2, 0.20);
  --textarea-focus:0px 0px 5px rgba(73, 4, 4, 0.40);
  --project-img-card-border:solid 1px var(--python-blue);
  --btn-form-hover:rgb(68, 11, 1);
  --patch-notes-webkit-scrollbar-track: #1d1d1d;
  --patch-notes-webkit-scrollbar-thumb: #570505;
  --patch-notes-webkit-scrollbar-thumb-hover: #820808;
  --patch-notes-hover: rgb(30, 26, 26);
  --a-notifation-color: rgb(220, 42, 42);
  --a-notifation-hover: rgb(30, 26, 26);
}

:root[data-theme="neon"] {
  --project-img-card-border:solid 1px #3d0cd1;
  --btn-form-hover:#3d0cd18f; 
  --patch-notes-hover: #3d0cd18f;
  --patch-notes-webkit-scrollbar-track:#10024b;
  --patch-notes-webkit-scrollbar-thumb: #900482;
  --patch-notes-webkit-scrollbar-thumb-hover: #b408a3;
  --container-text-background:rgba(27, 2, 92, 0.3);
  --a-notifation-hover: #23067c8f;
  --text-grey:rgb(224, 151, 252);
}

:root[data-theme="ocean"] {
  --project-img-card-border:solid 1px var(--python-yellow);
  --btn-form-hover:#1c55d18f; 
  --patch-notes-hover: #1c55d18f;
  --patch-notes-webkit-scrollbar-track:#0c214f;
  --patch-notes-webkit-scrollbar-thumb: #01192f;
  --patch-notes-webkit-scrollbar-thumb-hover: #02294d;
  --container-text-background:#01192fab;
  --a-notifation-hover: #142cc6;
  --text-grey:rgb(190, 189, 190);
}

:root[data-theme='fire']{
  --project-img-card-border:solid 1px var(--python-blue);
  --bold:rgba(253, 46, 46, 0.838);
  --container-text-background:rgba(19, 19, 19, 0.971);
  --btn-form-hover:#d16a1c85; 
  --patch-notes-hover: #d16a1c85;
  --patch-notes-webkit-scrollbar-track:#1f1f1f;
  --patch-notes-webkit-scrollbar-thumb: rgb(155, 55, 2);
  --patch-notes-webkit-scrollbar-thumb-hover: rgb(171, 93, 4);
  --a-notifation-hover: #2b2b2b;
  --a-notifation-color: rgb(220, 42, 42);
}

:root[data-theme='forest']{
  --project-img-card-border:solid 1px var(--python-blue);
  --bold:rgba(117, 250, 126, 0.838);
  --container-text-background:rgba(1, 24, 4, 0.742);
  --btn-form-hover:#00501c; 
  --patch-notes-hover: #00501c;
  --patch-notes-webkit-scrollbar-track:#022f16;
  --patch-notes-webkit-scrollbar-thumb: #005641;
  --patch-notes-webkit-scrollbar-thumb-hover: #016c51;
  --a-notifation-hover: #00501c;
  --a-notifation-color: var(--text-color);

}

:root[data-theme="blood"] .a-projects:hover {
  color: whitesmoke;
}

:root[data-theme="blood"]  .container-text,
:root[data-theme="neon"]  .container-text { 
  text-shadow: none;
}

:root[data-theme="blood"] .bold { 
  color: rgba(187, 3, 3, 0.742);
}

:root[data-theme="blood"] .textarea { 
  caret-color: rgb(247, 67, 67);
}

:root[data-theme='ice'] .paypal-key .fa-copy{
  color: whitesmoke;
}

:root[data-theme='ice'] .a-projects{
  color: rgb(247, 246, 246);
}

:root[data-theme='ice'] .btn, 
:root[data-theme='ice'] .patch-notes-btn {
  background-color: rgb(41, 41, 41);
  color: whitesmoke;
}

:root[data-theme='ice'] .fa-copy {
  color: #1b1b1b;
}

:root[data-theme="noir"] .aboutme-video {
  border: 1px solid var(--python-yellow);
}

:root[data-theme="noir"] .container-notifications-bug-comment i:hover {
  color: #ff9e28;
}

:root[data-theme="noir"] .anonymous-text {
  color: rgb(96, 205, 255);
}

:root[data-theme="noir"] .textarea, .textarea::placeholder {
  color: var(--python-yellow) !important;
  caret-color: var(--python-yellow);
}

:root[data-theme='noir'] .textarea:hover {
  border-color: var(--python-yellow);
}

:root[data-theme='noir'] .textarea:focus {
  border-color: var(--python-yellow);
  box-shadow: var(--textarea-focus);
}

:root[data-theme="blood"] h4 {
  text-shadow: 1px 1px 2px rgba(69, 2, 2, 0.5) !important;
}


h1 {
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
}

h2 {
  font-size: 1.6rem;
  font-weight: 600;
}

h4 {
  text-align: center;
}

.gradient-text {
  background-image: var(--python-gradient-text);
  -webkit-background-clip: text;
  background-clip: text; /* para navegadores que suportam sem prefixo */
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  font-size: 1.4rem;
  margin: 0 auto;
  max-width: 1400px;
  padding-top: 12rem;

}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  flex-direction: column;
  border-radius: 0.5rem;
}

.cards {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  padding: 1rem;
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
  height: auto;
}

.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 0.5rem;
  gap: 1rem;
}
.card-img {
  position: relative;
  max-width: 400px;
  width: 20rem;
  max-height: 10rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  opacity: 0.8;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  aspect-ratio: 16 / 9;
}

.card-img:hover {
  opacity: 1;
  transform: scale(1.05);
}

.card-img img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
  background-color: var(--bg-primary);
  display:block;
  opacity: 0;
  z-index: 3;
}

.img-skeleton { 
  position:absolute; 
  inset:0;
  background:var(--skeleton-background); 
  animation:loading 1.6s linear infinite; 
  z-index: 2;
}

.card-img.loaded .img-skeleton { 
  opacity:0; 
  visibility:hidden; 
  transition: opacity .3s ease, visibility .3s;
}

.card-img.loaded img { 
  opacity: 1; 
}

.card-content {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
}

.technologies {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: 2rem;
  border-radius: 1rem;
 border: var(--background-contrast-border);
  padding: 1rem;
  background: var(--background-contrast);
}

.technologies img {
  width: 2.5rem;
  height: 2.5rem;
}

.fa-video {
  color: #d12721;
  margin-top: 0.5rem;
}

.code:hover i {
  color: var(--text-color);
}

.video:hover i {
  color: var(--text-color);
}

.video,
.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  gap: 1rem;
  border-radius: 0.5rem;
  border: var(--background-contrast-border);
  transition: all 0.3s ease-in-out;
  background: var(--background-contrast);
  cursor: pointer;
}

.a-projects {
  text-decoration: none;
  font-size: 1.4rem;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 600;
}

.video:hover {
  background-color: rgba(212, 30, 30, 0.8);
  transform: scale(1.1);
}

.code:hover {
  background-color: #7433c3;
  transform: scale(1.1);
}

.devicon-django-plain,
img {
  width: 3rem;
  height: 3rem;
}

.code-and-video {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.glassphorm {
  padding: 0.5rem 1rem;
  border: solid 1px rgba(58, 57, 57, 0.5);
  transition: all 0.3s ease-in-out;
  background-color: var(--bg-primary);
}

.container-text {
  text-align: center;
  line-height: 1.6;
  font-size: 1.2rem;
  margin: 0 auto;
  text-shadow: var(--text-shadow-text);
  background:var(--container-text-background);
  z-index: 2;
  /* border: var(--container-text-border); */
  backdrop-filter: blur(1px);
  padding: 1rem;
  border-radius: 0.4rem;
}

.bold {
  font-weight: 700;
  color: var(--bold);
}

.fa-star {
  color: #fdbb3e;
}
.django {
  background-image: linear-gradient(180deg, #004d40, #028872, #73f4df);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spring {
  background-image: linear-gradient(180deg, #13971e, #069843, #73f4df);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.angular {
  background-image: linear-gradient(180deg, #971313,#ae2424, #fafafa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.selenium {
    background-image: linear-gradient(180deg, #202020,#676767, #fafafa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mongodb {
    background-image: linear-gradient(180deg, rgb(1, 67, 47),rgb(0, 102, 72), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.docker {
  background-image: linear-gradient(180deg, rgb( 9, 151, 229),rgb(45, 154, 212), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.git {
  background-image: linear-gradient(180deg, rgb(229, 82, 9),rgb(212, 156, 45));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.github {
  background-image: linear-gradient(180deg, rgb(112, 9, 229),rgb(165, 115, 207));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.golang {
    background-image: linear-gradient(
    90deg,
    #00add8,
    #45f0fc
  ); 
  -webkit-background-clip: text;
  background-clip: text; /* para navegadores que suportam sem prefixo */
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
  /* font-weight: 600; */
}

.python {
    background-image: linear-gradient(
    90deg,
    #05b1f4,
    #34c0f8,
    #ff9e28,
    #fcc245
  ); 
  -webkit-background-clip: text;
  background-clip: text; /* para navegadores que suportam sem prefixo */
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
  /* font-weight: 600; */
}

.typescript {
  background-image: linear-gradient(120deg, rgb(47, 116, 192), rgb(207, 237, 243));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.java {
  background-image: linear-gradient(90deg, #dc2d2d, #3eadc0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.html {
  color: rgb(210, 75, 3);
}

.css {
  color: rgb(2, 78, 200);
}

.javascript {
  background-image: linear-gradient(90deg, #ff9e28, #fcc245);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.react {
  background-image: linear-gradient(180deg, #4fbded, #74c8ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.postgre {
    background-image: linear-gradient(180deg, rgb(49, 100, 140), #74c8ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.soft-skills,
.hard-skills {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.donation-mobile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 1400px;
  width: 80%;
  padding: 1rem;
  margin: 0 auto;
}

.pix-key, .paypal-key {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--bg-primary);
  border: var(--background-contrast-border);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.pix-text, .paypal-text {
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto;
}

.fa-mug-saucer {
  color: var(--coffee-color);
  font-size: 1.8rem;
}
.fa-sack-dollar {
  color: var(--dolar-color);
  font-size: 2rem;
}

.fa-pix {
  color: var(--pix-color);
  font-size: 2rem;
}

.fa-copy {
  color: var(--bg-primary);
}

.fa-paypal {
  color: var(--paypal-color);
  font-size: 2rem;
}

.copy-btn {
  color: var(--copy-btn-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  outline: none;
  background-color: var(--pix-color);
  border: none;
  padding: 0.5rem;
  border-radius: 0.4rem;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  cursor: pointer;
}

.copy-btn:hover {
  transform: scale(1.05);
}

.pix-btn {
  background-color: var(--pix-color);
}

.paypal {
  background-color: var(--paypal-color);
  color: whitesmoke;
}

.paypal:hover {
  background-color: var(--paypal-color-hover);
}

.paypal .fa-copy {
  color: whitesmoke;
}

.container-notifications-bug-comment-mobile {
  display: flex;
  align-items: center;
  position: relative !important;
  gap: 1rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: var(--icons-border);
  transition: all 0.3s ease-in-out;
  background-color: var(--bg-primary);
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  z-index: 999;
}

.icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
  margin: 0 auto;
  width: 100%;
}

.notification-wrapper {
  position: relative;
  display: inline-block;
}

.notification-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  position: absolute;
  z-index: 10;
  top: -6px;
  right: -6px;
  color: var(--python-yellow);
  font-size: 0.8rem;
  font-weight: bold;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid var(--python-yellow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.18);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.12);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.patch-notes {
  display: none;
  position: absolute;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  background: var(--bg-primary);
  border: var(--project-img-card-border);
  padding: 2rem;
  scroll-padding-top: 2rem;
  border-radius: 0.5rem;
  width: 30rem;
  z-index: 99999 !important;
  overflow-y: auto;
  max-height: 60vh;
}

.patch-notes > * {
  text-align: center;
}

.patch-notes::-webkit-scrollbar {
  width: 0.5rem;
}

.patch-notes::-webkit-scrollbar-track {
  background: var(--patch-notes-webkit-scrollbar-track);
}

.patch-notes::-webkit-scrollbar-thumb {
  background: var(--patch-notes-webkit-scrollbar-thumb);
  border-radius: 0.5rem;
}

.patch-notes::-webkit-scrollbar-thumb:hover {
  background: var(--patch-notes-webkit-scrollbar-thumb-hover);
}

.a-notification {
  font-size: 1.2rem;
  color: var(--a-notifation-color);
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--python-yellow);
  opacity: 0.9;
}

.a-notification:hover {
  background-color:var(--a-notifation-hover);
  opacity: 1;
}

.tooltip, .tooltip-theme {
  position: relative;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-primary);
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: initial;
  background-image: none;
  color: var(--text-color);
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  font-size: 1.2rem;
  z-index: 1000;
  border: var(--icons-border);
}

.tooltip-theme::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-primary);
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: initial;
  background-image: none;
  color: var(--text-color);
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  font-size: 1.2rem;
  z-index: 1000;
  border: var(--icons-border);
}

.tooltip:hover::after, .tooltip-theme:hover::after {
  opacity: 1;
}

.patch-notes-btn{
  font-size: 1.4rem;
  outline: none;
  transition: all 0.3s ease-in-out;
  color: var(--python-yellow);
  font-weight: bold;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  border: 1px solid var(--python-yellow);
  cursor: pointer;
  background-color: transparent;
}

.patch-notes-btn:hover {
  background-color: var(--patch-notes-hover);
}

.anonymous-patch-notes {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
  gap: 0.3rem;
}

.container-notifications-bug-comment-mobile i {
  font-size: 1.8rem;
  color: var(--python-yellow);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.anonymous-patch-notes i {
  font-size: 1.8rem;
  color: var(--python-yellow);
  cursor: not-allowed;
}

.anonymous-patch-notes i:hover {
  transform: scale(1) !important;
  color: var(--python-yellow) !important;
}

.anonymous-text {
  font-size: 0.7rem;
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
}

.container-notifications-bug-comment i {
  font-size: 1.8rem;
  color: var(--python-yellow);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.container-notifications-bug-comment i:hover {
  transform: scale(1.1);
  color: var(--python-blue);
}



.btn {
  margin: 0 auto;
  padding: 0.5rem 1rem;
  width: max-content;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--python-yellow);
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
  display:block;
  z-index: 2;
  border: var(--icons-border);
  background-color: var(--bg-primary);
}

.btn:hover {
  transform: scale(1.05);
  background-color: var(--btn-form-hover);
}


.container-comment,
.container-bug-report {
  text-align: center;
  display: none;
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-primary);
  border: var(--project-img-card-border);
  padding: 2rem;
  border-radius: 0.5rem;
  width: 30rem;
  z-index: 99999 !important;
}

.container-comment[style*="flex"],
.container-bug-report[style*="flex"],
.patch-notes[style*="flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.icons i {
    cursor: pointer !important;
    pointer-events: auto !important;
}

#comment-form,
#bug-report-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: none;
}

.cancel-button-wrapper {
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--python-yellow);
  border-radius: 0.8rem;
  padding: 1rem;
  transition: all 0.3s ease-in-out;
}

.cancel-button-wrapper div {
  position: absolute;
  width: 1.5rem;
  height: 0.2rem;
  background-color: var(--python-yellow);
  border-radius: 0.2rem;
}


.line-1 {
  transform: rotate(45deg);
}

.line-2 {
  transform: rotate(-45deg);
}

.textarea {
  color: var(--python-blue);
  box-sizing: border-box;
  height: auto;
  resize: none;
  width: 100%;
  max-width: 500px;
  height: 15rem;
  font-size: 1.6rem;
  line-height: 1.4;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--bg-primary);
  outline: none;
  caret-color: var(--python-blue);
  border: var(--icons-border);
  opacity: 0.9;
  transition: all 0.3s ease;
}

.js-char-count {
  color: var(--js-char-count-color);
}

.js-char-count.over { color: #e74c3c; font-weight: 600;}

.textarea.over-limit { border-color: #e74c3c; }

.textarea::placeholder {
  color: var(--python-blue);
}

.textarea:hover {
  border-color: var(--python-blue);
}

.textarea:focus {
  border-color: var(--python-blue);
  box-shadow: var(--textarea-focus);
}

.cancel-button-wrapper:hover{
  transform: scale(0.96);
}

.no-projects {
  display: flex;
  max-width: 1400px;
  width: 100%;
  padding: 2rem;
  align-items: center;
  margin: 0 auto;
  background-color: var(--container-text-background);
}
.no-projects i {
  color: var(--python-yellow);
  font-size: 1.4rem;
}

.no-projects-message {
  font-size: 1.2rem;
  text-align: center;
  padding: 1rem;
}

#donations {
  display: flex;
  flex-direction: column;
}

.text-grey {
  color: var(--text-grey);
  padding: 0.5rem;
  border-radius: 0.4rem;
  background: var(--text-grey-background);
  border-bottom: var(--text-grey-border-bottom);
  text-shadow: var(--text-grey-text-shadow);
  margin: 0 auto;
}

 .pix-fallback-text {
      display: none;
    }

  .donation-and-modals-desktop {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
  }


  .copy-msg-container {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-50%);
  max-width: 200px;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  background-color: var(--bg-primary);
  border: var(--icons-border);
  padding: 1rem;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, border-color 500ms;
  border-radius: 0.4rem;
}

.copy-msg-container.fadeIn {
  border: 1px solid var(--python-yellow);
  opacity: 1;
  transform: translateX(-50%) translateY(-60%); /* Sobe um pouco */
}

.copy-msg-container.fadeOut {
  opacity: 0;
  transform: translateX(-50%) translateY(-70%); /* Sobe mais e desaparece */
}

.copy-msg {
  font-size: 1.2rem;
  color: var(--text-color);
  font-weight: 600;;
}

.fa-clipboard {
  color: var(--python-yellow);
  font-size: 1.4rem;
}

.video-wrapper {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 1rem;
}

.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}

.video-skeleton {
  display: flex;
  position: absolute;
  inset: 0;
  /* top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  background: var(--skeleton-video-background);
  align-items: center;
  justify-content: center;
  z-index: 2;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s;
  opacity: 1;
  pointer-events: none;
}

.video-container.loaded .video-skeleton {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.skeleton-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--skeleton-background);
  background-size: 200% 100%;
  animation: loading 1.6 linear infinite;
}

.skeleton-play-button {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--skeleton-play-button-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: var(--skeleton-border);
  cursor: pointer;
  z-index: 3;
}

.skeleton-play-button::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-left: var(--skeleton-border-after);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

@keyframes loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.aboutme-video {
  padding: 0.3rem;
  width: 100%;
  border-radius: 0.4rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--python-blue);
  box-shadow: var(--aboutme-video-box-shadow);
}

@media(min-width:480px) {

.video-wrapper {
  max-width: 500px;
}

  .no-projects-message{
    font-size: 1.4rem;
  }
.container-text {
  width: 90%;
  margin: 0 auto;
}

.username {
  font-size: 1.6rem;
}

h2 {
  font-size: 2rem;
}

h4 {
  font-size: 1.8rem;
  border-radius: 0.4rem;
  padding: 0.8rem;
}

.container-blur {
  background: var(--bg-primary);
  z-index: 2;
}
  .card-img {
    width: 25rem;
  }

.technologies img {
  width: 3rem;
  height: 3rem;
}

.a-projects {
  font-size: 1.6rem;
}

.container-text {
  font-size: 1.4rem;
}
}

@media(min-width:768px) {

  .container-notifications-bug-comment-mobile {
    display: none;
  }

  .donation-and-modals-desktop {
    display: flex;
  }


  .donation-mobile {
    display: none;
  }

  .pix-fallback-text {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    }

    .paypal-container {
      position: relative;
    }

    .fa-mobile-screen-button {
      color: var(--pix-color);
      font-size: 2rem;
    }

    .pix-container, .paypal-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    max-width: 300px;
    width: 100%;
  }
  .pix-img-wrapper, .paypal-img-wrapper {
    padding: 1rem;
    object-fit: contain;
  }
  .pix-img-wrapper img, .paypal-img-wrapper img {
    width: 10rem;
    height: auto;
    border-radius: 0.5rem;
    border: 3px solid var(--python-blue);
  }

  .pix-text, .paypal-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: center;
    font-size: 1.2rem;
  }

  .notification-count {
  width: 1.5rem;
  height: 1.5rem;

}

  h2 {
    font-size: 2.4rem;
  }

  .cards {
      grid-template-columns: repeat(2, 1fr);
  }

  .card {
    align-self: start;
  }

  .a-projects {
    font-size: 1.8rem;
  }

  .text-grey {
    font-size: 1.6rem;
  }

  .no-projects{
    font-size: 1.8rem;
  }

  .container-text  {
    font-size: 1.8rem;
  }

  .hard-skills {
    font-size: 1.8rem;
  }

  .container-notifications-bug-comment {
    display: flex;
    position: relative;
    max-width: 200px;
    border: var(--icons-border);
    background-color: var(--bg-primary);
    border-radius: 0.4rem;
    max-width: 600px;
  }

  .icons {
    padding: 1rem;
    gap: 2rem;
  }

  .container-notifications-bug-comment i {
    font-size: 2rem;
  }


  .patch-notes p{
    font-size: 1.6rem;
  }

  .a-notification {
    font-size: 1.4rem;
  }

  .patch-notes-btn{
  font-size: 1.6rem;
}

  .copyright{
    font-size: 1.2rem;
  }

  .container-comment label, .container-bug-report label{
    font-size: 1.8rem;
  }

.textarea {
  font-size: 1.8rem;
}

.js-char-count {
  font-size: 1.6rem;
}
  .btn {
  font-size: 1.8rem;
  }
}


@media(min-width:1024px){
  .username {
    font-size: 1.8rem;
  }

  .pix-text, .paypal-text {
    font-size: 1.6rem;
  }

  .container:nth-of-type(1) {
  margin-top: 5rem;
  }

  body {
    display: grid;
    grid-template-columns: 300px 1fr;
  }

  .no-projects-message {
    font-size: 1.8rem;
  }

  main {
    grid-column: 2 / 3;
    min-height: 100vh;
    padding: 2rem;
  }
}

@media (min-width:1400px) {
  .donation-and-modals-desktop i {
    font-size: 2.4rem;
  }


  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  h4 {
    font-size: 2rem;
  }

  body {
    font-size: 2.4rem;
  }

  .card-img img{
    width: 25rem;
    height: auto;
  }

  .a-project {
    font-size: 2rem;
  }

  .copyright {
    font-size: 1.4rem;
  }

  .hard-skills {
    font-size: 2.2rem;
  }

  .container-text {
    font-size: 2rem;
  }

  .pix-fallback-text, .text-grey {
    font-size: 1.8rem;
  }
}