:root,
:root[data-theme="default"]{
    --border-light: solid 1px rgba(33, 142, 243, 0.3);
    --border-dark:solid 1px rgba(21, 65, 211, 0.50);
    --button-bg-color: linear-gradient(0deg, rgb(10, 86, 178), rgb(30, 114, 216),rgb(55, 132, 226));
    --button-bg-color-hover: linear-gradient(180deg, rgb(6, 79, 168), rgb(29, 111, 212),rgb(54, 136, 236));
    --bg-primary: #060c10;
  --text-color:#f0f0cad9;
  --python-blue: #0099ff;
  --python-yellow: #fdbb3e;
    --python-gradient-text: linear-gradient(
    90deg,
    #05b1f4,
    #34c0f8,
    #ff9e28,
    #fcc245
  ); 
    --blue-start: #05b1f4;
    --blue-end: #34c0f8;
    --yellow-start: #ff9e28; 
    --yellow-end: #fcc245;
  --btn-bg-hover: rgba(3, 15, 66, 0.06);
  --transition-time: 360ms;
  --transition-ease: cubic-bezier(.2,.9,.2,1);
  --textarea-focus-box-shadow-color:rgba(7, 121, 183, 0.5);
  --textarea-focus-border:#2c87e1;
  --textarea-hover-color:#ff9e28;
  --form-btn-hover:#081118;
}

:root[data-theme="noir"] {
    --blue-start: #1e1e1e;
    --blue-end: #232323;
    --yellow-start: #c5c5c5; 
    --yellow-end: #e8e8e8;
    --python-blue: black;
  --python-yellow: rgb(246, 246, 246);
    --python-gradient-text: linear-gradient(
    90deg,
    rgb(255, 255, 255),
    whitesmoke,
    rgb(230, 230, 230),
    rgb(217, 217, 217)
  ); 
  --text-color: var(--python-yellow);
  --textarea-focus-box-shadow-color: rgba(220, 220, 220, 0.45);
  --textarea-focus-border: #cfcfcf;
  --textarea-hover-color: #e0e0e0;
  --form-btn-hover: #121212;
  --border-light: 1px solid rgba(230, 230, 230, 0.35);
}

:root[data-theme="ice"] {
    --blue-start: #1e1e1e !important;
    --blue-end: #232323 !important;
    --yellow-start: #101010 !important; 
    --yellow-end: #000000 !important;
    --python-blue: #171717;
  --python-yellow: rgb(51, 50, 50);
    --python-gradient-text: linear-gradient(
    90deg,
    rgb(17, 17, 17),
    rgb(31, 31, 31),
    #242424,
    #2b2b2b
  ); 
  --textarea-focus-box-shadow-color: rgba(220, 220, 220, 0.45);
  --textarea-focus-border: #cfcfcf;
  --textarea-hover-color: #e0e0e0;
  --form-btn-hover: #121212;
  --border-light: 1px solid rgba(230, 230, 230, 0.35);
}

:root[data-theme="blood"] {
    --python-blue: #5d0c0c;
    --python-yellow: rgb(187, 24, 24);
    --bg-primary: #0f0f0f;
    --text-color: #d27171 !important;
    --python-gradient-text: linear-gradient(
        90deg,
        #5d0c0c,
        #831212,
        #ad1a1a,
        #c21919
        ); 
    --blue-start: #000000 !important;
    --blue-end: #5d0c0c !important;
    --yellow-start: #ad1a1a !important; 
    --yellow-end: #000000 !important;
     --textarea-focus-box-shadow-color: rgba(220, 220, 220, 0.45);
     --form-btn-hover: #121212;
}

:root[data-theme="noir"] .textarea-project {
    color: var(--python-yellow);
    border-color: rgb(87, 87, 87);
}

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

:root[data-theme="ice"] .title-icon, 
:root[data-theme="ice"] .finished-date {
    color: var(--python-blue);
}

:root[data-theme="ice"] .textarea-project {
    border-color: var(--python-blue);
}

:root[data-theme="ice"] .form-btn {
    border: solid 1px var(--python-blue);
}

:root[data-theme="ice"] .form-btn:hover {
    background-color: rgba(220, 220, 220, 0.744);
}

:root[data-theme="blood"] .textarea-project {
    color: var(--python-yellow);
    border-color: rgb(39, 39, 39);
}

:root[data-theme="blood"] .textarea-project::placeholder {
    color: var(--python-yellow);
}

:root[data-theme="blood"] .form-btn {
    border: solid 1px var(--python-blue);
}

h1 {
    font-size: 1.8rem;
}

h2, h4 {
    text-align: center;
    font-size: 1.4rem;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.20);
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 1400px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 1rem;
    flex-direction: column;
  }

.container-project {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin-top: 3rem auto 0 auto;
    padding: 1rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
    gap:2rem;
    border-top: 3px solid var(--python-blue);
    border-bottom: 3px solid var(--python-yellow);
    background-color: var(--bg-primary);
    z-index: 999;
}

.container p {
    line-height: 2 !important;
}
.video-wrapper {
    overflow: hidden;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 560px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    aspect-ratio: 16 / 9;
    box-shadow: 0px 0px 10px rgba(250, 250, 250, 0.2);
    padding: 5px;
    background-image: linear-gradient(90deg, var(--blue-start), var(--blue-end), var(--yellow-start), var(--yellow-end));
    animation: borderAnimation 4s linear infinite; 
}

.video-wrapper iframe {
    border-radius: 0.5rem;
    border: none;
    width: 100%;
    height: 100%;
    display: block;
}

.video-wrapper:hover {
    filter:brightness(1.2);
} 

@keyframes borderAnimation {
    0% {
        background: linear-gradient(90deg, var(--blue-start), var(--blue-end), var(--yellow-start), var(--yellow-end));
    }
    25% {
        background: linear-gradient(90deg, var(--blue-end), var(--yellow-start), var(--yellow-end), var(--blue-start));
    }
    50% {
        background: linear-gradient(90deg, var(--yellow-start), var(--yellow-end), var(--blue-start), var(--blue-end));
    }
    75% {
        background: linear-gradient(90deg, var(--yellow-end), var(--blue-start), var(--blue-end), var(--yellow-start));
    }
    100% {
       background: linear-gradient(90deg, var(--blue-start), var(--blue-end), var(--yellow-start), var(--yellow-end));
    }
}

.project-description {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--bg-primary);
    z-index: 999;
    border-radius: 1rem;
    border-top: 3px solid var(--python-blue);
    border-bottom: 3px solid var(--python-yellow);
}

.title-icon, .finished-date {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem auto;
    text-align: center;
    padding: 0.5rem 1rem;
    width: 90%;
    color: rgb(199, 199, 199);
}

.fa-calendar-days {
    color: var(--python-yellow);
    }
.fa-laptop-code {
    color:var(--python-blue);
}

.description {
    width: 100%;
    font-size: 1.4rem;
    color: var(--text-color);
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
}

.label-feedback-project {
    text-align: center;
    font-size: 1.6rem;
}

.container-feedback-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    height: auto;
    padding: 1rem;
}

.feedback-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto;
    padding: 1rem;
}

#project-feedback-form {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-primary);
    z-index: 9999;
}

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

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

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


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

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

.textarea-project:focus {
    border-color: var(--textarea-focus-border);
    box-shadow: 0px 0px 5px var(--textarea-focus-box-shadow-color);
}

.form-btn {
    font-size: 1.4rem;
    outline: none;
    padding: 0.5rem 1rem;
    margin: 0 auto;
    color: var(--python-yellow);
    max-width: 300px;
    width: 50%;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: 600;
    position: relative;
    display:block;
    border-radius: 0.5rem;
    z-index: 2;
    border: var(--border-light);
    background-color: var(--bg-primary);
}

.form-btn:hover {
    background-color: var(--form-btn-hover);
    transform: scale(0.96);
    transition: all 0.3s ease-in-out;
}

.feedback-wrapper i {
    font-size: 2rem;
}

.container-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 20%;
    height: auto;
    align-self: center;
    padding: 1rem 2rem; 
}

.container-stars i {
    font-size: 1.3rem;
    color: rgb(171, 171, 171);
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.container-stars i.active,
.container-stars i.hover {
    color: var(--python-yellow);
}

.footer-bug-comment {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
    flex-direction: column;
}

#spinner {
  display:none; 
  margin-top: 10px; 
  text-align: center;
}

.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #555;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@media(min-width:480px){
    h1 {
    font-size: 2rem;
}
    h2, h4 {
    text-align: center;
    font-size: 1.6rem;
}

    .label-feedback-project {
    font-size: 1.8rem;
}


.textarea-project {
    font-size: 1.6rem;
}

.form-btn {
    font-size: 1.6rem;
    width: 30%;
}
}

@media(min-width:768px){
    h1 {
    font-size: 2.4rem;
}
    h2, h4 {
    text-align: center;
    font-size: 1.8rem;
}

.description, .finished-date {
    font-size: 1.6rem;
}

.project-description {
    width: 90%;
}

.container-project {
    width: 90%;
}

.label-feedback-project {
    font-size:2.2rem;
}

.textarea-project {
    font-size: 1.8rem;
}

#project-feedback-form {
    width: 80%;
}

.form-btn {
    font-size: 1.8rem;
}

.container-stars i {
    font-size: 1.8rem;
}

.footer-bug-comment {
    flex-direction: row;
}
}

@media(min-width:1024px){
    h1 {
    font-size: 3rem;
}
    h2, h4 {
    text-align: center;
    font-size: 2rem;
}
    .js-char-count {
        font-size: 1.8rem;
    }

#project-feedback-form {
    width: 70%;
}
}